So fügen Sie ein mehrstufiges Formular in WordPress in 5 einfachen Schritten hinzu

Wussten Sie, dass die Umwandlung Ihres einstufigen WordPress-Formulars in ein mehrstufiges WordPress-Formular Ihre Konversion um fast 60 % steigern kann ? In einigen Fällen kann die Conversion-Rate sogar bis zu 300 % erreichen .

Ja. Denn heutzutage sind die Menschen zu beschäftigt und haben eine kurze Aufmerksamkeitsspanne. Wenn Sie sie darüber hinaus bitten, ein einstufiges Langformular auszufüllen, verlassen sie höchstwahrscheinlich Ihre Website und hinterlassen das Formular unvollständig.

Sie können dieses Szenario jedoch ändern, indem Sie ein mehrstufiges Formular für Ihre WordPress-Site verwenden. Aber die Frage ist wie?

Nun, deshalb bin ich hier, um Ihnen eine Schritt-für-Schritt-Anleitung zu zeigen, wie Sie ein mehrstufiges Formular in WordPress hinzufügen.

Lesen Sie weiter, um herauszufinden, wie Sie in nur wenigen Minuten ganz einfach ein mehrstufiges Formular auf einer WordPress-Website erstellen können ….

Was ist ein mehrstufiges Formular?

Nun, wie der Name schon sagt, handelt es sich um ein Formular mit mehreren Schritten, bei dem Fragen/Eingabefelder in verschiedene Schritte unterteilt sind, anstatt alles in nur einem Schritt zu fassen. Wenn Sie nach einer Definition suchen, finden Sie hier, wie HubSpot das mehrstufige Formular definiert.

Ein mehrstufiges Formular ist ein langes Formular, das in mehrere Teile unterteilt ist. Sie werden verwendet, um lange Formulare weniger einschüchternd und einschüchternd zu machen.

– Hubspot

Mehrstufige Formulare sind im Grunde ein Ersatz für lange Formulare mit zu vielen Eingabefeldern. Wenn Sie ein vergleichsweise kleineres Formular haben, können Sie sich an ein Ein-Schritt-Formular halten.

Nachdem Sie nun wissen, was ein mehrstufiges Formular ist, schauen wir uns einige der Gründe an, warum Sie erwägen sollten, Ihrer WordPress-Site ein mehrstufiges Formular hinzuzufügen.

Warum mehrstufiges Formular in WordPress verwenden?

Nun, die einfache Antwort ist, Ihre Konversionsrate in die Höhe zu treiben. Mehrstufige Formulare werden heutzutage auf Websites mit Verwendungen wie Registrierungsformularen, Buchungsformularen, Essensbestellformularen usw. äußerst beliebt. Einige der Gründe, warum Sie auch die Verwendung des mehrstufigen Formulars auf Ihrer Website in Betracht ziehen sollten, sind:

• Mehrstufige Formulare funktionieren besser, wenn es darum geht, die Aufmerksamkeit des Benutzers zu erregen. Infolgedessen engagieren sich die Menschen mehr und füllen ihre Formularübermittlung häufiger aus.
• Benutzer finden Multistep benutzerfreundlicher und einfacher zu handhaben als ein langes One-Step-Formular.
• Da es eine Navigationsleiste/Fortschrittsleiste mit einem mehrstufigen Formular gibt, fühlen sich die Benutzer eher ermutigt, ein mehrstufiges Formular auszufüllen.
• Bedingte mehrstufige Formulare eignen sich hervorragend, um nur relevante Daten zu sammeln, die Sie benötigen.
• Aufgrund all der oben genannten positiven Seiten erhöhen mehrstufige Formulare die Konversionsrate.

Jetzt, da Sie wissen, dass Sie mehrstufige Formulare auf der WordPress-Site verwenden sollten, ist es an der Zeit, das perfekte Setup zu erstellen, das Sie zum Erstellen Ihres mehrteiligen Formulars benötigen.

Sie müssen ein mehrstufiges WordPress-Formular erstellen

Zusammen mit WordPress benötigen Sie zwei weitere Plugins, um mühelos mehrstufige Formulare in WordPress zu erstellen. Diese WordPress-Plugins sind:

1. Elementor (Freie Version)
2. MetForm (Kostenlos und Pro)

Elementor ist der beste WordPress-Seitenersteller und MetForm ist eines der am schnellsten wachsenden mehrstufigen WordPress-Formular-Plugins. Wenn Sie Hilfe bei der Installation von MetForm benötigen, können Sie sich unsere Dokumentation zur Installation von MetForm ansehen.

Sobald Sie mit der Installation fertig sind, müssen Sie eine Seite mit dem Elementor-Seitenersteller erstellen, bevor Sie Metform verwenden können. Gehen Sie dazu zu Dashboard ⇒ Seite ⇒ Neu hinzufügen .

Geben Sie nun einen passenden Titel ein, wählen Sie Element oder Volle Breite als Vorlage aus, klicken Sie auf Veröffentlichen . Klicken Sie danach auf Mit Elementor bearbeiten.

Schließlich können Sie Ihr mehrstufiges Formular erstellen. Kommen wir also zum Hauptprozess.

Hinweis: In diesem Tutorial zeige ich Ihnen, wie Sie einer Seite ein mehrstufiges Formular hinzufügen. Sie können aber auch mit MetForm erstellte Formulare einfach in einem modalen Popup hinzufügen.

So erstellen Sie ein mehrstufiges Formular in WordPress

In diesem Blog erfahren Sie, wie Sie in nur 5 einfachen Schritten ein modern aussehendes mehrstufiges Formular von Grund auf neu erstellen:

Schritt 1: MetForm ziehen und ablegen

Sobald Sie sich im Modus „ Mit Elementor bearbeiten “ befinden, suchen Sie nach MetForm und ziehen Sie es per Drag-and-Drop an die Stelle, an der das Formular angezeigt werden soll.

Schritt 2: Erstellen Sie ein neues Formular

Klicken Sie auf den Formularabschnitt, um zu den Optionen zum Bearbeiten von MetForm zu gelangen. Klicken Sie auf die Schaltfläche Formular bearbeiten .

Sobald ein neues Fenster erscheint

• Wählen Sie Neu (neues Formular erstellen)
• Geben Sie einen Formularnamen für das Formular an
• Wählen Sie die leere Vorlage,
• und klicken Sie auf das Formular bearbeiten

Schritt 3: Erstellen Sie ein mehrstufiges Formular von Grund auf neu mit MetForm und Elementor Page Builder

Sobald Sie auf Formular bearbeiten klicken, erhalten Sie Zugriff auf ein weiteres neues Fenster mit Elementor Page Builder, um Ihr Formular von Grund auf neu zu erstellen. Um einen einzelnen Schritt eines mehrstufigen Formulars zu erstellen, müssen Sie diese vier Schritte befolgen:

Fügen Sie einen brandneuen Abschnitt hinzu

Drag-and-Drop-Eingabefelder nach Bedarf

Drag-and-Drop-Schaltfläche „Zurück/Weiter/Senden“ je nach Wortlaut des Formulars

Geben Sie dem Abschnitt einen richtigen Namen

Für diesen Blog werde ich eine Demo des mehrstufigen Hotelbuchungsformulars in 3 Schritten erstellen, indem ich die oben genannten Schritte verwende. Die drei Schritte des Formulars umfassen persönliche Informationen, Buchungsinformationen und zusätzliche Informationen

Buchungsformular Schritt Eins – Persönliche Informationen:

• Klicken Sie für den Abschnitt Persönliche Informationen auf das Symbol Elementor + und wählen Sie eine Struktur mit zwei gleichen Spalten .

• Suchen Sie nach dem Texteingabefeld und ziehen Sie das Formularfeld per Drag & Drop in die linke Spalte.

• Um nun das Attribut dieses Eingabefelds zu bearbeiten, klicken Sie auf das Bearbeitungszeichen, gehen Sie zu Inhalt ⇒ Inhalt und bearbeiten Sie die folgenden Optionen:
  • Beschriftung anzeigen: Aktivieren Sie diese Option, um die Beschriftung des Eingabefelds anzuzeigen.
  • Position: Sie können wählen, ob Sie das Etikett oben oder links positionieren möchten.
  • Label: Geben Sie Ihrem Label einen Namen. Ich werde "Vorname" verwenden.
  • Name: Das Namensfeld ist erforderlich und muss eindeutig sein. Achten Sie also darauf, jedem Feld einen anderen Namen zu geben und Leerzeichen durch Unterstrich/Bindestrich zu ersetzen.
  • Platzhalter: Geben Sie einen Platzhaltertext an.
  • Hilfetext: Falls Sie einen Hilfetext für die Benutzer bereitstellen möchten, können Sie dies hier tun.

