So erstellen Sie in 10 Minuten ein mehrstufiges Formular in WordPress 

Möchten Sie ein mehrstufiges Formular in WordPress erstellen, das einfach auszufüllen ist und besser konvertiert?

Ich habe festgestellt, dass die Aufteilung langer Formulare in kleinere Schritte die Benutzererfahrung erheblich verbessern kann. Anstatt alles auf einmal anzuzeigen, führen Sie die Benutzer durch mundgerechte Felder, die weniger überwältigend wirken.

In diesem Leitfaden zeige ich Ihnen genau, wie Sie ein mehrstufiges Formular mit WPForms erstellen, einem der besten Drag-and-Drop-Formularersteller auf dem Markt.

Kurze Antwort: Um ein mehrstufiges Formular in WordPress zu erstellen, installieren Sie WPForms Pro, erstellen Sie ein neues Formular, ziehen Sie das Feld „Seitenumbruch“ zwischen die Abschnitte, um es in Schritte aufzuteilen, aktivieren Sie die Fortschrittsleiste in den Formulareinstellungen und betten Sie das Formular auf einer beliebigen Seite ein. Der gesamte Vorgang dauert etwa 10 Minuten und erfordert keine Programmierung.

Wann sollten mehrstufige Formulare verwendet werden

Nicht jedes Formular muss in mehrere Schritte unterteilt werden, aber einige Formulararten verzeichnen einen deutlichen Anstieg der Abschlüsse, wenn Sie Seitenumbrüche hinzufügen. Hier sind die Szenarien, in denen dies den größten Unterschied macht:

• Registrierungsformulare mit vielen Feldern – Veranstaltungsanmeldungen oder Mitgliedschaftsformulare, die auf einmal Name, Adresse, Präferenzen und Zahlungsdetails abfragen, profitieren davon, in logische Gruppen aufgeteilt zu werden.
• Quiz-ähnliche Lead-Generierungsformulare – Formulare, die Leads basierend auf Antworten (Budget, Zeitplan, Projekttyp) qualifizieren, fühlen sich wie ein Gespräch an, wenn Sie jeweils eine Frage anzeigen.
• Mehrseitige Checkout-Abläufe – Bestellformulare, die Kontaktinformationen, Versanddetails und Zahlungen in separaten Schritten erfassen, reduzieren die kognitive Belastung in jeder Phase.
• Bewerbungsformulare – Bewerbungen mit persönlichen Informationen, Berufserfahrung und Verfügbarkeitsfragen passen natürlich zu einer dreistufigen Struktur.
• Umfragen – Längere Umfragen mit mehreren Themenbereichen sind leichter auszufüllen, wenn sie in thematische Abschnitte gruppiert sind, anstatt als eine einzige lange Seite angezeigt zu werden.

Tipps für ein besseres Design von mehrstufigen Formularen

Bevor Sie mit dem Erstellen beginnen, erleichtern einige Designentscheidungen das Ausfüllen Ihres Formulars erheblich. Ich habe gesehen, dass diese einen echten Unterschied auf den Formularen machen, die ich mit WPForms eingerichtet habe.

• Behalten Sie jeden Schritt bei maximal 3-5 Feldern. Mehr als fünf Felder pro Seite fühlen sich wieder wie ein langes Formular an.
• Beschriften Sie die Fortschrittsanzeige mit Schrittnamen, nicht nur mit Zahlen. „Schritt 2: Ihre Kontaktdaten“ ist beruhigender als „Schritt 2 von 4“.
• Verwenden Sie klare Schaltflächenbeschriftungen. „Nächster Schritt“ oder „Weiter zur Kasse“ sagt dem Benutzer genau, was passiert, wenn er klickt.
• Aktivieren Sie die Schaltfläche „Zurück“. Benutzer benötigen eine Möglichkeit, zurückzugehen und frühere Antworten zu korrigieren, ohne das bereits Ausgefüllte zu verlieren.
• Speichern Sie nach Möglichkeit unvollständige Einträge. WPForms Pro unterstützt das Speichern unvollständiger Einträge, sodass Sie Benutzer, die begonnen, aber nicht beendet haben, nachverfolgen können.

