Ein Breakdance Multi-Step Formular erstellen

In diesem Tutorial zeige ich dir, wie du ein Breakdance Multi-Step Formular erstellst! Multi-Step Formulare sind eine großartige Möglichkeit, die Benutzererfahrung zu verbessern, indem komplexe Informationen oder Daten in überschaubare Abschnitte unterteilt werden.

Formular einrichten

1. Breakdance Multi-Step Formular planen

Bevor du mit Breakdance startest, nimm dir Zeit, um dein Formular zu planen. Bestimme, welche Informationen du sammeln möchtest und wie du sie in logische Schritte unterteilen kannst. Dies wird den Prozess des Formularbaus vereinfachen.

2. Formular anlegen

Um ein Formular in eine Breakdance-Seite hinzuzufügen, klicke auf den Button „Add“ und tippe „form“ in das Suchfeld ein. Wähle dann das Modul „Form Builder“ aus.

3. Steps hinzufügen

Füge zunächst die Formularfelder für deinen ersten Formular-Schritt ein. Danach kannst ein weiteres Feld hinzufügen bei welchem du den Type „Step“ auswählst. Jeder „Step“ erstellen einen neuen Schritt in deinem Formular. Gib jedem Schritt einen klaren, kurzen Titel, der angibt, welche Informationen Benutzer bereitstellen sollen.

4. Formularfelder hinzufügen

Füge die gewünschten Formularfelder hinzu. Breakdance verfügt über ein leistungsstarkes Formular mit einer Vielzahl an Feldtypen wie Textfelder, Dropdown-Listen oder Kontrollkästchen. Ergänzt mit der Möglichkeit Bedingungen und Abhängigkeiten festzulegen, hast du ein starkes Werkezeug für dein Formular an der Hand. Wähle jetzt die passenden Felder für jeden Schritt deines Formulars aus.

5. Steps hinzufügen

Nachdem du deine Input-Felder eingefügt hast, kannst weitere Felder hinzufügen bei welchen du den Type „Step“ auswählst. Jeder „Step“ erstellen einen neuen Schritt in deinem Formular. Gib jedem Schritt einen klaren, kurzen Titel, der angibt, welche Informationen Benutzer bereitstellen sollen.

Formular gestalten und testen

6. Formular stylen

Es gibt viele Optionen, um dein Breakdance Multi-Step Formular zu gestalten. Die Designeinstellungen dafür findest du unter „Other“ > „Stepper“. Breakdance bietet hier auch Optionen zur Anpassung des Designs und der Funktionalität der Navigationslemente.

7. Validierung und Datenspeicherung

Konfiguriere die Validierung der Formularfelder, um sicherzustellen, dass Benutzer korrekte Informationen eingegeben. Breakdance speichert übrigens nach jeden Schritt automatisch die jeweiligen Formulardaten, um das Risiko eines Datenverlusts zu minimieren. Diese Funktion kann unter „Actions“ deaktiviert werden.

Wichtig sind auch die Texte, die je nach Status für den Nutzer der Website erscheinen. Hier ein Überblick:

