So erstellen Sie ein mehrstufiges WordPress-Formular mit Fortschrittsbalken

Rifat WordPress-Tutorials Jun 21, 2023

Die Erstellung eines ansprechenden und benutzerfreundlichen Formulars ist ein entscheidender Aspekt für den Erfolg jeder Website, insbesondere wenn es darum geht, wertvolle Informationen zu sammeln oder Leads zu generieren. Ein effektiver Ansatz zur Verbesserung des Benutzererlebnisses und zur Verbesserung der Formularausfüllraten ist die Implementierung eines mehrstufigen Formulars mit einem Fortschrittsbalken. Dieses dynamische Formulardesign gliedert langwierige oder komplexe Prozesse in überschaubare Schritte, führt Benutzer durch jede Phase und gibt ihnen gleichzeitig einen klaren Hinweis auf ihren Fortschritt.

Wenn Sie WordPress-Benutzer sind und daran interessiert sind, diese leistungsstarke Formularfunktion in Ihre Website zu integrieren, sind Sie hier richtig. In dieser Anleitung führen wir Sie durch den Prozess der Erstellung eines mehrstufigen Formulars mit Fortschrittsbalken und nutzen dabei die vielseitigen Funktionen von WordPress.

Indem Sie die Flexibilität von WordPress und sein umfangreiches Ökosystem an Plugins und Tools nutzen, können Sie ganz einfach mehrstufige Formulare erstellen und anpassen, um sie an Ihre spezifischen Anforderungen anzupassen. Ganz gleich, ob Sie Benutzerfeedback einholen, Kundeninformationen sammeln, Umfragen durchführen oder Online-Käufe erleichtern möchten, ein mehrstufiges Formular mit Fortschrittsbalken kann das Benutzererlebnis erheblich verbessern und die Ausfüllraten von Formularen erhöhen.

Bedeutung der mehrstufigen Form

Mehrstufige Formulare erfreuen sich aufgrund ihrer Effektivität bei der Verbesserung des Benutzererlebnisses und der Steigerung der Konversionsraten großer Beliebtheit im Webdesign und in der Webentwicklung. Im Gegensatz zu herkömmlichen einseitigen Formularen unterteilen mehrstufige Formulare komplexe Prozesse in kleinere, besser verwaltbare Abschnitte und führen Benutzer durch eine Reihe aufeinanderfolgender Schritte.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Der Hauptgrund, warum mehrstufige Formulare so beliebt geworden sind, ist ihre Fähigkeit, die Benutzereinbindung und die Abschlussraten zu verbessern. Durch die strukturierte und progressive Darstellung von Informationen verringern diese Formen die kognitive Überlastung und machen das Gesamterlebnis intuitiver und benutzerfreundlicher. Benutzer fühlen sich tendenziell weniger überfordert, wenn sie mit einem langen, einschüchternden Formular konfrontiert werden, was zu höheren Abschlussquoten und weniger Formularabbrüchen führt.

Darüber hinaus bieten mehrstufige Formulare eine hervorragende Möglichkeit, detailliertere und genauere Informationen von Benutzern einzuholen. Durch die Unterteilung des Formulars in logische Abschnitte, die sich jeweils auf bestimmte Details konzentrieren, ist es wahrscheinlicher, dass Benutzer genaue Antworten geben und das gesamte Formular ausfüllen. Dies führt zu einer besseren Datenqualität und ermöglicht es Unternehmen, auf der Grundlage der gesammelten Informationen fundiertere Entscheidungen zu treffen.

Zusätzlich zu den Vorteilen für das Benutzererlebnis können mehrstufige Formulare die Konversionsraten erheblich beeinflussen. Durch die Unterteilung des Konvertierungsprozesses in kleinere Schritte können Unternehmen am Ende jedes Abschnitts überzeugende Calls-to-Action (CTAs) strategisch platzieren. Dieser Ansatz ermöglicht ein besseres Targeting, da die CTAs so angepasst werden können, dass sie sich an den Fortschritt und die Absichten des Benutzers anpassen. Darüber hinaus werden Benutzer durch die Bereitstellung eines Fortschrittsbalkens oder -indikators motiviert, die Schritte fortzusetzen, was die Wahrscheinlichkeit erfolgreicher Konvertierungen erhöht.

Angesichts der Bedeutung mehrstufiger Formulare für die Verbesserung der Benutzererfahrung, die Steigerung der Abschlussraten und die Steigerung der Konversionsraten ist es für Personen, die an der Webentwicklung beteiligt sind, insbesondere in WordPress, von entscheidender Bedeutung, über das Wissen und die Fähigkeiten zum Erstellen solcher Formulare zu verfügen. Durch die Möglichkeit, in WordPress mehrstufige Formulare mit Fortschrittsbalken zu erstellen, können Entwickler und Websitebesitzer ihre Online-Formulare optimieren, was zu einer höheren Benutzerzufriedenheit, höheren Konvertierungen und letztendlich besseren Geschäftsergebnissen führt.

Erstellen Sie ein mehrstufiges Formular mit Fortschrittsbalken in WordPress

Wenn es um die Erstellung eines mehrstufigen Formulars in WordPress geht, ist die Verwendung eines der verfügbaren WordPress-Plugins die einfachste Lösung. Unter den zahlreichen Optionen sticht WPForms als das ultimative Tool für diese Aufgabe hervor und ist damit das beste WordPress-Kontaktformular-Plugin auf dem Markt.

WPForms ist für seinen einsteigerfreundlichen Ansatz bekannt und hat sich bereits auf über 5 Millionen Websites einen Namen gemacht. Mit diesem leistungsstarken Plugin können Sie mühelos WordPress-Formulare für verschiedene Zwecke erstellen, ohne dass eine Programmierung erforderlich ist. Egal, ob Sie benutzerfreundliche Registrierungsformulare, Anmeldeformulare, Umfrageformulare, Datei-Upload-Formulare, Bestellformulare oder Antragsformulare suchen, bei WPForms sind Sie genau richtig.

Dank des intuitiven Drag-and-Drop-Formularerstellers und einer Reihe vorgefertigter Formularvorlagen wird das Erstellen individueller Formulare zum Kinderspiel. Darüber hinaus bietet WPForms praktische Add-ons für beliebte Zahlungsabwickler wie Stripe und PayPal und ermöglicht so eine nahtlose Zahlungsannahme in Ihrem WooCommerce-Shop.

Darüber hinaus lässt sich WPForms nahtlos in führende WordPress-Seitenerstellungs-Plugins wie Elementor, Divi und SeedProd integrieren. Dies gewährleistet eine problemlose Formularanzeige im Frontend Ihrer Website und macht manuelle Codierung oder CSS überflüssig.

Während die kostenlose Version von WPForms für einfache Kontaktformulare ausreicht, schaltet die WPForms Pro- Version erweiterte Funktionen frei. Durch das Upgrade auf WPForms Pro erhalten Sie Zugriff auf Funktionen wie bedingte Logik, Umfrageformulare, erweiterte Formularvorlagen und vor allem mehrstufige Formulare—, die für unser Tutorial unerlässlich sind.

Für diesen Leitfaden verwenden wir die WPForms Pro-Version , die mit allen notwendigen Tools ausgestattet ist, um mühelos mehrstufige Formulare in WordPress zu erstellen.

Erstellen Sie ein neues mehrstufiges Formular in WordPress

Nach der erfolgreichen Installation des WPForms-Plugins können Sie ganz einfach auf seine Funktionen zugreifen, indem Sie in Ihrem WordPress-Dashboard zum Abschnitt „Neu hinzufügen“ von WPForms » navigieren. Durch diese Aktion wird sofort die Seite mit den Formularvorlagen angezeigt, auf der Sie aus verschiedenen Formulartypen auswählen können.

Mit dem WPForms-Plugin lässt sich jedes Formular mühelos in ein mehrstufiges Formular aufteilen. Um diesen Prozess zu verdeutlichen, konzentrieren wir uns auf die Transformation eines Kontaktformulars.

Geben Sie dem neu erstellten Formular zunächst einen Namen und wählen Sie dann die Vorlage „Einfaches Kontaktformular“ aus.


Nach der Auswahl lädt WPForms die gewünschte Vorlage in seinen intuitiven Drag-and-Drop-Formularersteller.

Bei der Betrachtung wird deutlich, dass das grundlegende Kontaktformular bereits Formularfelder für Name, E-Mail und Kommentar oder Nachricht enthält. Mithilfe der Klick-, Drag- und Drop-Funktionalität haben Sie die Flexibilität, die Reihenfolge dieser Felder nach Ihren Wünschen zu ändern.