• Gehen Sie als Nächstes zu Inhalt ⇒ Einstellungen , um die folgenden Optionen zu ändern:
  • Erforderlich: Um dieses Formularfeld zu einem Pflichtfeld zu machen, aktivieren Sie diese Option.
  • Validierungstyp: Sie können verschiedene Validierungstypen für das Textfeld basierend auf Zeichenlänge, Wortlänge und Ausdruck festlegen.
  • Warnmeldung: Hier können Sie die Warnmeldung einstellen, die angezeigt wird, wenn die Anforderung nicht erfüllt ist.

Hinweis: Ich werde die bedingte Logikfunktion im zweiten Schritt dieses Formulars verwenden.

Fügen Sie wie beim Vornamen ein weiteres Texteingabefeld für den Nachnamen hinzu. Als Teil des Schritts der persönlichen Informationen werde ich hier zwei weitere Felder hinzufügen; E-Mail und Handynummer.

Sobald Sie fertig sind, ändern Sie die Einstellungen der Felder E-Mail und Handynummer. Suchen Sie die Schaltfläche „Nächster Schritt“ und ziehen Sie sie per Drag-and-Drop . Sie können verschiedene Schaltflächeneinstellungen wie Beschriftung, Schaltflächenausrichtung, Symbol, Symbolposition usw. ändern.

• Jetzt ist der Abschnitt für den ersten Schritt fertig, um dem ersten Schritt einen richtigen Namen zu geben
  • Klicken Sie auf das Symbol mit den sechs Punkten, um die Einstellungsoption zu öffnen und gehen Sie zu Layout ⇒ Mehrschritt .
  • Geben Sie einen Namen für die Option Titel der mehrstufigen Registerkarte an
  • Wählen Sie ein Symbol aus der Bibliothek oder laden Sie ein SVG hoch.
  • Klicken Sie zum Speichern auf Aktualisieren.

Nachdem der erste Abschnitt fertig ist, bauen wir den zweiten Schritt.

Buchungsformular Schritt 2 – Buchungsinformationen:

• Für den zweiten Schritt müssen Sie einen neuen Abschnitt auswählen. Ich werde einen neuen Abschnitt mit einer einzelnen Spalte auswählen und dann einen neuen inneren Abschnitt mit zwei gleichen Spalten hinzufügen.
• Ziehen Sie nach Auswahl der Spalte per Drag & Drop das 2 Datumseingabefeld für die Check-in- und Check-out-Optionen.

Must-Follow-Regel : Sie müssen einen neuen Abschnitt auswählen, um den neuen Schritt zu beginnen , andernfalls wird jedes Eingabefeld, das Sie hinzufügen, dem vorherigen Schritt hinzugefügt. Denken Sie also immer daran, dass neue Schritte einen neuen Abschnitt erfordern, selbst wenn sie das gleiche Layout haben.

• Neben der erwähnten Einstellungsmöglichkeit für das Textfeld erhalten Sie unter Inhalt ⇒ Einstellungen die folgenden Einstellungen für das Eingabefeld Datum
  • Aktuelles Datum als Mindestdatum festlegen: Aktivieren Sie diese Option, um das aktuelle Datum als Mindestdatum festzulegen.
  • Mindestdatum manuell festlegen: Wenn Sie nicht das aktuelle Datum als Mindestdatum festlegen möchten, können Sie das Mindestdatum auch manuell festlegen.
  • Höchstdatum manuell festlegen: Hier können Sie das Höchstdatum festlegen.
  • Datumsliste deaktivieren: Sie können diese Option verwenden, um einige Daten zu deaktivieren. Um ein beliebiges Datum zu deaktivieren, klicken Sie auf die Schaltfläche + ELEMENT HINZUFÜGEN und wählen Sie das Datum aus.
  • Bereich Datumseingabe: Wenn Sie diese Option aktivieren, können Sie Benutzern die Möglichkeit geben, einen Datumsbereich auszuwählen. Aber für dieses Formular werde ich diese Option deaktiviert lassen.
  • Jahreseingabe: Aktivieren Sie diese Option, um ein Jahr als Teil der Datumseingabe zu verwenden.
  • Monatseingabe: Um den Monat als Teil der Datumseingabe zu aktivieren, aktivieren Sie diese Option.
  • Datumseingabe: Aktivieren Sie diese Option, um ein Datum (Tag) als Teil der Datumseingabe zu übernehmen
  • Datumsformat: Stellen Sie hier das Format der Datumseingabe ein.
  • Lokalisierung: Wählen Sie den Standort aus der Dropdown-Liste nach Ihren Wünschen aus.
  • Möchten Sie Zeit damit eingeben: Aktivieren Sie diese Option, um Zeit zusammen mit Daten als Eingabe zu verwenden. Wenn Sie diese Option aktivieren, erhalten Sie eine weitere Option, nämlich Zeit 24 Stunden aktivieren. Mit dieser Option können Sie das 24-Stunden-Format aktivieren.

Jetzt werden wir endlich die bedingte Formularfunktion für das Check-out-Feld verwenden. Um das Check-out-Feld nur sichtbar zu machen, wenn das Check-in-Feld leer ist,

• Kopieren Sie den Wert des Felds Name des Eingabefelds Check-in.
• Gehen Sie dann zu Content ⇒ Conditional , aktivieren Sie die Option enable
• Wählen Sie UND aus der Dropdown-Liste Bedingungsübereinstimmungskriterien aus.
• Wählen Sie in den Dropdown-Optionen Aktion die Option Dieses Feld anzeigen aus .
• Klicken Sie auf + ELEMENT HINZUFÜGEN , fügen Sie im Eingabefeld „Wenn“ den kopierten Wert des Check-in-Feldnamens ein.
• Wählen Sie „ nicht leer “ aus der Dropdown-Liste von Match (Vergleich).

Klicken Sie nun auf die Vorschau-Schaltfläche, um sie anzuzeigen. Das Check-out-Feld sollte nur sichtbar sein, wenn Sie ein Check-in-Datum ausgewählt haben.

Fügen Sie einen neuen inneren Abschnitt hinzu , damit das Formular nicht schlecht aussieht, wenn die bedingte Option das Auschecken anfänglich ausblendet. Ziehen Sie das Formularfeld Nummer zweimal per Drag & Drop , um zwei weitere Felder für die Anzahl der Zimmer und die Anzahl der Personen zu erstellen.

Und da es sich um den mittleren Schritt handelt, müssen wir sowohl Prev- als auch Next-Buttons einfügen .

Wenn Sie mit der Bearbeitung der Einstellungen für alle hinzugefügten Felder für diesen Abschnitt fertig sind, ändern Sie den Abschnitts-/Schrittnamen von Layout ⇒ Multistep , genau wie Sie es beim ersten Abschnitt getan haben. Ich nenne es Buchungsinformationen.

Jetzt ist der zweite Schritt fertig, gehen wir zum dritten Schritt über

Buchungsformular Schritt Drei – Zusätzliche Informationen

Lassen Sie uns im dritten Schritt einen neuen Abschnitt mit einer einzelnen Spalte hinzufügen. Fügen Sie ein Textfeld hinzu und nennen Sie es Zusätzliche Informationen.

Fügen Sie als Nächstes einen inneren Abschnitt mit zwei Spalten innerhalb des Abschnitts hinzu. Ziehen Sie danach eine Zurück-Schaltfläche und dann eine Senden-Schaltfläche zum Senden des Formulars per Drag & Drop .

Hinweis: Sie können beliebig viele innere Abschnitte hinzufügen. Um jedoch einen neuen Schritt zu erstellen, müssen Sie einen neuen Abschnitt hinzufügen.

Um dem dritten Abschnitt einen Namen zu geben, gehen Sie zu Layout ⇒ Mehrschritt und fügen Sie den Titel „ Zusätzliche Informationen “ und ein Symbol hinzu.

Endlich sind wir damit fertig, unser mehrstufiges WordPress-Formular mit 3 Schritten zu erstellen. Klicken Sie nun auf Aktualisieren, um zu speichern und das Fenster zu schließen, um zu den mehrstufigen Einstellungen zu gelangen.

Schritt 4: Aktivieren Sie die Multi Step Form Option von MetForm

Jetzt, da wir unser Formular haben, ist es an der Zeit, es in ein funktionierendes mehrstufiges Formular umzuwandeln. Dazu

