Forms & Funnels

Mit Forms & Funnels baust du mehrstufige Lead-Qualifizierungs-Flows mit conditional Routing, Path-Merging und regelbasierten Email-Benachrichtigungen. Anders als ein einzelnes Kontaktformular fuehrt ein Funnel den Besucher durch mehrere Schritte, verzweigt anhand der Antworten und routet das Ergebnis an unterschiedliche Empfaenger.

Diese Seite beschreibt den Editor-Workflow von vorn bis hinten. Die Entwicklerseite (Plugin-Internals, API, Schema) findest du in der Developer-Doku.

Wo das Modul lebt

Oeffne Seiten → Forms & Funnels in der Seitenleiste. Der Screen hat vier Tabs:

• Funnels — Liste aller Funnels mit Status, Node-Anzahl und Stats.
• Editor — visueller Flow-Builder, erst sichtbar wenn ein Funnel ausgewaehlt oder angelegt ist.
• Inbox — Submission-Liste mit Filtern, Drill-Down und CSV-Export.
• Analytics — Drop-off-Chart mit A/B-Aware-Aggregation, Channel-Performance + Drilldown, Channel × Step Heatmap, KPI-Strip mit Vorperiode-Vergleich, Time-Series und CSV-Export. Vollstaendige Doku → Forms & Funnels — Analytics.

1. Ersten Funnel anlegen

Auf dem Funnels-Tab klick auf New Funnel. Gib ein sprechendes Label ein (zum Beispiel Lead-Qualifizierung 2026) und bestaetige. Der Editor oeffnet automatisch auf dem leeren Canvas.

Ein Funnel ist ein Entwurf, bis du ihn aus der Funnel-Liste veroeffentlichst. Entwuerfe sind sicher editierbar; veroeffentlichte Funnels laufen live im Frontend.

2. Den Flow bauen

Der Editor hat drei Spalten:

• Sidebar (links) — Drag-Source fuer neue Nodes plus Quick-Switch-Liste deiner anderen Funnels.
• Canvas (Mitte) — Vue Flow mit Mini-Map, Zoom-Controls und gepunktetem Hintergrund.
• Properties Panel (rechts) — Einstellungen des aktuell ausgewaehlten Nodes.

Node-Typen

Node	Form	Zweck
Step	weisse Karte	Formular-Felder fuer den Besucher (text, select, country, consent, …).
Condition	bernsteinfarbene Karte	Verzweigt anhand vorheriger Antworten. Hat zwei ausgehende Sockets true / false.
End	gruene Pille	End-State — Thank-You, Redirect zur URL oder Custom-Message.

Zieh einen Node von links auf den Canvas. Klick auf ein Output-Handle, dann ziehe auf das Input-Handle eines anderen Nodes, um eine Edge zu erzeugen. Conditions haben einen gruenen true- und einen roten false-Socket — verbinde beide.

Path-Merging

Zwei Branches koennen wieder im selben Node zusammenlaufen — zum Beispiel ein country == DE-Branch und der Fallback-Branch koennen beide in dasselbe Thank-You muenden. Verbinde einfach beide Edges auf den gleichen Ziel-Node. Der Renderer folgt dem Pfad, den die Antworten vorgeben.

Auto-Layout

Klick auf Auto-Layout in der Topbar. Der Editor ruft den dagre-Algorithmus auf und ordnet jeden Node in eine saubere Top-to-Bottom-Hierarchie. Nutz das, wenn der Canvas chaotisch wird.

Validieren

Klick auf Validieren — das oeffnet das Preview-Modal im Validieren-Modus. Es laeuft statische Checks und zeigt Issues mit Schweregrad, Beschreibung und Fokus-Button, der den Canvas auf den problematischen Node zoomt:

• Leerer Funnel, fehlender Start-Node, mehrere Start-Kandidaten.
• Conditions mit weniger als zwei ausgehenden Edges oder fehlenden true/false-Labels.
• Steps ohne ausgehende Edge oder ohne konfigurierte Felder.
• End-Nodes mit ausgehenden Edges (illegal).
• Unerreichbare Nodes (DFS vom Start erreicht sie nicht).
• Zyklen (Funnels muessen azyklisch sein).

TIP

Lass die Validierung vor jeder Veroeffentlichung laufen — Funnel is valid heisst, du kannst sicher ausliefern.