Darüber hinaus ist die Ergänzung zusätzlicher Textfelder zum Formular mühelos möglich. Dies kann erreicht werden, indem Sie im linken Bereich das gewünschte Textfeld auswählen und es anschließend auf der rechten Seite des Formulars platzieren. Die Kennzeichnung von Pflichtfeldern kann durch Auswahl eines Feldes und Anpassung der entsprechenden Einstellungen erfolgen.

Wenn Sie mit der Anordnung und Auswahl der Felder zufrieden sind, speichern Sie bitte die Änderungen und fahren Sie mit dem nächsten Schritt fort.

Teilen Sie Ihr Formular in mehrere Schritte auf

Um Ihr Formular in verschiedene Phasen zu unterteilen, ist es notwendig, das Formularfeld „Seitenumbruch“ zu verwenden.

Um dies zu erreichen, gehen Sie zum Abschnitt „Ausgefallene Felder“ im linken Bereich und wählen Sie das Feld „Seitenumbruch“ aus. Anschließend ziehen Sie das ausgewählte Feld an die gewünschte Stelle in Ihrem Formular.

Um Ihr Formular an einer bestimmten Stelle zu unterteilen, haben Sie die Möglichkeit, einen Seitenumbruch strategisch zu platzieren.

Bitte befolgen Sie die oben beschriebene Vorgehensweise, um die gewünschten Seitenumbrüche in Ihrem Formular zu implementieren. Anschließend können Sie die entsprechenden Abschnitte durch die Einbindung zusätzlicher Felder erweitern, um den Formularerstellungsprozess abzuschließen.

WPForms bietet Ihnen die Flexibilität, mehrere Formularseiten entsprechend Ihren Anforderungen zu generieren. Dennoch ist es ratsam, Diskretion walten zu lassen und die Besucher Ihrer Website nicht mit zu vielen Formularabschnitten zu überschwemmen. Es wird empfohlen, nur wesentliche Informationsanfragen anzugeben, da zusätzliche Details zu einem späteren Zeitpunkt erfasst werden können.

Passen Sie Ihre Mehrseite über die Fortschrittsleiste an

Um Ihren spezifischen Geschäfts- und Website-Anforderungen gerecht zu werden, können Sie die Implementierung eines Fortschrittsbalkens in Ihren Formularen in Betracht ziehen. Fortschrittsindikatoren dienen dazu, Benutzer über den aktuellen Stand des Formulars zu informieren und abzuschätzen, wie viel Zeit noch zum Ausfüllen des Formulars benötigt wird.

Indem Sie Benutzern den Fortschritt anzeigen, bieten Sie ihnen eine visuelle Darstellung ihres Fortschritts, was sie erheblich motivieren kann, das Formular fertigzustellen und abzusenden. Dieser Ansatz geht effektiv auf die allgemeine Neigung von Einzelpersonen ein, Aufgaben nicht unvollendet zu lassen.


WPForms bietet drei verschiedene Fortschrittsbalken, die in Ihr mehrteiliges Formular integriert werden können. Zu diesen Optionen gehören:

  1. Anschlüsse: Dieser Stil ähnelt einer Brotkrümelleiste, die die verschiedenen Abschnitte Ihres Formulars durch eine Reihe von Balken mit den entsprechenden Seitentiteln visuell verbindet.
  2. Kreise: Diese Alternative besteht aus einzelnen Kreisen, die jeweils mit dem Titel des jeweiligen Formularschritts beschriftet sind. Benutzer können ihren Fortschritt leicht verfolgen, indem sie die ausgefüllten Kreise beobachten.
  3. Fortschrittsbalken: Bei dieser Option wird ein teilweise farbiger Balken verwendet, um den Fortschritt der Benutzer innerhalb Ihres Formulars zu veranschaulichen. Diese dynamische visuelle Hilfe bietet einen klaren Hinweis auf ihre aktuelle Position.

Um den Fortschrittsbalken in Ihrem mehrstufigen Formular zu aktivieren und anzupassen, klicken Sie einfach auf den Abschnitt „Erster Seitenumbruch“. Von dort aus können Sie auf die notwendigen Einstellungen zugreifen, um das Erscheinungsbild nach Ihren Wünschen zu ändern.

Beim Zugriff auf den Formularersteller wird ein neues Bedienfeld angezeigt, in dem Sie Ihren bevorzugten Stil und Ihre bevorzugte Farbe für die Fortschrittsanzeige auswählen können.

