Wie kann ich ein Multi-Step-Formular (Funnel) erstellen?

Mehrstufige Formulare sind eine hervorragende Möglichkeit, die Benutzererfahrung zu verbessern, indem lange Formulare in überschaubare Abschnitte unterteilt werden. Dieser Ansatz sorgt nicht nur dafür, dass Formulare weniger überwältigend wirken, sondern verbessert auch die Ausfüllraten, da sich die Nutzer auf einen Schritt nach dem anderen konzentrieren können. Mit unserem neuesten Update sind Formulare und Quiz jetzt direkt in ein einziges Element integriert, das mehr Flexibilität und Einfachheit bietet. Ganz gleich, ob du ein einfaches, einstufiges Formular oder ein attraktives, mehrstufiges Formular erstellen möchtest, dieses neue Element bietet alle Werkzeuge, die du brauchst.

Formular erstellen

Formulare und Multi-Step-Formulare sind keine Elemente mehr (wie ein Text, eine Liste oder ein Bild), sondern gehören nun zu den Abschnitten. Um einen Formular-Abschnitt zu erstellen, fügst du einfach ein beliebiges Formularfeld zu einem bestehenden Abschnitt hinzu (z. B. ein Auswahl-, Dropdown- oder Namensfeld).

📌 Hinweis: Jeder Abschnitt kann in den Abschnittseinstellungen oder durch einfaches Hinzufügen eines beliebigen Formularelements in ein Formular umgewandelt werden

Wie man das Formular bearbeiten kann

Oben links in dem Formular-Abschnitt siehst du dann die Schaltfläche "Formular bearbeiten" - klicke darauf, um mit der Bearbeitung zu beginnen.

Jetzt kannst du jeden Schritt einzeln bearbeiten. Wähle dazu den gewünschten Schritt im Menü links aus und konfiguriere die benötigten Elemente rechts – ähnlich wie bei normalen Abschnitten!

Zwischen Multi-Step und Single-Step entscheiden - Schritte hinzufügen

Bisher gab es Formulare und Quizze jeweils als separate Elemente, die nicht beliebig ineinander umgewandelt werden konnten. Jetzt gehören sie zusammen: Du kannst mit einem einfachen Formular beginnen, Schritte hinzufügen, um es in ein Multi-Step-Formular umzuwandeln, oder ganz einfach Schritte entfernen, um es wieder in ein normales Formular umzuwandeln.

Multi-step

Um zusätzliche Schritte hinzuzufügen, klicke bitte auf Formular bearbeiten ➡️ Schritt hinzufügen. Hier stehen dir unsere Vorlagen und auch leere Layouts zur Verfügung.

Aktionen hinzufügen und bearbeiten

*Auch bekannt als Endschritte

Die Aktion wird nach der Absendung des Formulars ausgeführt. Anders gesagt, ein Aktionsschritt ist der letzte Schritt in einem Formular.

Du kannst sie hinzufügen, indem du auf Formular Bearbeiten ➡️ Aktion hinzufügen klickst.

Hier stehen dir 5 Aktionen zur Verfügung:

Frame Inhalt anzeigen
Link öffnen
Frame Inhalt anzeigen und Link öffnen
Frame Inhalt anzeigen und Modal öffnen
Modal öffnen

Struktur der Schritte flexibel bearbeiten - Professional-Modus

Mithilfe des neuen "Professional"-Modus kannst du dein Formular flexibel bearbeiten: zusätzliche Spalten und Zeile hinzufügen, Abstände mit größerer Präzision bearbeiten, Raster-Ansicht.

Den "Pro" Modus kannst du unten links, neben dem "Update" Button aktivieren.

Folgend findest du zwei kurze Demonstrationen.

Navigation-Buttons einrichten

Standardmäßig wird jeder Schritt mit einem Navigationsbutton für "Nächster" und "Vorheriger Schritt" versehen.

Navigation-Buttons ausblenden

Bei Bedarf kannst du die Navigationsbuttons für einen bestimmten Schritt deaktivieren.
Das ist beispielsweise hilfreich, wenn die Weiterleitung zum nächsten Schritt automatisch nach einer Auswahl erfolgt.

Oder du kannst sie für das komplette Multi-Step-Formular ausblenden:

Eigene Navigation-Buttons hinzufügen

Es besteht die Option eigene Navigation-Buttons einzurichten, indem du ein entsprechendes Element an der gewünschten Stelle hinzufügst:

Hier kannst du zwischen der "Absenden/nächster Schritt" oder der "Vorheriger Schritt" Aktion auswählen.

Fortschrittsbalken aktivieren und bearbeiten

Unsere neuen Multi-Step-Formulare bieten eine Vielzahl neuer Fortschrittsbalken an, die den Nutzern zeigen, wie weit sie im Formular bereits gekommen sind. Das verbessert die Orientierung, motiviert zum Abschluss und sorgt für ein besseres Nutzererlebnis.

Um einen Fortschrittsbalken zu aktivieren klicke bitte auf Formular bearbeiten ➡️ Einstellungen und aktiviere die Option "Fortschrittsbalken".

📌 Hinweis: einige Formular-Vorlagen haben bereits ein Fortschrittsbalken aktiv. Diesen kannst du bei Bedarf bearbeiten oder deaktivieren.

Bei Bedarf kannst du den Fortschrittsbalken für einen bestimmten Schritt ausblenden. Dies ist insbesondere im ersten Schritt hilfreich.

Design bearbeiten

Um die Einstellungen des Fortschrittsbalkens aufzurufen, kannst du es direkt im Editor anklicken oder klicke auf Formular bearbeiten ➡️ Einstellungen ➡️ Fortschrittsbalken.

Hier stehen dir verschiedene Typen von Fortschrittsbalken zur Auswahl, zusammen mit allen erforderlichen Designeinstellungen, um sie individuell anzupassen.

Übersicht der Formularelemente

Wir haben viele neue Felder in der Kategorie "Formular" hinzugefügt.

Diese findest du im Menü "Formularelemente". Jedes Feld verfügt über eigene Einstellungsmöglichkeiten, mit denen du es in mehrere verschiedene Styles umwandeln kannst - einige Felder bieten bis zu 5 Optionen. Hier findest du die vollständige Liste der neuen Felder (klicke zum Erweitern).

🧱 Grundlegende Elemente:

Kurzer und langer Text

Kurzer Text: Ermöglicht die Eingabe kurzer Antworten.

Langer Text: Bietet Platz für längere, detaillierte Antworten.

Nummer

Dieses Element dient zur Eingabe einer bestimmten Zahl und verfügt über 3 verschiedene Konfigurationen:

Bitte nicht mit der Telefonnummer verwechseln ("Dieses Element findest du im Abschnitt "Kontaktelemente").

Navigationsbuttons (absenden und nächster/vorheriger Schritt)

Dieses Element hat 3 mögliche Aktionen:

Nächster Schritt
Absenden
Vorheriger Schritt

Du kannst die Position dieser Taste selbst festlegen, was eine Alternative zur standardmäßigen Platzierung bietet.

Mehr Informationen findest du in diesem Abschnitt.

📞 Kontakt-Elemente:

Name (Vorname, Nachname und wahlweise zweiter Vorname)

Hier kannst du je nach Wunsch nur bestimmte Daten sammeln (z.B. nur Vorname).

E-Mail

Das E-Mail-Element ermöglicht es, eine E-Mail-Adresse einzugeben und gleichzeitig zu überprüfen, ob es sich um eine geschäftliche E-Mail handelt. Es kann auch temporäre E-Mails blockieren.

Adresse

Hier kannst du je nach Wunsch nur bestimmte Daten sammeln (z.B. nur Stadt, PLZ und Adresse). Bitte einfach die nicht benötigten Felder deaktivieren.

Telefon

Das Telefon-Element kann entweder das Land automatisch erkennen oder eine vordefinierte Ländervorwahl verwenden.

❓Auswahl-Elemente:

Auswahl (Checkbox, Checkliste, Karten, Chips, Dropdown)

Das Auswahl-Element ermöglicht es, verschiedene Optionen zu einer Frage anzubieten. Der Nutzer kann dann eine oder mehrere Optionen auswählen, je nach Einstellung des Formulars.

Es gibt 5 mögliche Konfigurationen:

Checkbox
Checkliste
Karten
Chips
Dropdown

Skala (Bewertung)

Das Skala-Element ermöglicht es, Bewertungen zu sammeln. Dafür stehen Konfigurationen mit Zahlen, Emojis oder Icons zur Auswahl.

🔎 Andere Elemente:

Schieberegler

Dieses Element dient zur Eingabe eines Zahlbereiches und hier stehen mehrere Anzeigeformate zur Verfügung.

ReCaptcha

ReCaptcha ist ein Sicherheitsfeature, das deine Formulare vor Spam und Missbrauch schützt. Es stellt sicher, dass Eingaben von echten Nutzern und nicht von automatisierten Bots stammen, indem es eine einfache Überprüfung verlangt.

Eine Anleitung zu der ReCaptcha findest du hier: ReCaptcha einrichten

Datei Upload

Dieses Element ermöglicht es, festzulegen, ob eine einzelne oder mehrere Dateien erwartet werden sollen, und die Dateigröße zu definieren. Die maximale Dateigröße beträgt 10 MB.

Zustimmung (Einwilligung)

Das Element ermöglicht es, die Einwilligung der Nutzer zu bestimmten Bedingungen oder Richtlinien einzuholen. Es wird häufig für Datenschutzbestimmungen oder Nutzungsbedingungen verwendet.

⚠️ Wichtig: Die Zustimmung wird nicht in allen Schritten vor dem Absenden angezeigt, wie es in der vorherigen Version der Fall war. Du musst sie bitte manuell in den jeweiligen Schritten einrichten.

Datumsauswahl (mit Timeslots)

Die Datumsauswahl ermöglicht dem Benutzer die Auswahl von Datum und Uhrzeit. Es kann als Eingabefeld oder als Kalender konfiguriert werden.

Datumsbereichsauswahl

Mit diesem Element kann ein Zeitraum mit einem Start- und Enddatum ausgewählt werden. Es kann als Eingabefeld oder als Kalender konfiguriert werden.

Ladeanimation

Die Ladeanimation vermittelt den Eindruck, dass Informationen verarbeitet werden. Die Dauer kann in Sekunden festgelegt werden. Maximale Dauer ist 5 Sekunden.

Verstecktes Feld

Das versteckte Feld wird verwendet, um benutzerdefinierte UTM-Parameter zu erfassen.

Eine detaillierte Anleitung findest du dazu hier: URL-Parameter, UTM-Parameter und verborgene Felder

Logischen Regeln einrichten

Mit unserem nun viel größeren Spektrum an verschiedenen Elementen haben wir neue Logikregeln hinzugefügt, mit denen du präzise Schritt-Kombinationen erstellen kannst, um die gewünschten Ergebnisse zu erzielen.

Für dieses Thema haben wir eine separate Anleitung erstellt: Logischen Regeln in Formularen

📌Hinweis: um diese Funktion nutzen zu können, ist die Buchung der "Formulare und Quizze" Erweiterung erforderlich.

Lead-Informationen

Die eingegangenen Leads kannst direkt in dem internen CRM System ansehen. Schaue dir gerne unsere Anleitung dazu an: Wo finde ich die gesammelten Leads aus den Formularen?

Alternativ kannst du die Leads innerhalb des Formulars einsehen: klicke auf Formular bearbeiten ➡️ Ergebnisse ➡️ Leads.

Formular Analytik

Mit dem Analytik-Tool kannst du verschiedene Kennzahlen wie die Anzahl der Sessions und deren Dauer, die Anzahl der Leads, und die Konversionsrate überprüfen. Du siehst außerdem, an welchen Stellen die meisten Absprünge auftreten, sowie weitere nützliche Funktionen zur Optimierung deiner Formulare.

Für dieses Thema haben wir eine separate Anleitung erstellt: Analytik in Multi-Step-Formularen

📌Hinweis: um diese Funktion nutzen zu können, ist die Buchung der "Formulare und Funnel" Erweiterung erforderlich.

Häufig gestellte Fragen und Lösungen

Wie kann ich ein Formular-Abschnitt wieder in ein normales Abschnitt umwandeln

Verwende dazu das Einstellungsfenster in der oberen rechten Ecke:

Wie kann ich eine Zustimmung in einem spezifischen Schritt deaktivieren?

Die Zustimmung wird nicht in allen Schritten vor dem Absenden angezeigt, wie es in der vorherigen Version der Fall war. Du musst sie bitte manuell in den gewünschten Schritten einrichten.

Jetzt wird die Zustmimmung als ein separates Element eingebaut.

Wie kann ich das Design (z.B. Hintergrund) für einen bestimmten Schritt oder für das Formular allgemein setzen?

Für einen spezifischen Schritt geht es so:

Für die alltemeinen Designeinstellungen bitte die Optionen oben rechst nutzen:

Wie kann ich die Leads aus einem bestimmten Aktion-Schritt ignorieren lassen?

Dazu bitte die folgende Option im betroffenen Schritt aktivieren: