So erstellen Sie ein mehrstufiges Formular in WordPress: 2 einfache Methoden

Möchten Sie, dass die Kontaktaufnahme Ihrer Website-Besucher mit einem mehrstufigen Formular zu einer positiveren Erfahrung wird?

Indem Sie Ihr Formular in verschiedene Abschnitte aufteilen, können Sie Formular-Müdigkeit bekämpfen und das Benutzerengagement und die Lead-Generierung auf Ihrer Website steigern.

In diesem Leitfaden führen wir Sie durch die Grundlagen der Einrichtung eines mehrstufigen Formulars in WordPress mit WPForms über 2 verschiedene Methoden.

So erstellen Sie ein mehrstufiges Formular in WordPress

Das Erstellen eines mehrstufigen Formulars in WordPress mit WPForms ist unglaublich einfach. Befolgen Sie einfach die nachstehenden Schritte:

Schritt 1: Installieren Sie ein Plugin zum Erstellen mehrstufiger Formulare

Wenn Sie nach einem Plugin zum Erstellen von Formularen suchen, mit dem Sie mehrstufige Formulare, Rechner und andere Arten von Formularen erstellen können, suchen Sie nicht weiter als WPForms. Es bietet zahlreiche Funktionen, die die Erstellung eines benutzerdefinierten Formulars unglaublich einfach machen.

Für dieses Tutorial empfehlen wir die Anmeldung für WPForms Pro, da es viele Funktionen wie Seitenumbrüche, das Lead Forms Addon, bedingte Logik und anpassbare Vorlagen bietet, die die Erstellung eines mehrstufigen Formulars sehr einfach machen.

Sobald Sie die WPForms Pro-Lizenz erworben haben, müssen Sie nur noch das Plugin auf Ihrer Website aktivieren und installieren. Schritt-für-Schritt-Anleitungen dazu finden Sie in dieser Anleitung zur Installation eines WordPress-Plugins.

Schritt 2: Erstellen Sie Ihr Formular und fügen Sie relevante Felder hinzu

Lassen Sie uns nun Ihr mehrstufiges Formular in WordPress erstellen. Navigieren Sie in Ihrem Dashboard einfach zu WPForms und klicken Sie auf die Schaltfläche Neu hinzufügen.

Benennen Sie auf der nächsten Seite Ihr Formular. Für dieses Tutorial nennen wir unseres „WordPress Multi-Step Form“.

Danach können Sie entweder mit der Schaltfläche Leeres Formular erstellen von Grund auf neu mit dem Erstellen Ihres Formulars beginnen oder Felder zu einer vorhandenen Vorlage hinzufügen.

Um Zeit zu sparen und mit dem Hinzufügen relevanter Felder zu unserem Formular fortzufahren, wählen wir die Simple Contact Form und klicken dann auf die Schaltfläche Vorlage verwenden.

Nachdem Sie auf die Schaltfläche „Vorlage verwenden“ geklickt haben, werden Sie zum Formular-Generator weitergeleitet. Auf der linken Seite sehen Sie alle verfügbaren Felder.

Auf der rechten Seite des Bildschirms sehen Sie eine bearbeitbare Vorschau Ihres Formulars, in der Sie andere Felder nach Belieben per Drag & Drop verschieben können.

Mit der Vorlage „Simple Contact Form“ haben Sie bereits die Formularfelder Name, E-Mail und Kommentar oder Nachricht.

Klicken Sie auf eines der Formularfelder, um Änderungen vorzunehmen oder neue Felder hinzuzufügen, um Ihr Formular anzupassen. Wir haben zum Beispiel Felder hinzugefügt, damit Benutzer Informationen zu folgenden Punkten angeben können:

• Firmenname – Verwendung des Feldes Einzeiliger Text.
• Berufsbezeichnung – Wiederum unter Verwendung des Feldes Einzeiliger Text.
• Website – Verwendung des Feldes Website / URL aus dem Abschnitt Fancy Fields.
• Branche – Verwendung eines Checkbox-Feldes und Hinzufügen von Auswahlen wie Informationstechnologie, Fertigung, Einzelhandel und Gesundheitswesen.
• Land/Region – Verwendung eines Dropdown-Feldes und Hinzufügen von Auswahlen wie Vereinigte Staaten, Kanada, Australien, Vereinigtes Königreich und Neuseeland.
• Wie sind Sie auf uns aufmerksam geworden? – Wieder einmal verwenden Sie das Dropdown-Feld und fügen Auswahlen 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 Sie Ihr Formular in mehrere Teile aufteilen.