Falls Sie sich für den Fortschrittsanzeigestil „Konnektoren“ oder „Kreise“ entscheiden, haben Sie die Möglichkeit, den Seitentitel zu ändern und so den Benutzern anzuzeigen, in welcher Phase des Formulars sie sich gerade befinden.

Alternativ bietet der Fortschrittsbalkenstil einen herkömmlichen Fortschrittsbalken, der Benutzer durch die verbleibenden Schritte führt, die zum Ausfüllen des Formulars erforderlich sind.

Um den Titel der nächsten Seite und die Schaltfläche „Weiter“, die Benutzer zum nächsten Abschnitt des Formulars weiterleitet, zu personalisieren, klicken Sie einfach auf den Abschnitt „Seitenumbruch“, der bei der Ersteinrichtung des Formulars eingefügt wurde. Die Anpassungsoptionen werden im linken Bereich des Formularerstellers angezeigt.


Um Benutzern die Möglichkeit zu geben, zur vorherigen Seite zu navigieren, besteht die Möglichkeit, einen „Zurück“-Button einzubinden. Dies erreichen Sie, indem Sie das Kontrollkästchen „Vorheriges anzeigen“ aktivieren und anschließend den Titel der Schaltfläche Ihren Wünschen entsprechend anpassen.

Wenn Sie die Platzierung der Seitenumbrüche und Fortschrittsanzeigen zu Ihrer Zufriedenheit abgeschlossen haben, empfiehlt es sich, mit der Schaltfläche „Speichern“ fortzufahren.

Konfigurieren Sie Ihre Einstellungen für mehrstufige Formulare

In dieser speziellen Phase prüfen wir die Konfigurationsmöglichkeiten für Ihr mehrteiliges Formular. Klicken Sie zunächst auf den Reiter „Einstellungen“ und wählen Sie anschließend die Option „Allgemein“.

Innerhalb dieser Schnittstelle haben Sie die Möglichkeit, Ihrem Formular einen neuen Namen zuzuweisen und eine Beschreibung bereitzustellen. Darüber hinaus ist auch eine Personalisierung des Absenden-Buttons sowie die Möglichkeit zur Aktivierung von Anti-Spam-Funktionen wie Google Recaptcha möglich.

Darüber hinaus haben Sie die Möglichkeit, AJAX-Einstellungen zu aktivieren und die Speicherung von Informationen zu deaktivieren, um die Einhaltung der DSGVO-Vorschriften sicherzustellen.

Wenn Sie Ihre gewünschten Einstellungen zufriedenstellend angepasst haben, denken Sie bitte daran, Ihre Änderungen zu speichern, indem Sie auf die Schaltfläche „Speichern“ klicken.

Richten Sie Ihre Formularbenachrichtigungen ein

Bitte navigieren Sie zum Abschnitt „Benachrichtigungen“ auf der linken Seite der Einstellungsseite in WordPress. In diesem Abschnitt finden Sie die Optionen zum Konfigurieren von Benachrichtigungen für Ihr mehrseitiges Formular.

Benachrichtigungen beziehen sich auf die E-Mail-Nachrichten, die an Sie gesendet werden, wenn Benutzer ein Formular auf Ihrer Website senden. Standardmäßig aktiviert WPForms Benachrichtigungen. Wenn Sie jedoch lieber keine E-Mail-Benachrichtigungen erhalten möchten, können Sie im Dropdown-Menü die Option „Aus“ auswählen.

Darüber hinaus haben Sie die Möglichkeit, Smart Tags zu verwenden, mit denen Sie beim Absenden des Formulars eine E-Mail an die von jedem Benutzer angegebene E-Mail-Adresse senden können. Diese Funktion kann nützlich sein, um den Benutzern zu versichern, dass ihre Antworten eingegangen sind. Insbesondere bei Formularen mit mehreren Stufen können Benutzer diese Bestätigung sehr zu schätzen wissen, da sie jegliche Unsicherheit darüber ausschließt, ob ihre Formularübermittlung erfolgreich war.

Nachdem Sie die gewünschten Formularbenachrichtigungen konfiguriert haben, denken Sie daran, auf die Schaltfläche „Speichern“ zu klicken, um die Änderungen zu übernehmen.

Bestätigungsmeldung

Im nächsten Schritt wählen Sie die Bestätigungsnachrichten für Ihr mehrstufiges Formular aus. Um auf die Optionen zuzugreifen, navigieren Sie zur Seite „Einstellungen“ und klicken Sie auf die Überschrift „Bestätigungen“.