Bester Weg, um ein mehrstufiges Formular in WordPress zu erstellen

In diesem Tutorial verwenden wir WPForms, um mehrteilige Formulare in WordPress zu erstellen. WPForms ist das beste Drag-and-Drop-Formularersteller-Plugin für WordPress. Und mit über 3 Millionen aktiven Installationen ist es das anfängerfreundlichste Tool, das verfügbar ist.

Noch besser ist, dass es sowohl eine kostenlose als auch eine kostenpflichtige Version gibt, aber heute werden wir die Pro-Version von WPForms verwenden, um ein mehrseitiges Formular in WordPress zu erstellen.

Warum nicht diesen ausführlichen WPForms-Testbericht für die vollständigen Details lesen?

Beginnen wir also mit dem ersten Schritt, dem Erstellen eines neuen Formulars.

Bevor Sie beginnen: Das Seitenumbruchfeld, das mehrstufige Formulare ermöglicht, ist nur in WPForms Pro oder höher verfügbar. Die kostenlose Version von WPForms enthält diese Funktion nicht. Wenn Sie die kostenlose Version installiert haben, müssen Sie ein Upgrade durchführen, bevor Sie die folgenden Schritte ausführen.

Schritt 1: Erstellen Sie ein neues Formular in WordPress

Das Erste, was zu tun ist, ist die Installation und Aktivierung des WPForms-Plugins. Wenn Sie nicht sicher sind, wie das geht, können Sie dieser Schritt-für-Schritt-Anleitung zum Installieren von WordPress-Plugins für Anfänger folgen.

Mit WPForms können Sie jede Art von Formular in mehrere Teile aufteilen. Lassen Sie uns also ein einfaches Kontaktformular erstellen.

Gehen Sie zu WPForms » Neu hinzufügen, um ein neues Formular zu erstellen und die verfügbaren Vorlagen anzuzeigen.

Geben Sie dann auf dieser Seite Ihrem Formular einen Namen und wählen Sie die Vorlage Einfaches Kontaktformular.

WPForms öffnet nun die Vorlage im Drag-and-Drop-Formularersteller zur Bearbeitung.

Das einfache Kontaktformular enthält bereits die folgenden Felder in Ihrem Formular:

• Name
• E-Mail
• Kommentar oder Nachricht

Sie können auch Formularfelder verschieben und zusätzliche Felder hinzufügen, indem Sie sie aus der linken Spalte in die rechte Spalte ziehen. Klicken Sie einfach auf ein beliebiges Formularfeld, um den Inhalt zu bearbeiten und es per Drag & Drop zu verschieben, um seine Position zu ändern.

Wenn Sie Ihrer WordPress-Website mehr als ein Kontaktformular hinzufügen möchten, können Sie mit WPForms auch die folgenden Formulararten erstellen:

• Umfrageformular
• Online-Bestellformular
• Formular im Type-form-Stil
• Datei-Upload-Formular

Die meisten dieser Formulararten sind länger als Standard-Kontaktformulare. Das Aufteilen in mehrere Schritte kann die Konversionsraten verbessern.

Schritt 2: Teilen Sie Ihr Formular in mehrere Teile auf

Sobald Sie Ihr Formular angepasst und die benötigten Felder hinzugefügt haben, fügen Sie das Feld Seitenumbruch hinzu, um Ihr Formular in verschiedene Seiten aufzuteilen.

Sie können dies tun, indem Sie unter der Überschrift Fancy Fields nachsehen und das Formularfeld Seitenumbruch in den rechten Bereich ziehen.

Lassen Sie das Feld dann an der Stelle in Ihrem Formular fallen, an der Sie es aufteilen möchten.

Wiederholen Sie dies für jeden Abschnitt, in dem Sie Ihr Formular auf eine andere Seite aufteilen möchten. Von dort aus passen Sie Ihr Formular weiter an, indem Sie die Felder hinzufügen, die Sie zum Vervollständigen benötigen.

