So erstellen Sie in 10 Minuten ein mehrstufiges Formular in WordPress 

Möchten Sie ein mehrstufiges Formular in WordPress erstellen, das sich leicht ausfüllen lässt und besser konvertiert?

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

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

Kurze Antwort: Um in WordPress ein mehrstufiges Formular zu erstellen, installieren Sie WPForms Pro, erstellen Sie ein neues Formular, ziehen Sie das Feld „Seitenumbruch“ zwischen die Abschnitte, um diese in einzelne Schritte zu unterteilen, aktivieren Sie den Fortschrittsbalken in den Formulareinstellungen und binden Sie das Formular in eine beliebige Seite ein. Der gesamte Vorgang dauert etwa 10 Minuten und erfordert keine Programmierkenntnisse.

Wann sollten mehrstufige Formulare verwendet werden?

Nicht jedes Formular muss in mehrere Schritte unterteilt werden, doch bei manchen Formulartypen lässt sich die Abschlussrate deutlich steigern, wenn man Seitenumbrüche einfügt. Hier sind die Szenarien, in denen dies den größten Unterschied macht:

• Anmeldeformulare mit vielen Feldern – sei es für Veranstaltungen oder für eine Mitgliedschaft, bei denen Name, Adresse, Präferenzen und Zahlungsdaten auf einmal abgefragt werden – lassen sich sinnvoll in logische Gruppen unterteilen.
• Formulare zur Lead-Generierung im Quiz-Stil – Formulare, die Leads anhand der Antworten (Budget, Zeitplan, Projektart) qualifizieren, wirken wie ein Gespräch, wenn jeweils nur eine Frage angezeigt wird.
• Mehrseitige Bestellprozesse – Bestellformulare, bei denen Kontaktdaten, Versandangaben und Zahlungsinformationen in separaten Schritten erfasst werden, verringern die kognitive Belastung in jeder Phase.
• Bewerbungsformulare – Bewerbungen mit Angaben zu persönlichen Daten, beruflichem Werdegang und Verfügbarkeit eignen sich ideal für eine dreistufige Struktur.
• Umfragen – Längere Umfragen mit mehreren Themenbereichen lassen sich leichter ausfüllen, wenn sie in thematische Abschnitte unterteilt sind, anstatt als eine einzige lange Seite angezeigt zu werden.

Tipps für eine bessere Gestaltung mehrstufiger Formulare

Bevor Sie mit der Erstellung beginnen, sollten Sie einige Gestaltungsentscheidungen treffen, die das Ausfüllen Ihres Formulars erheblich vereinfachen. Ich habe festgestellt, dass diese bei den Formularen, die ich mit WPForms erstellt habe, einen echten Unterschied machen.

• Beschränken Sie jeden Schritt auf maximal 3–5 Felder. Bei mehr als fünf Feldern pro Seite wirkt das Formular wieder wie ein langes Formular.
• Beschriften Sie den Fortschrittsbalken mit Schrittnamen und nicht nur mit Zahlen. „Schritt 2: Ihre Kontaktdaten“ wirkt vertrauenserweckender als „Schritt 2 von 4“.
• Verwenden Sie eindeutige Beschriftungen für Schaltflächen. „Nächster Schritt“ oder „Weiter zum Versand“ teilen den Nutzern genau mit, was passiert, wenn sie darauf klicken.
• Aktivieren Sie die Schaltfläche „Zurück“. Die Benutzer benötigen eine Möglichkeit, zurückzugehen und frühere Antworten zu korrigieren, ohne die bereits eingegebenen Angaben zu verlieren.
• Speichern Sie unvollständige Einträge, wann immer möglich. WPForms Pro unterstützt das Speichern unvollständiger Einträge, sodass Sie Nutzer kontaktieren können, die mit der Eingabe begonnen, diese aber nicht abgeschlossen haben.

Der beste Weg, ein mehrstufiges Formular in WordPress zu erstellen

