Wie du ein Multi-Step Formular in WordPress erstellst

Mehrseitige Multi-Step Formulare haben den Vorteil, dass du die Informationen häppchenweise und wohl-sortiert über mehrere Schritte abfragen kannst. Für die Umsetzung dieser Multi-Step Formular Anleitung nutze ich das WordPress-Plugin WPForms.

Die kostenlose Variante des Plugins kann dieses Feature leider nicht, deshalb benötigst du zumindest die Basic-Lizenz für $ 39,50, um dieses Howto umsetzen zu können. WPForms ist das meiner Meinung nach beste Formular-Plugin für WordPress, ein Upgrade lohnt sich also.

WPForms ist übrigens komplett auf Deutsch übersetzt.

Das Aufteilen eines Formulars in mehrere Seiten hilft, die Beteiligung zu erhöhen und die Benutzerfreundlichkeit zu verbessern. Gleichzeitig bekämpfst du die Formularermüdung, sodass du mehr Abschlüsse erhältst.

Wenn du Englisch kannst und besser mit Videos lernst, hast du hier eine kurze Einführung:

In diesem Artikel zeige ich dir, wie du ein mehrstufiges Formular in WordPress erstellen kannst.

Wann soll ich ein Multi-Step Formular nutzen?

Zunächst klären wir die Frage, was ein mehrseitiges Multi-Step Formular ist. Es ist einfach die Aufteilung deines Formulars in mehrere Seiten oder Schritte, damit es nicht ein einziges langes Formular ist.

Und trotz des Hinzufügens weiterer Schritte zu deinem WordPress-Formular kann die Verwendung eines Multi-Step-Formulars, auch bekannt als mehrteiliges oder mehrseitiges Formular, die Konvertierungsrate des Formulars deutlich erhöhen, insbesondere wenn das Form mehr als 3 Formularfelder hat.

Vor einiger Zeit hatte ich ja Conversational Forms mit WPForms vorgestellt, auch diese Dialogformulare dienen dazu die erfolgreichen Formularabsendungen zu erhöhen.

99 Prozent aller Web-Formulare sind gleich aufgebaut und besonders bei mehreren Feldern springen die Besucher gerne ab. Mehrseitige Formblattwerden selten eingesetzt, weil die Umsetzung technisch viel schwieriger ist, deshalb kannst du mit der Abwechslung die User am Ball halten.

Anleitung: So erstellst du ein mehrseitiges Multi-Step Formular

Damit du nicht lange probieren musst, habe ich ein Howto vorbereitet, wie du ganz einfach ein mehrseitiges Formular erstellst.

1. WPForms installieren

Zunächst musst du das WPForms Plugin in deinem WordPress-Admin installieren und aktivieren. Suche dazu einfach nach „WPForms“. Weißt du nicht, wie das geht, nutze meine Anleitung wie du ein WordPress-Plugins installierst.

Danach fügst du deinen Lizenzschlüssel in WPForms > Einstellungen ein und klickst auf Verbinden. Damit ist auch die Funktion Seitenumbruch freigeschaltet, die du für Multi-Step-Formulare benötigst.

2. Formular erstellen

Zum Erstellen des neuen Formulars findest du entweder links im Menü den Punkt Neues Formular Hinzufügen oder auch in der Formularübersicht den gleichnamigen Button. Klicke darauf.

Nun befindest du dich in der Formular-Einrichtung. Vergib einen Namen und wähle ein Template aus. Ich nutze die Vorlage „Einfaches Kontaktformular“.

3. Formular bearbeiten

Im Drag-and-Drop Formular-Designer fügst du nun alle gewünschten Felder und Texte hinzu und bearbeitest sie.

Die Auswahl an Feldern ist bei WPForms richtig gut, damit kannst du deine Vorstellungen leicht umsetzen.

Falls du Probleme mit Formular-Spam hast, füge das Feld reCAPTCHA hinzu. Das ist ein kostenloser Dienst von Google, der im Hintergrund Spammer erkennt. Vorher musst du aber in WPForms > Einstellungen > reCAPTCHA deinen Schlüssel eingeben. Keine Angst, dort wird alles genau erklärt.

4. Mehrseitiges Formular erstellen

Das hört sich jetzt vielleicht schwierig an, ist aber mit einem Klick erledigt.