Während WPForms es Ihnen ermöglicht, beliebig viele Formulare hinzuzufügen, ist es entscheidend, Benutzer nicht mit zu vielen Informationen zu überfordern. Dies kann dazu führen, dass sie Ihr Formular abbrechen, was das Gegenteil von dem ist, was Sie erreichen möchten.

Schritt 3: Passen Sie die Fortschrittsleiste Ihres Formulars an

Um den Fluss Ihres Formulars zu verbessern, können Sie eine Fortschrittsanzeige einfügen. Eine Fortschrittsanzeige informiert die Benutzer über die verschiedenen Abschnitte Ihres Formulars und ist ein großartiger visueller Indikator dafür, wie viel noch zu erledigen ist.

WPForms bietet 3 verschiedene Fortschrittsanzeigen für mehrseitige Formulare, die wie folgt lauten:

1. Verbinder – Verbindungsbalken und Seitentitel für jeden Schritt Ihres Formulars.
2. Kreise – Nummerierte Kreise und Seitentitel für jeden Formularschritt.
3. Fortschrittsbalken – Anzeige des Fortschritts des Benutzers, während er die Formularschritte abschließt.

Jede Option bietet den Benutzern ein anderes visuelles Erlebnis. Der Fortschrittsbalken zeigt eine prozentuale Füllung an, die sich mit jedem abgeschlossenen Schritt des Benutzers fortschreitet. Die Optionen Kreise und Verbinder zeigen Schrittzählungen („Schritt 2 von 4“) mit benannten Beschriftungen an, die gut funktionieren, wenn jeder Schritt ein klares Thema hat, wie „Ihre Daten“ oder „Zahlung“.

Schrittnamen sind die zusätzliche Minute zur Konfiguration wert. Eine Beschriftung wie „Schritt 2: Lieferadresse“ teilt den Benutzern genau mit, wo sie sich im Prozess befinden, was die Abbruchrate stärker reduziert als ein unbeschrifteter Balken. Aus der Perspektive des Benutzers sehen beschriftete Schritte professionell aus und wirken weniger einschüchternd als eine generische Fortschrittsanzeige.

Um den Fortschrittsbalken und den Seitentitel für die erste Seite Ihres mehrseitigen Formulars zu ändern, klicken Sie auf das Feld Erste Seite des Seitenumbruchs.

Sie sehen dann ein neues Panel, in dem Sie den Fortschrittstyp für Ihr Formular auswählen können. In diesem Bereich können Sie auch die Farbe ändern, die zur Hervorhebung der Fortschrittsanzeige verwendet wird, wenn Sie möchten.

Wenn Sie die Optionen Kreise oder Verbinder auswählen, können Sie auch den Seitentitel ändern. Dies hilft den Benutzern zu wissen, auf welchem Teil des Formulars sie sich befinden, damit sie sich nicht verirren. Wenn Sie dies jedoch nicht möchten, wird den Benutzern ein Standard-Fortschrittsbalken angezeigt, der sie beim Ausfüllen Ihres Formulars leitet.

Als Nächstes können Sie die Schaltfläche und den Text Nächste Seite ändern, die die Benutzer zur nächsten Seite Ihres Formulars führen.

Klicken Sie dazu auf den Abschnitt Seitenumbruch, den Sie beim Erstellen Ihres Formulars hinzugefügt haben.

Darüber hinaus können Sie eine Schaltfläche Vorherige Seite hinzufügen, indem Sie den Schalter auf Ein stellen. Auf diese Weise können Benutzer zurückgehen, wenn sie vergessen haben, einige Informationen hinzuzufügen.

Wenn Sie mit der Anpassung Ihrer Fortschrittsleiste fertig sind, klicken Sie auf Speichern und fahren Sie mit dem nächsten Schritt fort.

Schritt 4: Bearbeiten Sie Ihre Formulareinstellungen

Nun wollen wir Ihre Formulareinstellungen bearbeiten. Gehen Sie dazu zu Einstellungen » Allgemein.

In diesem Abschnitt können Sie die folgenden Optionen festlegen:

• Formularname – Geben Sie Ihrem Formular einen neuen Namen, wenn Sie möchten.
• Formularbeschreibung – Fügen Sie Ihrem Formular eine Beschreibung zur Referenz hinzu.
• Text für die Übermittlungsschaltfläche – Ändern Sie den Text Ihrer Übermittlungsschaltfläche.
• Spam-Einstellungen – Aktivieren Sie die Anti-Spam-Honeypot-Option, um Spammer daran zu hindern, unerwünschte Übermittlungen zu senden.
• DSGVO-Funktionen – Deaktivieren Sie die Speicherung von Informationen, die in Ihren Formularen eingegeben wurden, wie z. B. IP-Adressen und andere sensible Daten, um die DSGVO einzuhalten.

Wenn Ihre Einstellungen konfiguriert sind, klicken Sie auf Speichern.

Schritt 5: Richten Sie Ihre Formularbenachrichtigungen ein

Die Benachrichtigungseinstellungen in WPForms senden eine E-Mail, wenn ein Formular auf Ihrer WordPress-Website übermittelt wird.

Sie finden die Benachrichtigungseinstellungen, indem Sie auf Einstellungen » Benachrichtigungen klicken.

Wenn Sie die Formularbenachrichtigungen nicht deaktivieren, erhalten Sie für jede auf Ihrer Website übermittelte Formular eine E-Mail.

Andererseits können Sie Smart Tags verwenden, um eine E-Mail an die Personen zu senden, die Ihr Formular ausfüllen. Smart Tags sind eine hervorragende Möglichkeit, sie wissen zu lassen, dass ihr Formular korrekt verarbeitet wurde und dass Sie es erhalten haben.

Es ist noch besser, diese Funktion bei langen Formularen mit mehreren Schritten zu verwenden, da deren Ausfüllen länger dauern kann. Außerdem müssen sich die Benutzer keine Sorgen machen, ob alles in Ordnung ist. Weitere Hilfe finden Sie hier in der Dokumentation zur Einrichtung von Formularbenachrichtigungen.

Wenn Sie mit der Einrichtung Ihrer Benachrichtigungen fertig sind, fahren Sie mit der Konfiguration Ihrer Formularbestätigungsnachricht fort.

Schritt 6: Definieren Sie Ihre Bestätigungsnachricht für das Formular

Formularbestätigungsnachrichten sind kurze Nachrichten, die den Benutzern angezeigt werden, wenn sie ein Formular auf Ihrer Website übermittelt haben. Es ist eine hervorragende Möglichkeit, den Personen mitzuteilen, dass ihr Formular bearbeitet wird und welche Schritte als Nächstes zu unternehmen sind.

Es gibt 3 Arten von Bestätigungsnachrichten in WPForms, darunter:

1. Nachricht – Eine einfache Nachricht, die den Benutzern mitteilt, dass ihr Formular übermittelt wurde.
2. Seite anzeigen – Leiten Sie Benutzer nach der Übermittlung ihres Formulars auf eine andere Seite, z. B. eine Dankesseite.
3. URL aufrufen (Weiterleitung) – Leiten Sie Website-Besucher nach der Formularübermittlung zu einer anderen Website weiter.

Um Ihre Bestätigungsnachricht einzurichten, klicken Sie auf Einstellungen » Bestätigung.

Wählen Sie dann die Art der Nachricht aus, die Sie Ihren Besuchern nach Abschluss Ihres Formulars anzeigen möchten. Für dieses Tutorial wählen wir Nachricht.

Passen Sie nun den Nachrichtentext an Ihre Bedürfnisse an und klicken Sie auf Speichern, wenn Sie zufrieden sind.

Sie sind nun bereit, Ihr Formular zu WordPress hinzuzufügen.

Schritt 7: Fügen Sie Ihr Formular zu WordPress hinzu

