Multi-Step Formulare mit WPForms

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.

  • Mehr als 1.000.000 Benutzer
    Das am schnellsten wachsende WordPress-Thema aller Zeiten!
  • Hunderte Starter-Templates
    Spare Zeit und nutze eine der professionellen Vorlagen für einen schnellen Start.
  • PageBuilder Blöcke
    Unterstützt Elementor, Beaver Builder, Brizy und den Gutenberg Block Editor.
  • Extrem schnelles Theme
    Beste Page-Speed Werte mit Astra.
Astra WordPress Theme

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

WPForms Lizenzschlüssel aktivieren
WPForms Lizenzschlüssel im Dashboard aktivieren

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

Neues Formular erstellen
WPForms: Neues 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

WPForms Editor
WPForms Editor

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

Seitenumbruch einfügen
Seitenumbruch einfügen

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.

Seitenumbruch
Seitenumbruch

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

Drei Arten von Fortschrittsbalken
Drei Arten von Fortschrittsbalken

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

Formular Benachrichtigungen
Formular 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

WPForms Shortcode
WPForms Shortcode

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.

Bestes WordPress Hosting

Hosting-Empfehlungen sind normalerweise Müll.

Oft werden extrem billige Hosting-Pakete für € 3 empfohlen, andere wiederum werben mit einem € 100 VPS, weil sie dabei am meisten als Affiliate verdienen. Im Endeffekt wollen wir doch alle nur den schnellstmöglichen Webspace für möglichst wenig Geld.

Und zwar für WordPress optimiert!

Was ist noch wichtig? Der Server sollte in Deutschland liegen und der Support möglichst schnell antworten, am besten auf Deutsch.

Das alles bekommst du bei Raidboxes ab € 15,00 / Monat.

Multi-Step Formular FAQ

Mit welchem Plugin kann ich mehrseitige Multi-Step Formulare erstellen?

Mit dem WordPress-Plugin WPForms kannst du Multi-Step Formulare und Dialogformulare erstellen.

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?

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 

Nach oben scrollen