In diesem Tutorial werden wir WPForms verwenden, um mehrteilige Formulare in WordPress zu erstellen. WPForms ist das beste Drag-and-Drop-Plugin für WordPress-Formularerstellung. Und mit über 3 Millionen aktiven Installationen ist es das einsteigerfreundlichste Tool auf dem Markt.

Noch besser ist, hat es sowohl eine kostenlose und kostenpflichtige Version, aber heute werden wir die Pro-Version von WPForms verwenden, um eine mehrseitige Form in WordPress zu bauen.

Warum nicht überprüfen Sie diese eingehende WPForms Überprüfung für die vollständigen Details?

Fangen wir also mit dem ersten Schritt an, nämlich der Erstellung eines neuen Formulars.

Bevor Sie beginnen: Das Feld „Seitenumbruch“, das für mehrstufige Formulare benötigt wird, 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

Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Wenn Sie nicht sicher sind, wie das geht, können Sie diese Schritt-für-Schritt-Anleitung zur Installation von WordPress-Plugins für Anfänger befolgen.

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

Gehen Sie zu WPForms " Add New, um ein neues Formular zu erstellen und die verfügbaren Vorlagen anzuzeigen.

Geben Sie dann auf diesem Bildschirm Ihrem Formular einen Namen und wählen Sie die Vorlage "Einfaches Kontaktformular".

WPForms wird nun die Vorlage im Drag-and-Drop-Formular-Builder öffnen, damit Sie sie bearbeiten können.

Das einfache Kontaktformular wird mit den folgenden Feldern geliefert, die dem Formular bereits hinzugefügt wurden:

• Name
• E-Mail
• Kommentar oder Nachricht

Sie können auch Formularfelder verschieben und zusätzliche Felder hinzufügen, indem Sie sie von der linken Spalte in die rechte Spalte ziehen. Klicken Sie einfach auf ein Formularfeld, um den Inhalt zu bearbeiten, und ziehen Sie es, 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 Formulartypen erstellen:

• Umfrageformular
• Online Bestellformular
• Typ-Form-Formular
• Formular zum Hochladen von Dateien

Die meisten dieser Formulartypen sind länger als Standard-Kontaktformulare, so dass eine Aufteilung in mehrere Schritte die Konversionsrate verbessern kann.

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 Seitenwechsel hinzu, um Ihr Formular in verschiedene Seiten aufzuteilen.

Sie können dies tun, indem Sie unter der Überschrift "Ausgefallene Felder" nachsehen und das Formularfeld " Seitenumbruch " in das rechte Feld ziehen.

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

Wiederholen Sie diesen Vorgang für jeden Abschnitt, in dem Sie Ihr Formular auf eine andere Seite aufteilen möchten. Von dort aus können Sie Ihr Formular weiter anpassen, indem Sie die Felder hinzufügen, die Sie zum Ausfüllen des Formulars benötigen.

Mit WPForms können Sie zwar so viele Formulare hinzufügen, wie Sie möchten, aber es ist wichtig, dass Sie die Benutzer nicht mit zu vielen Informationen überfordern. Dies kann dazu führen, dass sie Ihr Formular abbrechen, was das Gegenteil von dem ist, was Sie erreichen wollen.

Schritt 3: Anpassen der Fortschrittsleiste Ihres Formulars

Um den Fluss Ihres Formulars zu erhöhen, können Sie einen Fortschrittsbalken einfügen. Ein Fortschrittsbalken informiert über die verschiedenen Abschnitte Ihres Formulars und ist ein guter visueller Indikator dafür, wie viel noch zu erledigen ist.

WPForms kommt mit 3 verschiedenen Fortschrittsanzeigeleisten für mehrstufige Formulare, die wie folgt sind:

1. Verbindungslinien - Verbindungsleisten und Seitentitel für jeden Schritt Ihres Formulars.
2. Kreise - Nummerierte Kreise und Seitentitel für jeden Formularschritt.
3. Fortschrittsbalken - Indikator für den Fortschritt des Benutzers beim Ausfüllen der Formularschritte.

