Zum Hauptinhalt springen

Formulare im Formbuilder aufbauen

Mit dem JUNE Formbuilder erstellst du im Handumdrehen dynamische, mehrstufige Formulare für deine Landingpages oder WhatsApp Flows. Dieser Leitfaden hilft dir bei der Strukturierung, dem Datenbank-Setup und der Auswahl der passenden Komponenten.

A
Verfasst von Alex Zöchling

Wichtige Voraussetzungen in der Data-Platform (Datenbank-Setup)

Bevor du mit der visuellen Erstellung deines Formulars im Formbuilder beginnst, muss das Fundament in deiner JUNE Data-Platform stehen. Da jedes interaktive Feld im Formular Daten direkt in deine Nutzerprofile schreibt oder bestehende Daten aktualisiert, solltest du beim Setup auf folgende Punkte achten:

Existenz der Datenbankfelder

Alle Informationen, die du von deinen Nutzern abfragen möchtest, müssen bereits als Felder in der verknüpften Datenbank angelegt sein.

Der passende Datenbankfeldtyp

Achte zwingend auf den korrekten Datenbankfeldtyp, da dieser das Verhalten deiner Formular-Komponenten maßgeblich bestimmt. Wenn du beispielsweise ein einfaches Textfeld für eine Abfrage nutzt, wird der bestehende Wert in der Datenbank bei einer erneuten Eingabe des Nutzers immer überschrieben. Möchtest du deinen Nutzern hingegen erlauben, mehrere Optionen gleichzeitig auszuwählen, musst du ein Array-Feld (bzw. Select-Feld) verwenden, damit JUNE alle ausgewählten Werte sauber nebeneinander abspeichert. Unsicher, welches der richtige Datenbankfeldtyp ist? Hier findest du eine Liste aller Typen mit Beschreibung und Tipps, wofür sich welcher Typ am besten eignet.

Optional: Antwortoptionen in der Datenbank vordefinieren

Für Auswahlkomponenten wie Dropdowns, Multiselects, Radio Groups oder Checkbox Groups hast du die Möglichkeit, die verschiedenen Auswahlmöglichkeiten direkt in den Feldeinstellungen deiner Liste in der Data-Platform vorzudefinieren. Wenn du dieses Feld anschließend im Formbuilder aufrufst, erkennt JUNE diese Struktur und schlägt dir die Antwortoptionen inklusive Payload und Label automatisch vor. Das spart Zeit und verhindert Fehler beim manuellen Mapping.

Die Form-Komponenten im Überblick

Das Forms-Modul bietet dir eine Reihe spezialisierter Form-Komponenten zur Datenerfassung, die sich perfekt in deine Datenstruktur integrieren lassen:

Bezeichnung

Beschreibung

Eignung / Use Case

Radio Group

Zeigt alle Optionen direkt untereinander oder nebeneinander an. Es kann immer nur eine Option ausgewählt werden.

Single-Choice-Fragen, wie z. B. die Auswahl der primären Unternehmenskategorie.

Checkbox Group

Erlaubt es dem Nutzer, mehrere Optionen gleichzeitig anzuhaken. Erfordert zwingend ein Array-Feld in der Datenbank.

Multi-Choice-Szenarien, wie z. B. das Abonnieren mehrerer Newsletter-Themen.

Dropdown

Ein platzsparendes Auswahlmenü, dessen Optionen erst beim Anklicken sichtbar werden. Es kann nur eine Option gewählt werden.

Single-Choice-Abfragen bei begrenztem Platzangebot auf der Landingpage oder im WhatsApp Flow.

Multiselect

Verhält sich visuell wie ein Dropdown-Menü, ermöglicht jedoch die Auswahl mehrerer Optionen nacheinander. Benötigt ein Array-Feld in der Datenbank.

Multi-Choice-Abfragen, bei denen eine besonders kompakte Darstellung gewünscht ist.

Text Inputs

Standard-Eingabefelder für Freitexteingaben.

