Wie sieht sowas dann aus?
Mit diesem Link meldest du dich für unseren WhatsApp Newsletter an und kannst dabei den in JUNE gebauten WhatsApp Flow (mehrstufiges Formular in WhatsApp) testen. Dieser Flow enthält verschiedene Konponenten (Single Select, Multiselect, Texteingabe, sowie dynamischen Content)
Erste Schritte und Erstellung
Forms findest du in deiner Sidebar unter dem Menü Data-Platform. Wähle dort die Datenbank aus, mit der dein Formular verknüpft sein soll.
Falls du noch keine Forms angelegt hast, bekommst du einen Intro-Screen angezeigt. Andernfalls wird dir eine Übersicht deiner Formulare angezeigt. Von dort aus kannst du deine Formulare bearbeiten, oder neue erstellen:
Formular anlegen: Gib deinem Formular einen Namen und wähle die Datenbank aus, mit der es verknüpft sein soll.
Felder importieren: Du kannst direkt bei der Erstellung Felder aus der gewählten Datenbank markieren, die automatisch in dein Formular übernommen werden sollen.
Modus wählen: Über die Topbar im Editor kannst du jederzeit zwischen der Landingpage-Ansicht und der WhatsApp-Preview wechseln. Der Editor passt die verfügbaren Einstellungen automatisch an den jeweiligen Kanal an.
Der Editor: Aufbau und Struktur
Der Editor ist in drei Hauptbereiche unterteilt, um dir maximale Übersicht zu bieten:
Linke Seite (Settings): Hier konfigurierst du die Details der aktuell ausgewählten Formular-Komponente (z. B. Validierung, Labels, Platzhalter).
Mitte (interaktive Vorschau): Dein Formular wird live gerendert. Du kannst es direkt im Editor ausfüllen und testen. Dabei kannst du zwischen der WhatsApp- und der Landingpage-Ansicht wechseln.
Rechte Seite (Tree/Layers): Hier verwaltest du die Struktur deines Formulars per Drag-and-drop. Du kannst Felder verschieben, löschen oder neue Screens (Steps) hinzufügen.
Komponenten und Logik
Feldtypen und Validierung
Du kannst verschiedene Feldtypen nutzen, die sich automatisch an die Anforderungen deiner Datenbank anpassen:
Content: Headlines, Sublines, Texte und Bilder zur visuellen Gestaltung.
Text Inputs: Standard-Textfelder oder spezialisierte Felder wie E-Mail, die automatisch auf das korrekte Format validiert werden.
Auswahlfelder: Checkboxen, Dropdowns und Multiselect-Komponenten.
Intelligente Datenbank-Verknüpfung
Jedes Feld wird über einen Technical Name mit deiner Datenbank verbunden.
Automatisches Mapping: Wenn du ein Feld auswählst, schlägt JUNE dir passende Felder aus deiner Datenbank vor, die denselben Datentyp haben.
Status-Check: Der Editor zeigt dir im Strukturbaum an, ob ein Feld bereits "connected" ist oder ob der Technical Name in der Datenbank noch fehlt ("not connected").
Required-Logik: Felder, die in deiner Datenbank als "erforderlich" markiert sind, sind im Formular automatisch als Pflichtfelder gesetzt und können nicht deaktiviert werden. Du kannst jedoch jedes optionale Datenbankfeld im Formular manuell als "Pflichtfeld" definieren.
Conditional Forms (Bedingte Logik)
Mit der Condition-Komponente erstellst du dynamische Formulare. Du kannst Regeln definieren, um bestimmte Felder oder ganze Abschnitte nur dann anzuzeigen, wenn der Nutzer eine bestimmte Antwort gegeben hat (z. B. "Zeige Feld B nur, wenn in Feld A 'Ja' ausgewählt wurde").
Design und Branding
Für das Styling deines Formulars hast du zwei Möglichkeiten:
Themes: Nutze vordefinierte Presets für eine schnelle Gestaltung.
Sitemap Styles (Empfohlen): Aktiviere "Use Sitemap Styles", um die globalen Styles (Farben, Schriften, Buttons) deiner Landingpage automatisch auf das Formular zu übertragen. Dies garantiert ein absolut konsistentes Markendesign.
Profi-Funktionen: Prefilling und Hidden Fields
Prefill Values (Vorausfüllen): Du kannst Felder mit Informationen aus dem bestehenden Datensatz des Nutzers vorausfüllen lassen (z. B. Vorname oder E-Mail-Adresse), indem du in den Komponenteneinstellungen des gewünschten Feldes "Eingabefelder vorausfüllen" aktivierst.
Dies kann die Conversion-Rate deutlich erhöhen, da der Nutzer weniger tippen muss.Hidden Fields: Nutze versteckte Felder, um im Hintergrund wichtige Daten mitzusenden, ohne das Design zu stören (z. B. Kampagnen-IDs oder die Quelle des Leads).
Success Screen & Redirect: Gestalte eine Bestätigungsnachricht für deine Nutzer oder leite sie nach dem Absenden direkt auf eine andere Seite weiter. Für Fortgeschrittene besteht die Möglichkeit, eigenen HTML-Code für die Bestätigungsnachricht zu hinterlegen.
Lokalisierung und Fehlerbehandlung
Mehrsprachigkeit: Du kannst Sprachen für dein Formular in den Settings definieren und Texte (Labels, Buttons) pro Sprache übersetzen.
Response Messages: Verwalte zentral, welche Fehlermeldungen dem Nutzer angezeigt werden, falls das Formular nicht korrekt ausgefüllt wurde. Diese Meldungen können ebenfalls für alle aktivierten Sprachen angepasst werden.
Veröffentlichung und Einbau
WhatsApp: Die Veröffentlichung erfolgt direkt aus dem Form Builder an Meta. JUNE zeigt dir an, ob alle Voraussetzungen (Integration, Listentyp) erfüllt sind.
Landingpages: Du kannst das Formular entweder als Code-Snippet kopieren und manuell einbauen oder direkt eine Komponente im Landingpage Editor verwenden.