Ein Breakdance Multi-Step Formular erstellen

Tutorials, Wissen

Inhalt

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.

Teilen
Jetzt kontaktieren

Lass uns deine Website fertigstellen.

Was wir dir garantieren

Du bekommst nur eine Rechnung, wenn wir helfen konnten!

Unser Team engagiert sich Tag für Tag, um für unsere Kunden Probleme schnell zu lösen, oder bei Umsetzungen optimale Ergebnisse zu erzielen. Das hat dazu geführt, dass bedemy heute für seine erstklassige Dienstleistung bekannt ist und viele glückliche Kunden hat. Unsere bisherige Erfahrung und die Überzeugung in unsere Fähigkeiten ermöglicht es uns, auch Neukunden ein einzigartiges Versprechen zu geben, das unsere Verpflichtung zur Kundenzufriedenheit unterstreicht.

Wir stellen nur eine Rechnung, wenn wir wirklich helfen konnten!

Sollten wir bei einem Problem, oder bei einer Umsetzung nicht helfen können, stellen wir auch keine Rechnung. Selbst wenn wir bereist Zeit investiert haben. Du hast kein Risiko, denn selbst die Kosten für den Fall, dass wir alles umgesetzt haben wie gewünscht, sind unsere Kosten transparent, vorher ausgemacht und niemals über dem geplanten Budget!

Was unsere Hilfe kostet

Keine bösen Überraschungen

Wir rechnen nach einem festen Stundensatz ab, den wir dir vor einem kostenpflichtigen Einsatz unseres Teams in einem schriftlichen Angebot mitteilen. Das bedeutet: Die Umsetzung eines kleinen Features, oder das Beheben eines Problems geht in der Regel schnell (oft innerhalb einiger Minuten) und kostet somit auch nicht viel. Die Umsetzung einer kompletten Seite dagegen nimmt schon mal (je nach Umfang) ein paar Tage in Anspruch.

Was die Kosten angeht, musst du dir aber keinen Kopf machen.

Zum einen bekommst du von uns vorab immer via E-Mail ein Angebot, selbst bei kleineren Support-Anfragen. Zum anderen halten wir uns auch immer an diese Kostenschätzung, wenn wir dir nichts anderes mitteilen. Sollten wir bei der Umsetzung merken, dass die an uns gestellte Aufgabe doch komplexer ist und länger dauert, melden wir uns bei dir mit einer überarbeiteten Kostenschätzung. Dann kannst du entscheiden, ob du bereit bist dieses überarbeitete Angebot anzunehmen, oder nicht. Sollte dir das zu viel sein, stoppen wir das Projekt und du zahlst keinen Cent. Auch nicht für die Arbeit, die wir bis dahin (entsprechend der ersten Einschätzung) schon in das Projekt investiert haben.