Links im Menü mit allen Feldern findet sich der Abschnitt Fancy Fields. Diese sind nur mit der Pro-Version zugänglich. Darunter befindet sich auch das Feld Seitenumbruch. Ziehe dieses Feld an die gewünschte Stelle deines Formulars.

Möchtest du mehrere Formularteile erstellen, ziehst du das Feld Seitenumbruch mehrmals an den gewünschten Bereich.

Im Formular-Editor wird das gesamte Form auf einer Seite dargestellt.

Direkt vor dem Seitenumbruch wird ein Weiter-Button eingefügt. Mit diesem kommt der Besucher dann zum zweiten Schritt.

Auf der letzten Seite befindet sich dann der Absenden-Button.

Bedenke: Nutze nur so viele Formularfelder wie wirklich notwendig!
Verwende den Seitenumbruch und mehrere Formularseiten mit Bedacht und gruppiere verwandte Felder auf einer Seite.

5. Fortschrittsbalken anpassen

Der Fortschrittsbalken wird ganz oben auf der ersten Seite eingefügt. Dieses Feature solltest du unbedingt nutzen, da es den Besucher zu jeder Zeit informiert, an welcher Stelle des mehrseitigen Formulars er sich gerade befindet.

Du kannst aus drei unterschiedlichen Typen auswählen:

• Konnektoren: Zeigt eine Verbindungsleiste und Seitentitel jedes Teils deines Multi-Step Formulars an.
• Kreise: Zeigt einen Kreis und einen Seitentitel pro Seite deines mehrstufigen Formulars an.
• Fortschrittsbalken: Zeigt den Fortschritt des Formulars an, wenn der Besucher es ausfüllt.

Zum Anpassen der einzelnen Schritte klicke auf das Seitenumbruch-Element. Darauf öffnen sich die Feldoptionen, wo du den Namen für jede Seite des Formulars ändern kannst. Hier kannst du auch den Indikator-Typ ändern und eine beliebige Farbe dafür hinterlegen.

Natürlich kannst du auch den Weiter- und Absenden-Button verändern.

6. Einstellungen und Benachrichtigungen

Jetzt kümmern wir uns noch darum, dass du über neue Formularabschlüsse auch informiert wirst und die eingetragenen Daten auch am richtigen Platz landen.

Generell solltest du bei jedem Formular die Einstellungen durchgehen und nach deinen Anforderungen anpassen.

Für mich sind die Benachrichtigungen wichtig. Ich möchte über jedes abgesendete Formular sofort informiert werden. Am besten geht das mit den E-Mail-Benachrichtigungen. Nutze auch die Variablen namens Smart Tags, um alle wichtigen Formularinformationen direkt in deinem E-Mail zu erhalten.

Unter Bestätigungen kannst du noch eine Nachricht nach dem Absenden des Formulars hinterlassen. Ich leite den Besucher stattdessen zu einer Danke-Seite weiter.

Möchtest du die Formulardaten an deinen E-Mail-Service-Provider senden, solltest du das auch direkt unter Marketing einstellen. Ich sende alle Formulare an Sendinblue, über die Zapier Schnittstelle.

7. Formular einfügen

Zum Einfügen des mehrseitigen Mutli-Step Formulars hast du zwei Möglichkeiten. Entweder du nutzt den WordPress-Shortcode, oder den WPForms Widget-Block.

Shortcode

Wie du auf dem Bild oben siehst, klickst du im Formular-Editor auf den EMBED-Button, worauf sich ein Modul öffnet mit dem Shortcode zum Einfügen in deine WordPress-Website.

[wpforms id="1" title="false" description="false"]

Kopiere diesen Code und füge ihn an jeder beliebigen Stelle deines Blogs ein.

Gutenberg Block

Der WPForms-Block befindet sich unter den Widgets. Klicke im Block-Editor auf das Plus-Zeichen, scrolle runter zu den Widgets und klicke auf WPForms.

Multi-Step Formular FAQ

Fazit mehrseitiges Formular

Mit dem WordPress-Plugin WPForms hast du in 10 Minuten ein schönes mehrseitiges Multi-Step Formular erstellt. Du musst nur wissen, dass du das Seitenwechsel-Element an die gewünschte Stelle im Formular schieben musst.

Einziger Wermutstropfen ist, dass du dafür die Pro-Version von WPForms benötigst.

Schreib mir einen Kommentar: Wofür nutzt du Formulare mit mehreren Seiten?