So erstellen Sie ein mehrstufiges Formular in WordPress

Vor ein paar Tagen fragte mich jemand, wie man mehrstufige Formulare in WordPress erstellt. Ich war auf einer Party, irgendwie in einem Gespräch, das Thema ist entstanden. Ich war gerade nicht in der Stimmung, den Respekt zu erklären, aber da ich mit WordPress arbeite, wollte ich ihn überzeugen und musste ihn irgendwie verständlich machen.

Später beschäftigte ich mich mit dem Thema und dachte darüber nach, einen Tutorial-basierten Post darauf zu schreiben, der anderen helfen könnte, ein mehrstufiges Formular in WordPress zu erstellen. Deshalb versuche ich, dies zu ermöglichen.

Warum mehrstufige Formulare entwerfen?

Ein Formular ist eine der einfachsten Möglichkeiten, Informationen zu sammeln und mit Ihrem Publikum in Kontakt zu treten. Dabei kann es sich um ein einfaches, zwangloses Formular, ein Geschäftsformular oder ein beliebiges Formular im Zusammenhang mit Umfragen handeln.

Lange Formulare sind für Benutzer jedoch manchmal ekelhaft und können letztendlich auch als schlechte UX angesehen werden. Um dieses Problem zu lösen, verwenden fast alle großen Firmen mehrstufige Formulare, die in Abschnitte und Seiten unterteilt sind.

Der Fortschrittsbalken oben auf der Seite bietet den Benutzern mehr Komfort und Kontrolle beim Ausfüllen des Formulars und bietet vor allem eine andere Art der Interaktivität mit Ihren Benutzern. Darüber hinaus erhöht es Ihre Interaktion mit Benutzern schnell.

So erstellen Sie ein mehrseitiges WordPress-Formular mit WP Fluent Form

Ich werde hier WP Fluent Form verwenden, damit Sie es verstehen. WP Fluent Form ist ein schnell wachsendes, benutzerfreundliches WordPress-Formular-Plugin zum Erstellen jeder Art von Formular.

Zunächst müssen Sie das Plugin WP Fluent Form in WordPress installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach Aktivierung des Plugins WP Fluent Forms und Abschluss des Lizenzierungsprozesses haben Sie eine angenehme Umgebung zum Erstellen eines mehrstufigen Formulars auf Ihrer Website.

Ich denke, Sie werden ein mehrstufiges Formular mit drei Schritten erstellen, wie ich es gerade tue. Der erste Schritt ist für die persönlichen Informationen des Benutzers, die zweite Seite für die Bildungsinformationen des Benutzers und die dritte Seite für die Hobbys des Benutzers. Jetzt werde ich Ihnen zeigen, wie Sie dies mit WP Fluent Form erreichen können.

WP Fluent Forms bietet dir über 60 zahlreiche integrierte vorgefertigte Formularvorlagen. Sie können jeden von ihnen mit einem einzigen Klick für den jeweiligen Zweck verwenden. Sobald Sie mit dem Klick fertig sind, sehen Sie, dass automatisch ein entsprechendes Formular erstellt wurde.

Sie können Formulare auch manuell von Grund auf neu erstellen. Um ein Formular von Grund auf neu zu erstellen, gehen Sie einfach zu Fluent Form -> Create a Blank Form , es wird ein Dialogfeld mit drei Standardformularformaten und einer benutzerdefinierten Option zum Erstellen eines neuen Formulars angezeigt.

Weitere Einzelheiten finden Sie unter So erstellen Sie ein neues Formular mit Fluent Forms.

Sobald Sie mit dem Klick auf Create a Blank Form fertig sind, finden Sie einen Formular-Builder, der mit den Konfigurationsoptionen angezeigt wird. In der rechten Seitenleiste finden Sie Eingabefelder zum Ziehen und Ablegen, um die spezifische Funktion zu Ihrem Formular hinzuzufügen.

Nachdem Sie das Formular erstellt haben, müssen Sie nun die erforderlichen Felder in dieses Formular einfügen. Um dies zu ermöglichen, ziehen Sie die gewünschten Felder per Drag & Drop; Beispielsweise werden für persönliche Informationen von Ihnen vier verschiedene Felder in das Formular eingefügt.

Sie haben die Eingabefelder, jetzt müssen Sie auf ein bestimmtes Eingabefeld klicken oder es ziehen und ablegen, um Ihrem Formular eine Funktion hinzuzufügen. Nachdem Sie ein beliebiges Eingabefeld hinzugefügt haben, ändern Sie die Elementbezeichnung für jeden Teil gemäß dem gewünschten Namen. Ich hinterlasse ein paar Screenshots für Ihr besseres Verständnis.