Jede Option bietet den Benutzern ein anderes visuelles Erlebnis. Der Fortschrittsbalken zeigt eine prozentuale Füllung an, die sich mit jedem abgeschlossenen Schritt weiterbewegt. Die Optionen „Kreise“ und „Verbindungslinien“ zeigen die Schrittanzahl („Schritt 2 von 4“) mit beschrifteten Bezeichnungen an, was besonders gut funktioniert, wenn jeder Schritt ein klares Thema hat, wie beispielsweise „Ihre Angaben“ oder „Zahlung“.

Es lohnt sich, sich die zusätzliche Minute Zeit zu nehmen, um die Schrittbezeichnungen zu konfigurieren. Eine Bezeichnung wie „Schritt 2: Lieferadresse“ zeigt den Nutzern genau, wo sie sich gerade im Prozess befinden, was die Abbruchrate stärker senkt als ein unbeschrifteter Fortschrittsbalken. Aus Sicht der Nutzer wirken beschriftete Schritte professionell und wirken weniger einschüchternd als ein allgemeiner Fortschrittsindikator.

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

Daraufhin wird ein neuer Bereich angezeigt, in dem Sie die Fortschrittsanzeige für Ihr Formular auswählen können. In diesem Bereich können Sie auch die Farbe zur Hervorhebung der Fortschrittsanzeige ändern, wenn Sie dies wünschen.

Wenn Sie die Optionen "Kreise" oder "Anschlüsse" wählen, können Sie auch den Seitentitel ändern. Auf diese Weise wissen die Nutzer, in welchem Teil des Formulars sie sich befinden, damit sie sich nicht verirren. Wenn Sie dies nicht wünschen, wird den Nutzern ein Standard-Fortschrittsbalken angezeigt, der sie durch das Ausfüllen des Formulars führt.

Im nächsten Schritt können Sie die Schaltfläche " Nächste Seite" und den Text ändern, der die Benutzer auf die nächste Seite des Formulars führt.

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

Außerdem können Sie eine Schaltfläche " Vorherige Seite" hinzufügen, indem Sie den Schalter auf "Ein" stellen. Auf diese Weise können die Benutzer zurückgehen, wenn sie vergessen haben, Informationen hinzuzufügen.

Wenn Sie die Anpassung Ihres Fortschrittsbalkens abgeschlossen haben, klicken Sie auf Speichern und fahren Sie mit dem nächsten Schritt fort.

Schritt 4: Bearbeiten Sie Ihre Formulareinstellungen

Nun können Sie die Einstellungen Ihres Formulars bearbeiten. Gehen Sie dazu auf Einstellungen " Allgemein.

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

• Formularname - Geben Sie Ihrem Formular einen neuen Namen, wenn Sie möchten.
• Formularbeschreibung - Fügen Sie Ihrem Formular eine Beschreibung als Referenz hinzu.
• Text der Übermittlungsschaltfläche - Ändern Sie den Text der Übermittlungsschaltfläche.
• Spam-Einstellungen - Aktivieren Sie die Anti-Spam-Honeypot-Option, um Spammer daran zu hindern, unerwünschte Beiträge zu senden.
• GDPR-Funktionen - Deaktivieren Sie die Speicherung der in Ihre Formulare eingegebenen Informationen wie IP-Adressen und andere sensible Daten, um der GDPR zu entsprechen.

Wenn Ihre Einstellungen konfiguriert sind, klicken Sie auf Speichern.

Schritt 5: Einrichten von Formularbenachrichtigungen

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

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

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

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

Es ist sogar besser, diese Funktion bei langen Formularen mit mehreren Schritten zu verwenden, da das Ausfüllen länger dauern kann. Außerdem erspart es den Nutzern, sich zu fragen, ob alles gut gelaufen ist. Weitere Hilfe finden Sie in der Dokumentation zur Einrichtung von Formularbenachrichtigungen hier.

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ätigungen sind kurze Nachrichten, die den Nutzern angezeigt werden, wenn sie ein Formular auf Ihrer Website ausgefüllt haben. Sie sind eine hervorragende Möglichkeit, den Nutzern mitzuteilen, dass ihr Formular bearbeitet wird und welche Schritte sie als nächstes unternehmen müssen.