Erfassung von individuellen Daten wie Namen oder Feedback. Mit speziellen Validierungen ideal zur Prüfung von E-Mail-Adressen oder Telefonnummern.

Text- und Content-Komponenten für die visuelle Führung

Ein erfolgreiches Formular benötigt Kontext. Reine Content-Komponenten erfassen selbst keine Daten, sind aber essenziell für die Strukturierung, das Design und die Nutzerführung innerhalb deines Formulars:

Bezeichnung

Beschreibung

Eignung / Use Case

Headline

Große, auffällige Überschrift zur klaren Strukturierung des Formulars.

Einleitung von komplett neuen Abschnitten oder Hauptthemen auf einer Seite.

Subheading

Kleinere Überschrift, die sich ideal für Fragen eignet.

Formulierung von konkreten Fragen direkt über Auswahlfeldern. Praxis-Tipp für WhatsApp Flows: Subheadings wirken in der mobilen Ansicht oft harmonischer als große Headlines.

Text

Fließtext-Komponente für beschreibende Absätze.

Bereitstellung von Kontext, kurzen Erklärungen oder Hinweisen zum Ausfüllen des Formulars.

Image

Einbindung von visuellen Elementen wie Bildern oder Grafiken.

Einbau von Logos, Produktbildern oder Erklärgrafiken zur visuellen Auflockerung und Stärkung des Brandings.

Conditional Components (Bedingte Logik im Formular)

Mit bedingter Logik erstellst du smarte, dynamische Formulare, die sich exakt an das Antwortverhalten des Nutzers anpassen. Dadurch überspringen Nutzer irrelevante Abschnitte, was die Conversion-Rate deutlich erhöht:

  • If-Komponente: Ermöglicht eine klassische Wenn-Dann-Verzweigung. Wenn eine einfache Bedingung erfüllt ist (z. B. Feld „Alter“ ist größer als 18), wird Pfad A angezeigt, andernfalls Pfad B.

  • Switch-Komponente: Die ideale Lösung für komplexe, mehrstufige Abfragen mit mehreren Antwortpfaden. Die Switch-Komponente liest den Wert eines bestimmten Auswahlfeldes aus und öffnet basierend darauf individuelle Fälle (Cases).

    • Beispiel: Wählt ein Nutzer im ersten Schritt der Radio Group die Kategorie „Kundenservice“, öffnet der Switch automatisch den Case mit spezifischen Fragen zum Service-Bereich. Wählt er hingegen „Marketing“, sieht er sofort die passenden Marketing-Fragen.

    • Default-Case: Der Default-Bereich dient als technischer Rückfallwert (Fallback). Sollte das Antwortverhalten des Nutzers in keinen der spezifisch definierten Cases passen, wird automatisch der Inhalt des Default-Cases ausgespielt, um den Fluss des Formulars nicht zu unterbrechen.

Best Practices für einen reibungslosen Workflow im Editor

Damit der Aufbau deines Formulars im JUNE Editor schnell und fehlerfrei gelingt, solltest du folgende Workflows beachten:

  1. Screen-Titel zwingend setzen: Jeder Screen (Formular-Schritt bzw. Step) im rechten Strukturbaum benötigt einen eindeutigen Titel. Besonders Meta stellt beim Publishing von WhatsApp Flows strenge Anforderungen: Fehlen Screen-Titel, schlägt die Validierung beim Veröffentlichen fehl.

  2. Automatischer Daten-Sync & Trigger: Sobald ein Nutzer das Formular erfolgreich absendet, werden die Daten im Hintergrund in Echtzeit an die verknüpfte Datenbank übertragen. Du musst im Nachgang keine manuellen Zuweisungen vornehmen. Das Absenden kann direkt als Trigger in deinen Customer Journeys (im Automation-Modul) genutzt werden, um Folge-Kampagnen oder Bestätigungen auszulösen.

Hat dies deine Frage beantwortet?