Fügen Sie je nach Bedarf Namensfelder , Adressfelder und E-Mails hinzu . Sie können alle Eingabefelder anpassen und ihre Admin-Feldbezeichnung, Platzhalter, Elementbezeichnung usw. ändern.

Ich füge dem Editor das Dropdown -Eingabefeld vor dem Adressfeld hinzu und nenne es Gender . Im Abschnitt Geschlecht müssen Sie die Optionen für das Dropdown-Menü konfigurieren.

Sie können die Eingabefelder auch einfach per Drag & Drop neu anordnen. Wie Sie im folgenden Bild sehen, ziehe ich das Eingabefeld Geschlecht per Drag & Drop.

Fügen Sie das Eingabefeld Formularschritt hinzu , in dem Sie den ersten Schritt Ihres Formulars abschließen möchten. Dadurch wird in Ihrem mehrstufigen Formular ein Seitenumbruch erstellt. Fügen Sie darunter weitere Felder hinzu, die auf der nächsten Seite erscheinen sollen.

Bewegen Sie nun den Cursor über den Abschnitt Paging Start , dann finden Sie die Option Bearbeiten (ein Stiftsymbol). Klicken Sie darauf und Sie gelangen zur Eingabeanpassung . Dort müssen Sie jedem Schritt einen Titel geben, indem Sie auf die Schaltfläche Fortschrittsbalken klicken.

Notieren Sie sich den Titelnamen für jeden Schritt. Schreiben Sie beispielsweise Persönliche Daten in das Eingabefeld von Schritt 1 . Schreiben Sie Bildung in das Eingabefeld Schritt 2 und so weiter. Werfen Sie nun einen Blick auf den Vorschaubereich.

Das Bild zeigt einen Fortschrittsbalken und eine Weiter -Schaltfläche als Indikator im oberen bzw. unteren Teil des Formulars.

Jetzt müssen Sie die zweite Seite des Formulars bearbeiten, die den Bildungsteil des Formulars angibt. Dazu können Sie das Feld Einfacher Text für Universität & Hochschule zur Eingabe verwenden. Sie müssen das Dropdown -Feld für die Eingabe des Grads im Formular verwenden.

Werfen wir einen Blick auf den Screenshot für jedes einzelne Eingabefeld. Für Universitäten und Hochschulen müssen Sie zuerst die Etiketten anpassen.

Für das Eingabefeld Grad müssen Sie das Dropdown -Eingabefeld verwenden. In diesem Fall müssen Sie zuerst Ihr Etikett anpassen und dann Optionen für die Dropdown-Liste angeben.

Nun gelangen Sie auf die dritte Seite, die sich auf das Hobby des Benutzers bezieht. Um dies zu erreichen, müssen wir erneut Form Step auswählen, um einen Ansatz dafür zu machen.

Ein neues Eingabefeld wird sofort erstellt, nachdem Sie auf das Feld Formularschritt im Abschnitt Paging-Start geklickt haben. Notieren Sie sich den Titelnamen für den dritten Schritt, indem Sie auf die Option „Bearbeiten“ im Abschnitt „Formularschritt“ klicken.

Notieren Sie sich den Titel, indem Sie Hobby in das Eingabefeld eingeben. Gehen Sie dann zum dritten Abschnitt des Formulars. Sie können für jedes Hobby ein einfaches Textfeld auswählen.

Sie müssen es direkt über der Schaltfläche „Formular senden“ ablegen .

Auf diese Weise können Sie im dritten Abschnitt des Formulars zwei weitere einfache Textbereiche verwenden, um eine Gesamtansicht zu erhalten. Passen Sie dann das 'Element Label' mit dem Text von Hobby One an.

Sie müssen den Rest der beiden Felder mit dem Namen Hobby Zwei bzw. Hobby Drei anpassen. Sehen Sie sich dann die Vorschau dieser Schnittstelle an.

Unten auf der Seite können Sie das Feld „ Allgemeine Geschäftsbedingungen “ eingeben, um den gesamten Vorgang abzuschließen. Dann können wir den gesamten Vorgang des Absendens des Formulars durchsehen.

Werfen Sie jetzt einen Blick auf die ultimative Vorschau.

So kannst du mit WP Fluent Form ein mehrstufiges Formular erstellen. Dies ist ziemlich praktisch und effektiv bei der Arbeit mit WP Fluent Form , da es Ihnen die bequemsten Funktionen bietet, um ein mehrstufiges Formular für Ihre spezifischen Zwecke zu erstellen.

Um diese Funktionalität zu nutzen und schöne, kompakte und intuitive mehrstufige Formulare zu erstellen, laden Sie jetzt das WP Fluent Form Pro Add-on herunter!

Abonnieren Sie unseren YouTube-Kanal, um Tipps und Tricks zu WordPress zu erhalten. Folgen Sie uns auch auf Twitter und Facebook.