Es gibt 3 Arten von Bestätigungsmeldungen in WPForms, die beinhalten:

1. Nachricht - Eine einfache Nachricht, die den Benutzer darüber informiert, dass sein Formular abgeschickt wurde.
2. Seite anzeigen - Schicken Sie Benutzer nach dem Absenden ihres Formulars auf eine andere Seite, z. B. eine Dankeseite.
3. Go to URL (Redirect) - Schicken Sie Website-Besucher nach dem Absenden des Formulars auf eine andere Website.

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

Wählen Sie dann die Art der Nachricht, die Sie Ihren Besuchern nach dem Ausfüllen 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 in WordPress einzufügen.

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

Sobald Sie Ihr mehrstufiges Formular erstellt haben, ist es an der Zeit, es zu Ihrer WordPress-Website hinzuzufügen. Mit WPForms können Sie Ihr Formular zu vielen Bereichen Ihrer Website hinzufü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 mehrstufiges Formular zu einer WordPress-Seite hinzufügen.

Gehen Sie zunächst in Ihren WordPress-Verwaltungsbereich und klicken Sie auf Seiten " Neu hinzufügen.

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

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

Wenn WPForms innerhalb Ihres Blocks erscheint, klicken Sie auf den Dropdown-Pfeil, um Ihr mehrstufiges Formular aus der Liste auszuwählen und 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 erscheinen.

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

Sie haben das Formular erstellt. Nun stellt sich die Frage, wo Sie es platzieren sollen. Sie können Ihr mehrstufiges Formular zwar auf einer normalen WordPress-Seite einfügen, doch wenn Sie es in eine mit SeedProd erstellte eigene Landingpage einbetten, haben Sie die volle Kontrolle über das Design rund um das Formular – das bedeutet weniger Ablenkungen und mehr Conversions.

SeedProd verfügt über einen integrierten WPForms-Block, der sich direkt mit jedem von Ihnen erstellten Formular verbinden lässt.

So richten Sie es ein:

1. Öffnen Sie Ihre Landingpage im SeedProd-Seitenersteller, indem Sie zu „SeedProd » Landing Pages“ navigieren und auf „ Seite bearbeiten“ klicken.
2. Suchen Sie im linken Bereich nach „WPForms“ und ziehen Sie den WPForms-Block an die Stelle auf Ihrer Seite, an der das Formular erscheinen soll.
3. Klicken Sie auf den Block, um dessen 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 Layout des umgebenden Abschnitts sowie die Stile für Überschriften und Schaltflächen an Ihre Kampagne an und klicken Sie anschließend auf „Speichern und Seite veröffentlichen“.

Das Formular wird genau so angezeigt, wie es in WPForms konfiguriert wurde, einschließlich des Fortschrittsbalkens und des mehrstufigen Layouts. Falls Sie noch keine Landingpage erstellt haben, können Sie mit dem Drag-and-Drop-Editor von SeedProd ganz einfach eine Vorlage verwenden, ohne sich mit dem Code befassen zu müssen.

FAQs über mehrstufige Formulare in WordPress

Und das war's! Sie haben gelernt, wie man ein mehrstufiges Formular in WordPress erstellt, sodass Sie im Handumdrehen das Engagement der Nutzer und die Konversionsraten des Formulars verbessern können.

Wenn Ihnen dieser Artikel gefallen hat, sehen Sie sich unsere Übersicht der besten WordPress-Plugins an, die Sie auch auf Ihrer Website verwenden können.

Weitere Anleitungen zu Formularen finden Sie in diesen Artikeln:

• Wie man ein WordPress-Formular mit Datei-Upload erstellt
• Erstellen eines Formulars im Typeform-Stil
• Wie man ein Kontaktformular in WordPress erstellt
• Wie man ein Online-Bestellformular in WordPress erstellt
• Wie man ein WordPress-Veranstaltungsregistrierungsformular erstellt

Und wenn Sie möchten, können Sie uns auf Facebook und Twitter folgen, um weitere hilfreiche Tipps und Anleitungen zu erhalten.