• Gehen Sie zu Inhalt ⇒ Mehrstufige Einstellungen
• Schalten Sie die Option Mehrschritt aktivieren ein, um die Mehrschrittoptionen zu aktivieren
• Aktivieren Sie die Mehrschritt-Navigation anzeigen, damit das Abschnittsmenü oben angezeigt wird. Sie können auch die verschiedenen Einstellungen wie Höhe des Containers für adaptive Formulare, Nach oben scrollen aktivieren usw. bearbeiten.
• Nachdem Sie alle Änderungen vorgenommen haben, klicken Sie zum Speichern auf Aktualisieren

Schritt 5: Konfigurieren Sie Bestätigung, Benachrichtigung und andere Einstellungen zum Abschließen

Nun, da Sie Ihr mehrstufiges Formular entworfen haben. Lassen Sie uns alle Formulareinstellungen konfigurieren, die MetForm zu bieten hat. Um die MetForm-Einstellungen über das WordPress-Dashboard zu ändern, gehen Sie zu MetForm ⇒ Formulare ⇒ Klicken Sie auf die Option Bearbeiten des Formulars, das Sie gerade erstellt haben.

Hinweis: Hier finden Sie auch den Shortcode des von Ihnen erstellten Formulars , den Sie einfach kopieren und einfügen, um Ihr Formular überall auf der Website hinzuzufügen. Sie können auch über die Option Formular bearbeiten auf die Formulareinstellungen zugreifen.

Hier finden Sie folgende Einstellungen:

Allgemein:

Als Teil der allgemeinen Einstellungen können Sie den Titel, die Erfolgsmeldung, die erforderliche Anmeldung, die Anzahl der Aufrufe usw. ändern. Sie können auch eine beliebige benutzerdefinierte URL festlegen, auf der Benutzer nach dem Absenden des Formulars landen sollen.

Bestätigung:

Mit diesem Form-Builder-Plugin können Sie Ihren Benutzern eine Bestätigungs-E-Mail mit einer Kopie ihres übermittelten Formulars senden. Aktivieren Sie die Bestätigungsoption und dann können Sie E- Mail-Betreff, E-Mail von, Von E-Mail, E-Mail-Antwort an und Dankesnachricht festlegen.

Benachrichtigungseinstellungen:

Sie können mit MetForm auch Formularbenachrichtigungs-E-Mails an den Administrator senden. Aktivieren Sie die Option Benachrichtigungsmail an den Administrator. Legen Sie dann den E- Mail-Betreff, E-Mail an, E-Mail von, Admin-Notiz usw. fest.

Nachdem Sie alle Änderungen vorgenommen haben, scrollen Sie nach unten und klicken Sie auf Änderungen speichern, um die Einstellungen zu aktualisieren.

Abgesehen von den Einstellungen, die ich in diesem Blog behandelt habe, erhalten Sie auch Integrationen wie REST API, Mail Chimp, Google Sheet usw. Auch Zahlungsgateway-Integration wie PayPal, Stripe. CRM-Integration, die HubSpot, Zoho usw. umfasst. Sie erhalten auch Authentifizierungsoptionen wie Anmeldung und Registrierung . Weitere Einzelheiten zu diesen Einstellungen finden Sie in unserer Dokumentation zu MetForm.

Wenn Sie die genannten Schritte korrekt befolgt haben, sollten Sie ein mehrstufiges Buchungsformular wie das folgende erhalten:

Einpacken

Dort haben Sie in wenigen Minuten Ihr WordPress-Mehrschrittformular erstellt. Wenn Sie denken, dass dieses Formular einfach ist, dann machen Sie sich keine Sorgen. Der Hauptzweck dieses Blogs war es zu zeigen, wie Sie mit MetForm ein mehrstufiges Formular in WordPress erstellen können.

Nachdem Sie nun wissen, wie Sie ein mehrstufiges WordPress-Formular erstellen, können Sie Ihr benutzerdefiniertes Formular und Ihre eigene Logik erstellen. Ich hoffe, Sie nutzen MetForm-Funktionen, um wunderbare mehrstufige Formulare zu erstellen. Falls Sie unterwegs auf Probleme stoßen, teilen Sie uns dies mit, unser Team wird so schnell wie möglich antworten.

Vergessen Sie nicht, alle erstaunlichen Funktionen zu überprüfen, die MetForm zu bieten hat.