• Submit Text: Dies ist der Text, der auf dem Button angezeigt wird, mit welchem der Benutzer das Kontaktformular abschickt. Normalerweise steht hier etwas wie „Senden“, „Absenden“ oder „Anfrage senden“.
• Success Message: Dies ist die Nachricht, die dem Benutzer angezeigt wird, nachdem das Kontaktformular erfolgreich abgeschickt wurde. Es ist eine Bestätigung, dass die Nachricht erfolgreich übermittelt wurde. Zum Beispiel: „Vielen Dank! Ihre Nachricht wurde erfolgreich übermittelt.“
• Error Message: Dies ist die Nachricht, die dem Benutzer angezeigt wird, wenn beim Absenden des Kontaktformulars ein Fehler auftritt. Die Fehlermeldung sollte den Benutzer darüber informieren, dass etwas schief gelaufen ist, zum Beispiel: „Etwas ist schief gelaufen“. So hat er die Chance es erneut zu versuchen, oder sich per Telefon oder E-Mail zu melden.
• Hide Form On Success: Diese Option ermöglicht es, das Kontaktformular nach dem erfolgreichen Absenden auszublenden. Wenn diese Option aktiviert ist, wird das Kontaktformular nach dem Absenden durch die Erfolgsmeldung ersetzt. Dies kann hilfreich sein, um dem Benutzer zu zeigen, dass die Nachricht erfolgreich übermittelt wurde und um zu verhindern, dass versehentlich mehrere Nachrichten gesendet werden.
• Redirect After Submit: Mit dieser Option kannst du festlegen, wohin der Benutzer nach dem Absenden des Kontaktformulars weitergeleitet wird. Du kannst eine benutzerdefinierte URL angeben, zu welcher der Benutzer weitergeleitet werden soll. Beispielsweise eine „Danke-Seite“, auf der du weitere Informationen anzeigen oder weitere Aktionen vorschlagen kannst.

Außerdem musst du festlegen was nach dem Klicken des Versenden-Buttons mit den eingegebenen Daten passiert. Die Einstellungen dafür nimmst du unter „Actions“ > „Email“ vor. Folgendes kannst du hier festlegen:

• Subject: Dies ist die Betreff-Zeile der E-Mail, welche an den Empfänger gesendet wird. Es sollte eine kurze Beschreibung des Inhalts der Nachricht enthalten.
• To Email: Hier gibst du die E-Mail-Adresse an, an welche die Nachricht gesendet werden soll. Das ist normalerweise die E-Mail-Adresse des Administrators oder des Verantwortlichen für die Kontaktanfrage.
• From Email: Dies ist die E-Mail-Adresse von dir oder deinem Unternehmen, die im Feld „Von“ der E-Mail des Empfängers angezeigt wird. Es ist die Adresse, von der die Nachricht scheinbar gesendet wird. Es sollte eine gültige E-Mail-Adresse sein, von der aus E-Mails gesendet werden können.
• From Name: Hier gibst du den Namen von dir oder deinem Unternehmen an, der im Feld „Von“ der E-Mail des Empfängers angezeigt wird.
• Reply To: Dies ist die E-Mail-Adresse, an die Antworten auf deine Nachricht gesendet werden sollen. Normalerweise ist dies die gleiche Adresse wie die „Von E-Mail“-Adresse, es sei denn, du möchtest, dass Antworten an eine andere E-Mail-Adresse gesendet werden. Wenn du nichts einfügst, ist die E-Mail-Adresse, über die du diese Formular-Nachricht erhältst auch die Adresse an die der Empfänger Nachrichten verschicken kann.
• Message: Das ist der Body der E-Mail. Hier hast du die Möglichkeit den Aufbau und den Inhalt der E-Mail festzulegen. Über Variablen kannst du die Inhalte der einzelnen Formular-Felder in die E-Mail integrieren. Als Standard ist die Variable {all_fields} eingetragen. Diese Variable fügt alle Felder mit dem zugehörigen Label in die E-Mail ein. Einzelne Formularfelder kannst du über die ID des Feldes in geschweiften Klammern ausgeben lassen. Als Beispiel könntest du die eingetragene E-Mail-Adresse mit der Variable {email} in den Text integrieren.

8. Teste dein Formular

Bevor du dein Breakdance Multi-Step Formular veröffentlichst, teste es gründlich, um sicherzustellen, dass alle Schritte ordnungsgemäß funktionieren. Teste verschiedene Szenarien, um potenzielle Probleme zu identifizieren und zu beheben.

Fazit

Herzlichen Glückwunsch! Du hast erfolgreich ein Breakdance Multi-Step Formular erstellt. Benutzer können nun problemlos durch die verschiedenen Schritte des Formulars navigieren und effizient die benötigten Informationen bereitstellen.