Sobald Sie Ihr Mehrschrittformular erstellt haben, ist es an der Zeit, es zu Ihrer WordPress-Website hinzuzufügen. Mit WPForms können Sie Ihr Formular in vielen Bereichen Ihrer Website einfügen. Dazu gehören Ihre Website-Seite oder Ihr Beitrag, Ihre Seitenleiste und alle anderen Widget-fähigen Bereiche.

Sehen wir uns an, wie Sie Ihr Mehrschrittformular zu einer WordPress-Seite hinzufügen.

Zuerst gehen Sie zu Ihrem WordPress-Adminbereich und klicken Sie auf Seiten » Neu hinzufügen.

Klicken Sie dann auf das Plus-Symbol im WordPress-Editor, um einen neuen Inhaltsblock hinzuzufügen. Geben Sie im Suchfeld WPForms ein, um ihn leicht zu finden.

Klicken Sie nun auf den WPForms-Block, um ihn zu Ihrer Seite hinzuzufügen.

Wenn WPForms in Ihrem Block erscheint, klicken Sie auf den Dropdown-Pfeil, um Ihr mehrstufiges Formular aus der Liste auszuwählen und es in Ihre Seite einzufügen.

Klicken Sie dann auf Veröffentlichen, um die Seite in WordPress zu veröffentlichen. Ihr mehrstufiges Formular wird nun auf Ihrer Website angezeigt.

Fügen Sie Ihr mehrstufiges Formular zu einer SeedProd-Landingpage hinzu

Sie haben das Formular erstellt. Nun stellt sich die eigentliche Frage: Wo soll es platziert werden? Das Hinzufügen Ihres mehrstufigen Formulars zu einer Standard-WordPress-Seite funktioniert, aber die Einbettung auf einer speziellen Landingpage, die mit SeedProd erstellt wurde, gibt Ihnen die volle Kontrolle über das Design rund um das Formular, was weniger Ablenkungen und mehr Conversions bedeutet.

SeedProd verfügt über einen integrierten WPForms-Block, der direkt mit jedem von Ihnen erstellten Formular verbunden ist.

So richten Sie es ein:

1. Öffnen Sie Ihre Landingpage im SeedProd-Seitenersteller, indem Sie zu SeedProd » Landing Pages gehen und auf Seite bearbeiten klicken.
2. Suchen Sie im linken Bereich nach WPForms und ziehen Sie den WPForms-Block auf Ihre Seite, wo das Formular erscheinen soll.
3. Klicken Sie auf den Block, um seine Einstellungen zu öffnen, und wählen Sie dann über das Dropdown-Menü Ihr mehrstufiges Formular aus der Liste der vorhandenen Formulare aus.
4. Passen Sie das umliegende Abschnittslayout, die Überschrift und die Schaltflächenstile an Ihre Kampagne an, klicken Sie dann auf Speichern und Seite veröffentlichen.

Das Formular wird genau so gerendert, wie es in WPForms konfiguriert wurde, einschließlich der Fortschrittsleiste und des mehrstufigen Layouts. Wenn Sie noch keine Landingpage erstellt haben, macht der Drag-and-Drop-Editor von SeedProd es einfach, eine aus einer Vorlage zu erstellen, ohne Code anfassen zu müssen.

FAQs zu mehrstufigen Formularen in WordPress

Und das war's! Sie haben gelernt, wie Sie ein mehrstufiges Formular in WordPress erstellen, damit Sie im Handumdrehen die Benutzerbindung und die Formular-Konversionsraten verbessern können.

Wenn Ihnen dieser Artikel gefallen hat, sehen Sie sich auch unsere Übersicht der besten WordPress-Plugins für Ihre Website an.

Und für weitere Formular-Tutorials sehen Sie sich diese Artikel an:

• So erstellen Sie ein WordPress-Formular mit Dateiupload
• So erstellen Sie ein Typeform-ähnliches Formular
• So erstellen Sie ein Kontaktformular in WordPress
• So erstellen Sie ein Online-Bestellformular in WordPress
• So erstellen Sie ein WordPress-Veranstaltungsanmeldeformular

Und wenn Sie möchten, folgen Sie uns auf Facebook und Twitter für weitere hilfreiche Tipps und Tutorials.