Schritt 3: Teilen Sie Ihr Formular in mehrere Teile auf

Sie werden erfreut sein zu wissen, dass das Aufteilen Ihres Formulars in mehrere Teile mit WPForms sehr einfach ist, und Sie haben nicht nur eine Methode dafür!

Abhängig von Ihren Anforderungen können Sie entweder das Feld Seitenumbruch verwenden, um Ihr Formular aufzuteilen, oder das Lead Forms Addon. Wir zeigen Ihnen die Schritte für beides!

Methode 1: Hinzufügen des Seitenumbruchfelds zum Aufteilen des Formulars

Um damit zu beginnen, Ihr Formular in mehrere Teile aufzuteilen, ziehen Sie das Feld Seitenumbruch vom linken Bereich in den rechten Bereich.

Denken Sie daran, dass Sie das Feld Seitenumbruch an der genauen Stelle einfügen müssen, an der das Formular aufgeteilt werden soll.

Wenn Sie das Formular erneut aufteilen möchten, wiederholen Sie die gleichen Schritte. WPForms ermöglicht es Ihnen, so viele Formularseiten zu erstellen, wie Sie benötigen.

Sie können 2-stufige Formulare erstellen oder beliebig viele Schritte hinzufügen, aber denken Sie daran, die Dinge einfach zu halten, damit Sie Ihre Benutzer nicht überfordern.

Sobald Sie fertig sind, können Sie die Fortschrittsleiste für mehrere Seiten anpassen, um die Benutzerfreundlichkeit des Formulars zu erhöhen.

Anpassen der Fortschrittsleiste für mehrseitige Formulare

Mithilfe einer Fortschrittsleiste können Sie den Benutzern die verschiedenen Abschnitte Ihres Formulars anzeigen lassen, damit sie wissen, wie viel sie noch ausfüllen müssen, bevor sie auf "Senden" klicken.

WPForms macht Ihnen die Sache sehr einfach, indem es drei verschiedene Indikatorleisten im Breadcrumb-Stil für mehrstufige Formulare einführt:

• Fortschrittsleiste: Diese Option ermöglicht es dem Benutzer, den Fortschritt des Formulars während des Ausfüllens zu sehen, um ihn auf dem Laufenden zu halten.
• Kreise: Diese Option ermöglicht es Ihrem mehrstufigen Formular, auf jeder Seite einen Kreis und den Seitentitel anzuzeigen.
• Verbinder: Diese Option zeigt die Seitentitel und eine Verbindungslinie für jeden Abschnitt Ihres mehrstufigen Formulars an.

Klicken Sie auf den Abschnitt Erste Seite des Seitenumbruchs, um die erste Seite der Fortschrittsleiste und den Seitentitel Ihres mehrstufigen Formulars anzupassen. Von hier aus können Sie:

• Wählen Sie den gewünschten Fortschrittsanzeigetyp.
• Ändern Sie die Farbe des Seitenindikators nach Ihren Wünschen.
• Passen Sie den Seitentitel an, damit die Benutzer verstehen, auf welchem Abschnitt des Formulars sie sich befinden (wenn Sie Kreise oder Verbinder ausgewählt haben).

Anpassen des Titels der nächsten Seite und des Schaltflächentextes

Sie haben den Seitentitel für den ersten Abschnitt des Formulars geändert, aber was ist mit den anderen Abschnitten Ihres Formulars?

Wie bei der ersten Seite können Sie den Seitentitel für den nächsten Abschnitt ändern, indem Sie auf das entsprechende Feld Seitenumbruch klicken, und sogar dessen Nächstes Label anpassen.

Außerdem können Sie die Option Vorherige anzeigen aktivieren, um Besuchern Ihrer Website eine Schaltfläche für die vorherige Seite anzuzeigen, und sogar die Beschriftung für vorherige Seite nach Ihren Wünschen anpassen.

Auf diese Weise können Kunden bei Bedarf zur vorherigen Seite Ihres Formulars zurückkehren, was die Benutzerfreundlichkeit Ihres Formulars weiter verbessert.

Methode 2: Verwenden Sie das Lead Forms Addon, um das Formular aufzuteilen

Das Feld „Seitenumbruch“ eignet sich gut, um das Formular in zahlreiche Abschnitte zu unterteilen. Wenn Sie jedoch nach einer Alternative suchen, können Sie das Lead Forms Addon verwenden.

Außerdem ist die Lead-Generierung hervorragend für die Verwaltung Ihres kleinen Unternehmens auf WordPress geeignet, was mit WPForms ebenfalls problemlos möglich ist.

Die Installation des Lead Forms Addons ist sehr einfach. Gehen Sie in Ihrem WordPress-Dashboard zu WPForms und klicken Sie dann auf Addons.

Suchen Sie anschließend im Abschnitt Addons durchsuchen nach „Lead Forms“. Klicken Sie dann auf Addon installieren und anschließend auf die Schaltfläche Aktivieren.

Lead Form-Modus im Formular-Generator aktivieren

Sobald das Lead Forms Addon installiert und aktiviert ist, kehren Sie zum Formular-Generator zurück, in dem Sie Ihr Formular erstellen.

Klicken Sie dort auf die Registerkarte Einstellungen und wählen Sie dann die Option Lead Forms. Jetzt müssen Sie nur noch die Option Lead Form-Modus aktivieren aktivieren.

Daraufhin wird ein Popup angezeigt, das Sie darüber informiert, dass das Lead Forms Addon Ihr Formular neu strukturieren wird. Klicken Sie auf die Schaltfläche Lead Forms aktivieren.

Ihre Felder werden nun automatisch in ein Lead Form umgewandelt. Sofern Sie keine große Anzahl von Feldern haben, dauert dies normalerweise nur wenige Sekunden.

Ihr Formular wird nun automatisch in zahlreiche Abschnitte unterteilt. Sie können Felder nach Belieben hinzufügen, ändern und anordnen.

Stileinstellungen des Lead Forms anpassen

Eines der besten Dinge am Lead Forms Addon ist, dass es Ihnen ermöglicht, das Erscheinungsbild Ihres Formulars im Frontend anzupassen.

Die Einstellungsseite für Lead Forms enthält alle Anpassungsoptionen. Wir werden die verfügbaren Anpassungsoptionen unten erläutern.

• Titel des Lead Forms: Sie können Ihrem Lead Form einen Titel geben, indem Sie ihn in das Feld „Titel des Lead Forms“ eingeben. Wenn Benutzer Ihr Formular ausfüllen, wird der Titel im Frontend angezeigt.
• Akzentfarbe: Mit dieser Option können Sie die Farbe Ihrer Schaltflächen, Fortschrittsleiste und Symbole über ein interaktives Farbauswahlwerkzeug ändern.
• Scroll-Animation: Wenn diese Option aktiviert ist, navigiert WPForms den Benutzer beim Klicken auf die Schaltfläche „Weiter“ im Formular zum Seitenanfang.

Ihr Lead Form kann mit Hilfe zusätzlicher Einstellungen weiter angepasst werden. Sie müssen die Erweiterten Stileinstellungen aktivieren, um auf diese Optionen zuzugreifen.

Es gibt auch eine Option Formularcontainer, die Sie aktivieren können, um das Lead Form in einen Container einzuschließen, wodurch es sich von den übrigen Elementen der Seite abhebt.

Wenn Sie Ihr mehrstufiges Formular mit allen gewünschten Funktionen angepasst haben, vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken.

Sie können auch ein mehrstufiges Formular verwenden, um neue Leads zu erfassen und Ihre E-Mail-Liste zu erweitern. Schauen Sie sich diesen Leitfaden an, wie Sie mit WPForms eine Lead-Magnet-Seite erstellen!

Schritt 4: Passen Sie Benachrichtigungen & Bestätigungen an

Die Konfiguration von Benachrichtigungen stellt sicher, dass Sie immer über neue Formulareinträge auf dem Laufenden gehalten werden. Gehen Sie im Formular-Generator zu Einstellungen und dann zu Benachrichtigungen.

Sie können die Standard-Benachrichtigungseinstellungen bearbeiten, z. B. die Betreffzeile, oder Empfänger-E-Mails von hier aus nach Bedarf ändern.

Sobald Sie fertig sind, navigieren Sie einfach zu Bestätigungen im Menü Einstellungen, um Antworten für erfolgreiche Formularübermittlungen einzurichten.

Wählen Sie nun den Bestätigungstyp (Nachricht, Seitenanzeige oder Weiterleitung), der am besten zu Ihrer Website passt, und konfigurieren Sie dessen Optionen.

Bitte denken Sie daran, Ihr Formular erneut zu speichern, um den Verlust von Änderungen zu vermeiden, und stellen Sie sicher, dass Ihre Einstellungen aktualisiert sind.

Schritt 5: Veröffentlichen Sie Ihr mehrstufiges WordPress-Formular

