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 überprüfen und live anpassen. 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): Aktivierst du in den Komponenteneinstellungen „Eingabefelder vorausfüllen“, werden Felder automatisch mit bekannten Nutzerdaten besetzt. Das bietet doppelten Nutzen:
Einerseits erlaubt es dem User eine unkomplizierte Präferenzanpassung z.B. beim Ändern von abonnierten Newsletter-Themen (Events vs. Angebote vs. Neuigkeiten):
Andererseits verbessert es die UX und steigert die Conversion-Rate, weil wiederholte Eingaben (z. B. von Name, Lieferadresse oder E-Mail-Adresse) komplett entfallen.
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: Hier verwaltest du zentral die Fehlermeldungen für alle deine aktivierten Sprachen. Dabei hast du zwei Möglichkeiten der Gestaltung:
Übersetzung der vordefinierten Meldungen: Du kannst die vom System vorgegebenen Standard-Fehlermeldungen direkt für die verschiedenen Sprachen übersetzen, damit internationale Nutzer die passenden Systemhinweise erhalten.
Individuelle Meldungen: Möchtest du für ein bestimmtes Pflichtfeld einen ganz eigenen Text ausspielen, kannst du dies direkt in den Feldeinstellungen der jeweiligen Komponente über eine separate „Required Message“ definieren. Dieser individuelle Text überschreibt die vordefinierte Systemmeldung.
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.