Suchst du nach einer Möglichkeit, die Kontaktaufnahme von Website-Besuchern mit einem mehrstufigen Formular zu einem positiven Erlebnis zu machen?
Indem du dein Formular in verschiedene Abschnitte aufteilst, kannst du der Formularmüdigkeit entgegenwirken und die Nutzerbindung und Leadgenerierung auf deiner Website erhöhen.
In diesem Leitfaden führen wir dich durch die Grundlagen der Einrichtung eines mehrstufigen Formulars in WordPress mit WPForms anhand von 2 verschiedenen Methoden.
Wie man ein mehrstufiges Formular in WordPress erstellt
Die Erstellung eines mehrstufigen Formulars in WordPress mit WPForms ist unglaublich einfach. Befolge einfach die folgenden Schritte:
In diesem Artikel
Schritt 1: Installiere ein Multi-Step Form Builder Plugin
Wenn du auf der Suche nach einem Formularerstellungs-Plugin bist, mit dem du mehrstufige Formulare, Rechner und andere Arten von Formularen erstellen kannst, dann ist WPForms genau das Richtige für dich. Es bietet zahlreiche Funktionen, mit denen du ganz einfach ein individuelles Formular erstellen kannst.
Für dieses Tutorial empfehlen wir, sich für WPForms Pro anzumelden, da es viele Funktionen wie Seitenumbrüche, das Lead Forms Addon, bedingte Logik und anpassbare Vorlagen hat, die es sehr einfach machen, ein mehrstufiges Formular zu erstellen.
Sobald du die WPForms Pro Lizenz erworben hast, musst du das Plugin nur noch aktivieren und auf deiner Website installieren. Eine schrittweise Anleitung dazu findest du in diesem Leitfaden zur Installation eines WordPress-Plugins.
Schritt 2: Erstelle dein Formular und füge relevante Felder hinzu
Jetzt wollen wir dein mehrstufiges Formular in WordPress erstellen. Navigiere in deinem Dashboard einfach zu WPForms und klicke auf die Schaltfläche Neu hinzufügen.
Auf der nächsten Seite gibst du deinem Formular einen Namen. Für dieses Tutorial nennen wir unser Formular "WordPress Multi-Step Form".
Danach kannst du dein Formular von Grund auf neu erstellen, indem du auf die Schaltfläche Leeres Formular erstellen klickst, oder du kannst einer bestehenden Vorlage Felder hinzufügen.
Um Zeit zu sparen und mit dem Hinzufügen relevanter Felder zu unserem Formular fortzufahren, wählen wir das Einfache Kontaktformular aus und klicken dann auf die Schaltfläche Vorlage verwenden.
Nachdem du auf die Schaltfläche Vorlage verwenden geklickt hast, wirst du zum Formularersteller weitergeleitet. Auf der linken Seite kannst du alle verfügbaren Felder sehen.
Auf der rechten Seite des Bildschirms siehst du eine bearbeitbare Vorschau deines Formulars, in die du andere Felder nach Belieben ziehen kannst.
Mit der SimpleContact-Formularvorlage hast du bereits die Formularfelder Name, E-Mail und Kommentar oder Nachricht.
Klicke auf eines der Formularfelder, um Änderungen vorzunehmen oder neue Felder hinzuzufügen, um dein Formular anzupassen. Wir haben zum Beispiel Felder hinzugefügt, in denen die Nutzer Informationen zu folgenden Themen angeben können:
- Firmenname - Verwende das einzeilige Textfeld.
- Berufsbezeichnung - Auch hier verwendest du das einzeilige Textfeld.
- Website - Verwende das Feld Website / URL aus dem Abschnitt Fancy Fields.
- Branche - Verwende ein Kontrollkästchen und füge Auswahlmöglichkeiten wie Informationstechnologie, Fertigung, Einzelhandel und Gesundheitswesen hinzu.
- Land/Region - Verwende ein Dropdown-Feld und füge Auswahlmöglichkeiten wie Vereinigte Staaten, Kanada, Australien, Vereinigtes Königreich und Neuseeland hinzu.
- Wie hast du von uns erfahren? - Verwende auch hier das Dropdown-Feld und füge Auswahlmöglichkeiten wie Google, Facebook, LinkedIn usw. hinzu.
Wir haben diese Felder hinzugefügt, um die Formularvorlage weiter zu verbessern und sie für unseren Anwendungsfall relevant zu machen. Schauen wir uns nun an, wie du dein Formular in mehrere Teile aufteilen kannst.
Schritt 3: Teile dein Formular in mehrere Teile auf
Es wird dich freuen zu hören, dass es mit WPForms sehr einfach ist, dein Formular in mehrere Teile aufzuteilen, und es gibt nicht nur eine Methode, das zu tun!
Je nach deinen Anforderungen kannst du entweder das Seitenwechsel-Feld verwenden, um dein Formular aufzuteilen, oder das Lead Forms Addon nutzen. Wir zeigen dir die Schritte für beides!
Methode 1: Füge das Seitenumbruchfeld hinzu, um das Formular zu teilen
Um damit zu beginnen, dein Formular in mehrere Teile aufzuteilen, ziehe das Feld Seitenumbruch von der linken in die rechte Leiste.
Denke daran, dass du das Feld Seitenumbruch genau an der Stelle einfügen musst, an der das Formular geteilt werden soll.
Wenn du das Formular wieder aufteilen willst, wiederholst du die gleichen Schritte. Mit WPForms kannst du so viele Formularseiten erstellen, wie du brauchst.
Du kannst 2-stufige Formulare erstellen oder so weit gehen, wie du willst, aber denke daran, die Dinge einfach zu halten, denn du willst deine Nutzer nicht überfordern.
Sobald du fertig bist, kannst du den mehrseitigen Fortschrittsbalken anpassen, um die Benutzerfreundlichkeit des Formulars zu erhöhen.
Anpassen des Fortschrittsbalkens für mehrseitige Formulare
Mit einem Fortschrittsbalken kannst du die Nutzer über die verschiedenen Abschnitte deines Formulars informieren, damit sie wissen, wie viel sie noch ausfüllen müssen, bevor sie auf Absenden klicken.
WPForms macht es dir super einfach, indem es drei verschiedene Breadcrumb-Anzeigeleisten für mehrstufige Formulare einführt:
- Fortschrittsbalken: Mit dieser Option kann der/die Nutzer/in den Fortschritt des Formulars sehen, während er/sie es ausfüllt, um ihn/sie auf dem Laufenden zu halten.
- Kreise: Mit dieser Option kann dein mehrstufiges Formular auf jeder Seite einen Kreis und den Seitentitel anzeigen.
- Verbindung: Diese Option zeigt die Seitentitel und eine Verbindungsleiste für jeden Abschnitt deines mehrstufigen Formulars an.
Klicke auf den Abschnitt Erste Seitenunterbrechung, um den Fortschrittsbalken und den Seitentitel der ersten Seite deines mehrstufigen Formulars anzupassen. Von hier aus kannst du:
- Wähle den gewünschten Fortschrittsanzeigetyp aus.
- Ändere die Farbe des Seitenindikators nach deinem Geschmack.
- Passe den Seitentitel an, damit die Nutzer wissen, auf welchem Abschnitt des Formulars sie sich befinden (wenn du Circles oder Connectors ausgewählt hast).
Anpassen des Titels der nächsten Seite und des Schaltflächentextes
Du hast den Seitentitel für den ersten Abschnitt des Formulars geändert, aber was ist mit den anderen Abschnitten deines Formulars?
Wie auf der ersten Seite kannst du den Seitentitel für den nächsten Abschnitt ändern, indem du auf das entsprechende Feld für den Seitenumbruch klickst, und sogar die nächste Beschriftung anpassen.
Außerdem kannst du die Option "Vorherige Seite anzeigen" aktivieren, um den Besuchern der Website eine Schaltfläche "Vorherige Seite" anzuzeigen und das Label "Vorherige Seite" nach deinen Wünschen anzupassen.
Auf diese Weise können die Kunden bei Bedarf zur vorherigen Seite deines Formulars zurückkehren, was die Benutzerfreundlichkeit deines Formulars weiter erhöht.
Methode 2: Verwende das Lead Forms Addon, um das Formular zu teilen
Das Feld Page Break funktioniert gut, um das Formular in mehrere Abschnitte aufzuteilen, aber wenn du nach einer Alternative suchst, kannst du das Lead Forms Addon verwenden.
Außerdem ist die Generierung von Leads großartig für die Verwaltung deines kleinen Unternehmens auf WordPress, was mit WPForms ebenfalls möglich ist.
Die Installation des Lead Forms Addons ist ganz einfach. Gehe in deinem WordPress-Dashboard zu WPForms und klicke dann auf Addons.
Danach suchst du im Abschnitt Addons suchen nach "Lead Forms". Klicke dann auf Addon installieren und anschließend auf die Schaltfläche Aktivieren.
Aktiviere den Lead Form Modus im Form Builder
Sobald das Lead Forms Addon installiert und aktiviert ist, kehrst du zum Formular-Builder zurück, wo du dein Formular erstellst.
Klicke dort auf die Registerkarte Einstellungen und wähle dann die Option Leadformulare. Jetzt musst du nur noch die Option "Lead-Formular-Modus aktivieren " einschalten.
Daraufhin erscheint ein Popup, das dich darüber informiert, dass das Lead Forms Addon dein Formular umstrukturieren wird. Klicke auf die Schaltfläche " Leadformulare aktivieren ".
Deine Felder werden nun automatisch in ein Lead-Formular umgewandelt. Wenn du nicht sehr viele Felder hast, dauert das normalerweise nur ein paar Sekunden.
Dein Formular wird nun automatisch in zahlreiche Abschnitte unterteilt. Du kannst die Felder nach Belieben hinzufügen, ändern und anordnen.
Anpassen der Einstellungen für das Lead-Formular
Eines der besten Dinge am Lead Forms Addon ist, dass du das Aussehen deines Formulars im Frontend anpassen kannst.
Auf der Einstellungsseite von Lead Forms findest du alle Anpassungsoptionen. Im Folgenden gehen wir auf die verfügbaren Anpassungsmöglichkeiten ein.
- Lead-Formular-Titel: Du kannst deinem Lead-Formular einen Titel geben, indem du ihn in das Feld Lead-Formular-Titel eingibst. Wenn die Nutzer dein Formular ausfüllen, wird der Titel im Frontend angezeigt.
- Akzentfarbe: Mit dieser Option kannst du die Farbe deiner Schaltflächen, des Fortschrittsbalkens und der Symbole mithilfe eines interaktiven Farbauswahlwerkzeugs ändern.
- Scroll-Animation: Wenn diese Option aktiviert ist, navigiert WPForms den Benutzer an den Anfang der Seite, wenn er auf die Schaltfläche Weiter im Formular klickt.
Dein Lead-Formular kann mit Hilfe von zusätzlichen Einstellungen weiter angepasst werden. Um auf diese Optionen zuzugreifen, musst du die erweiterten Stileinstellungen aktivieren.
Es gibt auch eine Formular-Container-Option, die du aktivieren kannst, um das Lead-Formular in einen Container einzuschließen, damit es sich von den anderen Elementen der Seite abhebt.
Wenn du dein mehrstufiges Formular so angepasst hast, dass es alle von dir gewünschten Funktionen enthält, vergiss nicht, auf die Schaltfläche Speichern zu klicken.
Du kannst auch ein mehrstufiges Formular verwenden, um neue Leads zu gewinnen und deine E-Mail-Liste zu erweitern. In dieser Anleitung erfährst du, wie du eine Lead-Magnet-Seite mit WPForms erstellst!
Schritt 4: Anpassungen von Benachrichtigungen und Bestätigungen
Die Konfiguration von Benachrichtigungen garantiert, dass du immer über neue Formulareinträge auf dem Laufenden bist. Gehe im Form Builder zu Einstellungen und dann zu Benachrichtigungen.
Von hier aus kannst du die Standardeinstellungen für die Benachrichtigung bearbeiten, z. B. die Betreffzeile, oder die Empfänger-E-Mails nach Bedarf ändern.
Wenn du das getan hast, navigiere einfach zu Bestätigungen im Menü Einstellungen, um Antworten für erfolgreiche Formularübertragungen einzurichten.
Wähle nun den Bestätigungstyp (Nachricht, Seitenanzeige oder Weiterleitung), der für deine Website am besten geeignet ist, und konfiguriere die Optionen.
Bitte denke daran, dein Formular erneut zu speichern, damit keine Änderungen verloren gehen und deine Einstellungen aktualisiert werden.
Schritt 5: Veröffentliche dein mehrstufiges WordPress-Formular
Gut gemacht! Du hast erfolgreich ein mehrstufiges Formular in WordPress erstellt. Jetzt ist es an der Zeit, das Formular live zu schalten und zu sehen, wie die Anmeldungen eintrudeln!
Der Vorgang ist unglaublich einfach und du musst den Form Builder nicht einmal verlassen. Klicke einfach auf die Schaltfläche Einbetten in der oberen rechten Ecke.
Du kannst wählen, ob du das Formular auf einer bestehenden Seite veröffentlichen oder eine neue Seite erstellen möchtest, woraufhin du zum WordPress-Block-Editor weitergeleitet wirst.
Das Formular wird bereits eingebettet sein. Jetzt musst du nur noch auf die Schaltfläche Veröffentlichen klicken, und dein mehrstufiges WordPress-Formular ist live!
Wenn du einen Page Builder wie Divi verwendest, kannst du auch in diesem Leitfaden nachlesen, wie du ein Divi-Kontaktformular erstellst.
Weitere Fragen zu mehrstufigen Formularen
WordPress-Mehrschrittformulare sind ein beliebtes Thema bei unseren Lesern. Hier findest du Antworten auf einige Fragen zu diesen Formularen.
Was ist ein mehrstufiges Formular?
Ein mehrstufiges Formular unterteilt ein Formular in mehrere Schritte oder Seiten und verbessert die Benutzerfreundlichkeit, indem es längere Formulare in überschaubare Abschnitte unterteilt. Dies ist ideal für komplexe Formulare wie Bewerbungen, Umfragen oder Registrierungen. WPForms vereinfacht die Erstellung von mehrstufigen Formularen mit dem Feld Seitenwechsel, das den Nutzern eine einfache Navigation ermöglicht.
Kann ein mehrstufiges Formular meine Website verlangsamen?
Nein, ein mehrstufiges Formular wird deine Website nicht verlangsamen. WPForms, insbesondere das Lead Forms Addon, optimiert diese Formulare für Geschwindigkeit und Leistung und stellt sicher, dass sie schnell geladen werden, ohne die Gesamtgeschwindigkeit deiner Website zu beeinträchtigen.
Wann sollte ich ein mehrstufiges Formular verwenden?
Verwende ein mehrstufiges Formular, wenn du lange oder detaillierte Formulare hast. Sie eignen sich perfekt für Registrierungen, Umfragen oder Anwendungen, bei denen du viele Informationen erfassen musst, den Nutzer aber nicht auf der Zielseite überfordern willst. Mit WPForms kannst du effizient mehrstufige Formulare erstellen und so die Nutzeraktivität erhöhen.
Welche Formulartypen werden im mehrstufigen Layout besser umgesetzt?
Formulare, die detaillierte Informationen erfordern, wie z. B. Bewerbungen, komplexe Umfragen und langwierige Anmeldungen, werden mit einem mehrstufigen Layout besser konvertiert. Dieses Format, das sich mit WPForms leicht erstellen lässt, hält die Nutzer/innen bei der Stange und verringert das Gefühl, von einem langen Formular überwältigt zu werden, was die Konversionsraten erhöht.
Als Nächstes erfährst du, wie du ein Taschenrechner-Formular in WordPress erstellst.
Willst du lernen, wie du in WordPress ein Taschenrechnerformular erstellen kannst, um das Engagement der Nutzer auf deiner Website zu erhöhen? Dann hast du Glück! Dank WPForms und dem Calculations Addon ist es schnell und einfach, ein benutzerdefiniertes Formular für einen Taschenrechner zu erstellen.
Wenn du dich fragst, wie du Nutzer/innen dazu bringen kannst, ein Formular auszufüllen, in dem sie ihre E-Mail-Adresse angeben müssen, um eine Datei herunterladen zu können, dann ist auch das möglich. Sieh dir diesen Leitfaden an: Wie du eine E-Mail-Adresse für den Download einer Datei verlangst.
Repariere deine WordPress-E-Mails jetzt
Bist du bereit, deine E-Mails zu verbessern? Starten Sie noch heute mit dem besten WordPress SMTP-Plugin. Wenn du keine Zeit hast, deine E-Mails zu reparieren, kannst du gegen Aufpreis eine umfassende White Glove Setup-Unterstützung erhalten und es gibt eine 14-tägige Geld-zurück-Garantie für alle kostenpflichtigen Angebote.
Wenn dir dieser Artikel geholfen hat, dann folge uns bitte auf Facebook und Twitter für weitere WordPress-Tipps und -Anleitungen.
