Form Tracking Builder
ActiveCampaign-Skript einfügen, anpassen und mit UTM-Tracking, dt_aid und WhatsApp-Check generieren.
▶ 1. ActiveCampaign Embed-Skript Leer
Füge hier das komplette Embed-Skript aus ActiveCampaign ein (inline HTML-Form oder <script src="...embed.php?id=...">).
▶ 2. Chatsetter API-Endpoint Leer
Die URL aus deinem Chatsetter-WhatsApp-Check-Skript (z. B. https://app.chatsetter.io/api/tools/check/godia-1774880421558/sachwert-vsl).
Auf Senden wird ein POST mit {phone, firstName, lastName, email} gemacht. Antwort muss {"exists": true|false} enthalten.
▶ 3. Felder umbenennen & beschriften —
Klick "Felder erkennen" oben, dann erscheinen hier alle Eingabefelder. Du kannst Label und Placeholder neu setzen.
▶ 4. Button-Styling Standard
▶ 5. UTM- & Tracking-Felder automatisch
Folgende Hidden-Fields werden automatisch ins Formular injiziert und beim Submit mitgeschickt. Mapping = Feldname in ActiveCampaign.
Standardstrategie: Skript liest URL des iFrames und empfängt Werte vom Parent via postMessage (siehe Tab "So baust du es ein").
▶ 6. Generiertes Embed-Skript —
Output (in deine Landingpage einbetten)
Debug & Test
Live-Vorschau des generierten Skripts in einem iFrame mit eingebetteter Console und automatisierten Checks.
postMessage, echte WA-Check-Calls.Live-Vorschau idle
Console 0
Automatische Checks
?utmsource=… oder localStorage)window.cfields)So baust du es ein
Es gibt zwei Komponenten: das Form-Snippet (in den iFrame) und das Parent-Snippet (auf die Landingpage neben den iFrame).
▶A) Form-Snippet (in iFrame oder direkt einbetten)
Das ist der Output aus dem Builder. Wenn du das Form direkt in die Landingpage embeddest (kein iFrame), brauchst du das Parent-Snippet nicht — UTMs werden direkt aus der URL gelesen.
— erst im Builder erzeugen —
▶B) Parent-Snippet (nur bei iFrame nötig)
Auf die Landingpage einfügen, irgendwo vor oder nach dem iFrame. Liest UTMs aus der Parent-URL und sendet sie an alle iFrames per postMessage. Funktioniert auch wenn der iFrame nach dem Snippet geladen wird.
Auf der Landingpage einbetten
▶C) iFrame-Beispiel (komplett)
Eine eigene HTML-Datei pro Form, die du als iFrame einbettest. Achte darauf, dass das Parent-Snippet auf der Landingpage liegt.
Styling-Presets
Komplettes Formular-Styling aus einem bestehenden Formular extrahieren, als benanntes Preset speichern (z. B. „GODIA") und auf neue Formulare anwenden. Palette-Änderungen ziehen sofort in den generierten Output.
▶1. Formular analysieren
Füge ein bestehendes, gestyltes Formular-Embed ein — alle <style>-Regeln und berechneten Farben (Buttons, Inputs, Hintergründe, Labels, Border, Radius, Font) werden extrahiert.
▶2. Erkanntes Styling — Palette & CSS
Palette ist editierbar. Diese Werte „gewinnen" gegenüber dem rohen CSS und werden bei jeder Änderung sofort in den Output gezogen. Leeres Hex-Feld = Wert wird nicht gesetzt.
Rohes CSS (1:1 aus dem Formular, editierbar):
▶3. Vorschau
Das eingefügte Formular mit aktuell editierter Palette + CSS.