Großartige Arbeit! Sie haben erfolgreich ein mehrstufiges Formular in WordPress erstellt. Jetzt ist es an der Zeit, es live zu schalten und die Formularübermittlungen hereinrollen zu sehen!

Der Vorgang ist unglaublich einfach und Sie müssen nicht einmal den Formular-Generator verlassen. Klicken Sie einfach auf die Schaltfläche Einbetten in der oberen rechten Ecke.

Sie können das Formular auf einer vorhandenen Seite veröffentlichen oder eine neue Seite erstellen, danach werden Sie zum WordPress-Block-Editor weitergeleitet.

Das Formular wird bereits eingebettet sein. Alles, was Sie jetzt tun müssen, ist auf die Schaltfläche Veröffentlichen zu klicken, und Ihr mehrstufiges WordPress-Formular ist live!

Wenn Sie einen Seiten-Builder wie Divi verwenden, können Sie sich auch diesen Leitfaden ansehen, um Schritte zu erfahren, wie Sie ein Divi-Kontaktformular erstellen.

Weitere Fragen zu mehrstufigen Formularen

Mehrstufige Formulare in WordPress sind ein beliebtes Thema unter unseren Lesern. Hier sind Antworten auf einige Fragen dazu.

Was ist ein mehrstufiges Formular?

Ein mehrstufiges Formular teilt ein Formular in mehrere Schritte oder Seiten auf und verbessert die Benutzererfahrung, indem längere Formulare in überschaubare Abschnitte unterteilt werden. Dies ist ideal für komplexe Formulare wie Bewerbungen, Umfragen oder Registrierungen. WPForms vereinfacht die Erstellung von mehrstufigen Formularen mit seinem Seitenumbruch-Feld, das eine einfache Navigation für Benutzer ermöglicht.

Verlangsamt ein mehrstufiges Formular meine Website?

Nein, ein mehrstufiges Formular verlangsamt Ihre Website nicht. WPForms, insbesondere mit seinem Lead Forms Addon, optimiert diese Formulare für Geschwindigkeit und Leistung und stellt sicher, dass sie schnell geladen werden, ohne die Gesamtgeschwindigkeit Ihrer Website zu beeinträchtigen.

Wann sollte ich ein mehrstufiges Formular verwenden?

Verwenden Sie ein mehrstufiges Formular, wenn Sie lange oder detaillierte Formulare haben. Sie eignen sich perfekt für Registrierungen, Umfragen oder Bewerbungen, bei denen Sie viele Informationen sammeln müssen, aber vermeiden möchten, den Benutzer auf der Landingpage zu überfordern. WPForms ermöglicht eine effiziente Erstellung von mehrstufigen Formularen und verbessert die Benutzerinteraktion.

Welche Arten von Formularen konvertieren im mehrstufigen Layout besser?

Formulare, die detaillierte Informationen erfordern, wie z. B. Bewerbungen, komplexe Umfragen und langwierige Registrierungen, lassen sich mit einem mehrstufigen Layout besser umwandeln. Dieses Format, das einfach mit WPForms erstellt werden kann, hilft dabei, Benutzer zu binden und reduziert das Gefühl der Überforderung durch ein langes Formular, was die Konversionsraten erhöht.

Erfahren Sie als Nächstes, wie Sie ein Rechnerformular in WordPress erstellen

Möchten Sie lernen, wie Sie ein Rechnerformular in WordPress erstellen, um die Benutzerbindung auf Ihrer Website zu erhöhen? Sie haben Glück! Dank WPForms und seines Calculations Addon ist die Erstellung eines benutzerdefinierten Rechnerformulars schnell und einfach.

Wenn Sie sich fragen, wie Sie Benutzer dazu ermutigen können, ein Formular auszufüllen, das ihre E-Mail-Adresse erfordert, um eine Datei herunterzuladen, dann ist auch das möglich. Schauen Sie sich diesen Leitfaden an: So fordern Sie eine E-Mail-Adresse zum Herunterladen einer Datei an.

Beheben Sie jetzt Ihre WordPress-E-Mails

Bereit, Ihre E-Mails zu reparieren? Fangen Sie noch heute an mit dem besten WordPress SMTP-Plugin. Wenn Sie keine Zeit haben, Ihre E-Mails zu reparieren, können Sie gegen Aufpreis eine vollständige White Glove Setup-Unterstützung erhalten, und für alle kostenpflichtigen Tarife gilt eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere WordPress-Tipps und Tutorials.