3. Step-Felder konfigurieren

Sprint 3 liefert einen 33-Field-Type-Editor unter dem Fields-Tab im Properties-Panel. Haeufige Typen:

Typ	Anwendungsfall
text, textarea, email, phone, url, number	Freitext-Eingabe.
select, radio, multiselect, checkbox, yes_no	Vorgegebene Auswahl.
country	Lokalisierter Laender-Picker (liefert ISO-2 wie DE).
consent	DSGVO-Consent-Checkbox — Pflicht fuer Abandoned-Form-Tracking.
rating, nps	Numerisches Scoring (1–5 / 0–10).
date, time, daterange	Datum- und Zeit-Picker.
file_upload, image_upload, signature	Medien-Anhaenge.

TIP

Field-IDs werden zu Spalten-Namen in der Inbox und im CSV-Export — halt sie kurz und snake_case (email, country, bundesland).

4. Condition-Branching konfigurieren

Waehle einen Condition-Node. Der Logic-Tab im Properties-Panel zeigt das aktuelle condition_json. Der vollstaendige Visual-Builder kommt in Sprint 7 — bis dahin editierst du das JSON direkt:

{
  "operator": "AND",
  "rules": [
    { "field": "country", "op": "equals", "value": "DE" }
  ]
}

Die 15 unterstuetzten Operatoren sind: equals, not_equals, greater_than, less_than, greater_or_equal, less_or_equal, contains, not_contains, starts_with, ends_with, regex_match, in, not_in, is_empty, is_not_empty.

Wenn die Antworten matchen, folgt der Funnel dem true-Branch; sonst dem false-Branch.

5. Email-Routing-Regeln

Schalte in der Topbar von Flow auf Email Routing um. Hier entscheidest du, wer benachrichtigt wird wenn ein Besucher den Funnel abschliesst (oder abbricht).

Jede Regel hat:

• Name — internes Label.
• When this rule applies — gleiches Condition-Format wie auf der Condition-Node, ausgewertet gegen die Antworten der Uebermittlung. Der Toggle Catch-all entfernt die Bedingung komplett.
• To / CC / BCC — Empfaenger-Listen mit Pill-Input. Paste eine kommagetrennte Liste, der Input splittet und validiert jede Adresse.
• Subject + Body (HTML) — CKEditor mit -Token-Chips unter dem Subject. Klick einen Chip, um ihn ins Clipboard zu kopieren, und paste ihn in den Editor.
• Auto-reply — optional. Sendet eine Bestaetigung an das Email-Feld des Besuchers (das erste Feld vom Typ email im Funnel).
• Trigger event — completed oder abandoned.
• is_active — pausiert die Regel ohne sie zu loeschen.

Regeln werden top-down ausgewertet. Die erste matchende Regel gewinnt. Die letzte Regel ohne Condition ist automatisch als Fallback markiert (oranger Gradient + Badge).

WARNING

Sortier die Regeln vorsichtig — eine zu breite Regel oben kann Submissions abfangen, die fuer spezifischere Regeln darunter gedacht sind.

6. Vorschau vor der Veroeffentlichung

Klick auf Preview in der Topbar — das oeffnet das Preview-Modal. Drei Modi sind verfuegbar:

Live Preview

Klick durch den Funnel wie ein echter Besucher. Es werden keine Daten gespeichert. Nutz das, um die Besucher-UX zu validieren.

Path Trace

Wie Live Preview, aber jeder besuchte Step wird im Canvas mit einem violetten Glow markiert. Nutz das, um Routing zu debuggen — zum Beispiel um zu bestaetigen, dass country == DE tatsaechlich zum deutschen Bundesland-Step fuehrt.

Validate

Die statischen Checks von oben. Klick auf den Fokus-Button (oben rechts an jedem Issue), um den Canvas auf den problematischen Node zu zoomen.

7. Abandoned-Form-Tracking (DSGVO-Opt-in)

Standardmaessig speichert das CMS Antworten erst, wenn der Besucher einen End-Node erreicht. Wenn du auch Teil-Submissions speichern willst (um abgebrochene Leads spaeter wieder anzusprechen), oeffne Einstellungen in der Topbar und aktiviere Teilweise ausgefuellte Uebermittlungen speichern.