Formularbestätigungen dienen dazu, Benutzer darüber zu informieren, dass ihre Formularübermittlung erfolgreich war, und geben Anweisungen für die weiteren Aktionen, die sie durchführen müssen.

Innerhalb von WPForms gibt es drei verfügbare Bestätigungstypen:

  1. Nachricht: Dies ist der Standardbestätigungstyp, der beim Absenden des Formulars durch den Benutzer eine einfache Erfolgsmeldung anzeigt.
  2. Seite anzeigen: Durch die Verwendung dieses Bestätigungstyps werden Benutzer zu einer anderen Seite Ihrer Website weitergeleitet, beispielsweise zu einer Dankesseite.
  3. Zur URL gehen (Weiterleiten): Mithilfe dieser Bestätigungsnachricht können Sie Benutzer auf eine Seite auf einer anderen Website als Ihrer eigenen umleiten.

Wählen Sie nun Ihren bevorzugten Bestätigungstyp aus dem bereitgestellten Dropdown-Menü aus und passen Sie ihn an, indem Sie Ihre gewünschte Nachricht oder URLs hinzufügen.

Wenn Sie mit dem Erscheinungsbild und den Einstellungen zufrieden sind, klicken Sie bitte auf die Schaltfläche „Speichern“.

Fügen Sie ein mehrstufiges Formular zu WordPress hinzu

Nachdem Sie Ihr mehrstufiges Formular erstellt haben, besteht der nächste Schritt darin, es in Ihre WordPress-Website zu integrieren. WPForms bietet die Flexibilität, Ihr Formular mithilfe eines Shortcodes zu verschiedenen Abschnitten Ihrer Website hinzuzufügen, z. B. zu einer Seite, einem Beitrag, einer Seitenleiste oder sogar innerhalb Ihres WordPress-Themes.

Der am häufigsten verwendete Ansatz besteht darin, das Formular in einen WordPress-Beitrag oder eine WordPress-Seite einzubetten. Lassen Sie uns nun den Prozess untersuchen, der dazu führt.

Erstellen Sie zunächst entweder einen neuen Beitrag oder eine neue Seite in WordPress oder wählen Sie einen vorhandenen aus und klicken Sie auf die Option „Bearbeiten“. Sobald Sie sich im WordPress-Editor befinden, klicken Sie auf das Pluszeichen (+), um einen neuen Inhaltsblock hinzuzufügen.

Scrollen Sie im Popup-Menü nach unten, bis Sie den Abschnitt „Widgets“ erreichen, und klicken Sie dann auf das WPForms-Widget, um den Block in WordPress einzubetten.

Klicken Sie anschließend auf das Dropdown-Menü und wählen Sie das gewünschte mehrstufige Formular aus.

WPForms präsentiert das Formular im WordPress-Editor, sodass Sie vor der Veröffentlichung eine Vorschau seines Erscheinungsbilds anzeigen können.

Klicken Sie abschließend auf „Veröffentlichen“ oder „Aktualisieren“, um Ihr Formular live zu schalten. Hier ist ein Beispiel dafür, wie es Ihren Benutzern angezeigt wird:

Zusammenfassung


Mehrstufige Formulare haben sich als wirksames Mittel zur Verbesserung der Formularkonvertierung im WordPress-Bereich erwiesen. Durch die Segmentierung des Formulars in verschiedene Phasen wird den Benutzern ein zugänglicheres und leichter zu handhabendes Erlebnis geboten, wodurch das Gefühl der Überforderung verringert und die Wahrscheinlichkeit erhöht wird, dass das Formular ausgefüllt wird. Empirische Untersuchungen haben erhebliche Verbesserungen der Konversionsraten durch die Implementierung mehrstufiger Formulare gezeigt, insbesondere wenn das Formular mehr als drei Felder umfasst.

Zusammenfassend gehen wir davon aus, dass dieser Artikel Sie mit dem nötigen Wissen ausgestattet hat, um mehrstufige Formulare in WordPress zu erstellen. Noch bemerkenswerter ist, dass Sie dies erreichen können, ohne sich in eine einzige Codezeile vertiefen zu müssen! WPForms , ein renommiertes WordPress-Plugin, bietet eine benutzerfreundliche Plattform für die mühelose Erstellung mehrstufiger Formulare und macht den Prozess noch nahtloser und bequemer.

Divi WordPress Theme