WARNING

DSGVO-Pflicht: ist der Toggle aktiv, muss der erste Step ein Feld vom Typ consent enthalten. Der Einstellungs-Dialog blockiert den Anwenden-Button, bis die Anforderung erfuellt ist. Ohne Consent darfst du Teil-Antworten gesetzlich nicht speichern.

Sobald aktiviert, schreibt jeder Step in die DB. Der Cron-Task process_abandoned.php laeuft alle fuenf Minuten und markiert Submissions, die laenger als abandon_after_min (Default 60) inaktiv sind, als abandoned. Sie loesen dann deine abandoned-getriggerten Email-Regeln aus.

8. Veroeffentlichen und Einbau

Sobald der Flow sauber validiert:

1. Geh zurueck zur Funnel-Liste und klick auf Veröffentlichen auf der Funnel-Card.
2. Oeffne eine beliebige Pagebuilder-Seite und fuege das Forms & Funnel-Widget hinzu.
3. In den Widget-Properties waehle den Funnel aus dem Dropdown, setze Display-Mode (inline / modal / fullscreen) und Trigger (button_click / scroll_50 / time_5s / exit_intent).
4. Speichere die Seite. Der Funnel ist auf dieser Seite live.

9. Inbox — Submissions reviewen

Wechsle zum Inbox-Tab. Die DataTable listet alle Submissions mit Filtern (Funnel, Status, Inbox-Status, UTM-Source, Datums-Range), serverseitiger Pagination und sortierbaren Spalten.

Klick auf eine Zeile, um das Drill-Down-Modal zu oeffnen:

• Linke Spalte: Antworten in Pfad-Reihenfolge — pro besuchtem Step die ausgefuellten Felder.
• Rechte Spalte: Workflow-Umschalter (new → qualified → contacted → converted / rejected), Notizen mit Autospeichern beim Verlassen, Bearbeiter-Auswahl, DSGVO-Loeschen-Button.

Die Bulk-Bar erscheint, sobald du Zeilen ausgewaehlt hast. Nutz sie, um mehrere Submissions auf einmal in den Status zu setzen, zuzuweisen oder DSGVO-zu-loeschen.

CSV-Export

Der CSV Export-Button in der Topbar streamt alle aktuell gefilterten Submissions als CSV-Datei. Jedes Formular-Feld bekommt eine eigene Spalte (answer_email, answer_country, …) — der Export ist Spreadsheet-ready.

Haeufige Fehler

Beim Speichern passiert nichts. Lass erst Validieren laufen. Zyklen, fehlende Verzweigungen und unerreichbare Nodes blockieren das Speichern mit einer Hinweis-Meldung.

Mein Funnel routet falsch, obwohl meine Condition-Rules richtig aussehen. Pruef die Edge-Labels an den ausgehenden Sockets der Condition. Der gruene Socket muss true heissen, der rote false. Wenn ein Label default zeigt, zieh die Edge nochmal vom richtigen Socket.

Auto-Reply wird nicht gesendet. Auto-Reply braucht ein Feld vom Typ email im Funnel. Der Dispatcher liest die Besucher-Email aus dem ersten email-Feld. Fuege eines hinzu, falls fehlt.

Mein Token taucht woertlich in der Email auf. Token-Namen muessen einer Field-ID aus deinem Funnel entsprechen. Wechsel zurueck auf den Flow-Tab, oeffne den entsprechenden Step und bestaetige, dass die Field-ID country heisst (nicht Country oder country_code).

Der Live-Modus laeuft anders als das Live-Frontend. Live Preview nutzt den client-seitigen ConditionEvaluator. Das Live-Frontend laeuft die gleiche Logik serverseitig. Sie sind bit-fuer-bit identisch, aber die Vorschau persistiert nie Antworten — wenn du anderes Routing siehst, pruef nochmal, ob deine eingegebenen Antworten dem entsprechen, was ein echter Besucher senden wuerde.

Siehe auch

• Email Marketing — die Provider-seitige ESP-Integration. Funnels und das Email-Marketing-Forms-Widget koennen denselben Provider speisen.
• A/B Testing — teste mehrere Landingpage-Varianten, die auf denselben Funnel zeigen.
• Forms & Funnels — Developer-Doku — Plugin-Architektur, API, Schema.