4 einfache Schritte zum Entwerfen mehrseitiger Formulare in WordPress

Haben Sie lange Formulare für Ihre WordPress-Website? Und erleben Sie niedrige Conversion-Raten? Denn je länger Ihre Online-Formulare sind, desto weniger Leute möchten sie ausfüllen. Wieso den? Weil sich die Leute überfordert fühlen, die langen Formulare mit so vielen Fragen auszufüllen. Aber viele Unternehmen, wie z. B. Bildungseinrichtungen, Lieferdienste für Lebensmittel, Fahrzeuganbieter usw. benötigen lange Formulare für ihre Websites.

Also, was ist die Lösung? Versuchen Sie, Ihrer Website mehrseitige Formulare mit einem leistungsstarken Formular-Builder in WordPress hinzuzufügen. Infolgedessen können Ihre Kontaktformulare einfacher und einfacher aussehen, und keiner Ihrer Besucher wird sich beim Ausfüllen des Formulars mühsam fühlen.

In diesem Artikel sehen wir uns an, wie Sie mit dem robusten Formularersteller Fluent Forms WordPress mehrseitige Formulare erstellen können, und einige Beispiele für den Formulartyp, damit Sie sich inspirieren lassen und mit der Erstellung effizienter mehrstufiger Formulare für Ihre WordPress-Website beginnen können .

Fluent Forms ist der anfängerfreundlichste Formularersteller. Jetzt herunterladen und KOSTENLOS schöne Formen erstellen!!!

Was ist ein mehrseitiges Formular?

Ein mehrseitiges Formular ist ein langes Formular, das in mehrere Seiten aufgeteilt ist. Im Allgemeinen werden sie für lange Formulare verwendet, z. B. Registrierungsformulare, Checkout-Formulare usw. Sie können eine positive Benutzererfahrung schaffen und die Konversion Ihrer Website steigern, indem Sie kleinere Teile der langen Formulare für Ihre Kunden aktivieren.

Hervorragende Beispiele für mehrseitige Formulare

Hier sind einige großartige Beispiele für die Erstellung mehrseitiger Formulare für WordPress.

Holen Sie sich eine Demo von „Khoros“

Khoros, ein in Großbritannien ansässiges Unternehmen für die digitale Kundenbindungsplattform, hat ein erstaunliches mehrstufiges Formular mit Fortschrittsbalken auf seiner Website platziert. Wenn Sie auf der Homepage auf die Schaltfläche Demo herunterladen klicken, erhalten Sie das mehrstufige Formular. Das Formular sieht wie im Bild unten aus.

Um die Demo zu erhalten, müssen Sie einen schrittweisen Prozess durchlaufen, beginnend mit Ihrer E-Mail-Adresse. Wenn Sie auf den pinkfarbenen Weiter -Button klicken, erhalten Sie die weiteren Felder zum Ausfüllen. Das Formular ist sehr einfach und bietet dennoch eine einfache, intelligente und schöne Benutzeroberfläche.

Anmeldeformular von „Uber“

Uber ist ein weiteres großartiges Beispiel für mehrstufige Formulare. Auf dieser Seite geht es im Wesentlichen um Essenslieferungen, Autofahrten usw. Sie möchten beispielsweise Fahrer beim Uber-Service werden. Dafür müssen Sie sich zunächst dort anmelden. Gehen Sie also auf die Website von Uber und klicken Sie auf die Schaltfläche Anmelden in der oberen rechten Ecke der Startseite. Wählen Sie dann aus der Anmeldekategorie die Treiberoption aus, und Sie erhalten das Formular.

Auf der ersten Seite müssen Sie einige grundlegende Informationen wie Name, E-Mail, Telefonnummer usw. angeben. Wenn Sie dann auf die Schaltfläche Weiter klicken, erhalten Sie weitere Felder zum Ausfüllen. Dies ist also auch ein hervorragendes Beispiel für ein mehrstufiges Formular. Das gesamte Verfahren wird durch eine Schritt-für-Schritt-Aufgabe durchgeführt, sodass die Benutzer nicht das Gefühl haben, dass sie einen Formungsprozess durchlaufen.

Starten Sie eine kostenlose Testversion von „Quick Base“

Quickbase ist eine App, die Geschäfts- und IT-Teams zusammenbringt, um jeden technischen Hintergrund zu lösen und sicher zusammenzuarbeiten. Es ermöglicht auch der Nachhaltigkeit, ein Ökosystem von Anwendungen zu schaffen. Sie bieten auf ihrer Website auch ein mehrstufiges Formular mit Fortschrittsbalken an. Wenn Sie beispielsweise auf der Startseite auf die Schaltfläche zum Starten einer kostenlosen Testversion klicken, werden Sie zu einem mehrseitigen Formular weitergeleitet.

Das Formular ist mit seinen 2 Formularfeldern in jedem Schritt sehr einfach. Außerdem ist es farbenfroh zu genießen.

Wählen Sie Ihren Speiseplan mit „Hello Fresh“

Hello Fresh ist eine Website für Speiseplananbieter. Es ist der größte Anbieter von Kochboxen in den Vereinigten Staaten und bietet auch Dienstleistungen in Dänemark, Neuseeland, Schweden, Kanada, Australien und Westeuropa an. Gehen Sie auf der Startseite zur Option „ Unsere Pläne anzeigen “ und Sie erhalten das mehrstufige Formular. Ihr Formular ist sehr erstaunlich anzusehen, und Sie werden nicht einmal merken, dass es ein Formular ist, wenn Sie es ausfüllen. Es führt Sie durch einen reibungslosen Prozess, und Sie können auch den Fortschrittsbalken oben im Formular sehen.

Wir hoffen, dass Sie das Konzept mehrseitiger Formulare auf Ihrer WordPress-Website verstehen. Lassen Sie uns nun sehen, wie diese Formulare Ihrem Online-Geschäft zugute kommen können.

Warum sollten Sie mehrseitige Formulare für Ihre Website verwenden?

Sie fragen sich vielleicht, wie gut ein geteiltes Formular sein kann, um mehr Informationen bereitzustellen und eine bessere Benutzererfahrung zu bieten – gute Frage.

Die Antwort ist, dass ein mehrstufiges Formular eine große Menge an Langforminformationen übersichtlicher darstellt und weniger überwältigend macht. Darüber hinaus führen mehrseitige Formulare zu mehr Conversions als Einzelschrittformulare. Beispielsweise kann ein hervorragendes mehrstufiges Formular Ihre Konversionsrate um 100 % steigern. Darüber hinaus erzielte in einem Experiment eine einstufige Form ein Wachstum von 59,2 %, wenn sie in eine mehrstufige Form umgewandelt wurde.

Was ist mehr? Mehrstufige Formulare ermöglichen es Ihnen, mehr Fragen zu stellen, ohne Ihre Besucher zu langweilen, und Sie können mehr qualifizierte Leads sammeln. Einige der wichtigsten Vorteile der Verwendung von mehrstufigen Formularen auf Ihren WordPress-Websites sind:

• Geben Sie eine benutzerfreundliche Erfahrung
• Helfen Sie mit, die Markenbekanntheit zu fördern
• Konversionsraten steigern
• Erhalten Sie qualitativ hochwertige Leads für das Vertriebsteam

Kommen wir nun zum Hauptteil, dem Entwerfen eines mehrstufigen Formulars mit Fluent Forms für WordPress. Warum haben Sie sich dafür für Fluent Forms entschieden? Der Grund wird unten erklärt.

Warum fließende Formen?

Fluent Forms ist ein robuster und dennoch leichter Formularersteller im WordPress-Repository. Es verfügt über mehr als 60 Felder, über 70 vorgefertigte Vorlagen und über 40 Integrationen von Drittanbietern, um Ihr Formular schön zu gestalten. Im Abschnitt Eingabefelder umfasst es Datei-Upload, Bild-Upload, Kontrollkästchen, Multiple-Choice, benutzerdefiniertes HTML, Aktionshaken, ankreuzbarer Haken, Bereichsschieber, Net Promoter Score, Optionsfeld, benutzerdefinierter Senden-Button, Farbauswahlfeld, Quiz-Score-Feld , Post/CPT-Auswahl, Formularschritt usw., um Ihrem mehrstufigen Formular ein fantastisches Aussehen zu verleihen. Es unterstützt auch Container, Zahlungsfelder und Zahlungsintegrationen wie Stripe, PayPal, Mollie, RazorPay, PayStack usw.

Was sonst? Das Plugin reicht aus, um Ihnen den Zugriff auf Ihre gesamte Website zu ermöglichen. Es ist integriert mit MailChimp, CleverReach, Zapier, Gist, Platformly, CampaignMonitor, Getrespone, ActiveCampaign, Trello, Drip, Sendinblue, Zoho, Moosend, SendFox, FluentCRM, Ninja Tables, WP Social Ninja, Twilio, Hubspot, Constant Contact, Discord, MailerLite, Salesforce, Slack, Telegram und viele weitere Optionen. Ist es nicht erstaunlich?

Darüber hinaus machten das Quiz-Builder-Modul und die Funktionen für Konversationsformulare das Plugin wertvoller als andere Formular-Builder auf dem Markt. Darüber hinaus können Sie nach der Formularübermittlung E-Mail-Benachrichtigungen an Ihre Benutzer senden, Ihr Formular einschränken und planen, Ihr Formular mit der globalen Styler-Option verschönern und so weiter. Aus Sicherheitsgründen verfügt Fluent Forms über hCaptcha, reCAPTCHA (v2 und v2), Honeypot und dedizierte GDPR-Felder, um die Informationen der Benutzer zu schützen. Das Erstaunliche an dem Tool ist, dass Sie keine Programmiererfahrung benötigen, um auf alle Funktionen des Tools zuzugreifen. Jeder Anfänger kann das Plugin aufgrund seiner eleganten Benutzeroberfläche und der reibungslosen Drag-and-Drop-Funktion verwenden.

Fahren wir also ohne weiteres mit dem Prozess fort.

Entwerfen Sie mühelos mehrseitige Formulare mit Fluent Forms

Angenommen, Sie möchten ein Checkout-Formular für Ihre Produktwebsite erstellen und es über ein Schrittformular anzeigen. Wir folgen diesen vier einfachen Schritten, um das Formular zu entwerfen.

1. Erstellen Sie ein Formular
2. Passen Sie das Formular an
3. Formulareinstellungen
4. Veröffentlichen

Schritt-1: Erstellen Sie ein Formular

Gehen Sie zu Ihrem Fluent Forms Pro-Dashboard, da Sie das Pro-Add-On-Paket benötigen, um die Option für mehrseitige Formulare zu verwenden. Wählen Sie dann die Option Alle Formulare und klicken Sie auf der geöffneten neuen Registerkarte auf die Schaltfläche Neues Formular hinzufügen. Hier können Sie entweder die Option Konversationsformular erstellen oder die Schaltfläche Beitragsformular erstellen aus der Dropdown-Menüleiste auswählen.

Angenommen, Sie entscheiden sich für die Option Beitragsformular erstellen , da hier das Konversationsformular nicht erforderlich ist. Sobald Sie auf die Schaltfläche klicken, müssen Sie die Beitragstypen auswählen. Um Ihr Formular in einen Beitrag, eine Seite, ein Dokument oder ein Kadenzelement einzufügen, wählen Sie eine beliebige Person aus dem Popup aus.

Wenn Sie Ihr Formular einfacher erstellen möchten, können Sie den Dropdown-Menüteil überspringen und direkt auf die Schaltfläche Neues Formular hinzufügen klicken. Wir entscheiden uns für die zweite Option und wählen die Figur des leeren Formulars anstelle anderer vorgefertigter Vorlagen.

Lassen Sie uns nun das Formular entwerfen.

Schritt-2: Passen Sie das Formular an

Nachdem Sie das Formular erstellt haben, sehen Sie die Benutzeroberfläche von Fluent Forms. Hier werden Sie drei verschiedene Bereiche bemerken: die Hauptschnittstelle, Eingabefelder und die Eingabeanpassung. Jetzt ist es an der Zeit, Ihrem Formular die erforderlichen Felder hinzuzufügen. Welche Felder müssen wir also zu einem Checkout-Formular hinzufügen? Es ist einfach. Weil wir so viele Checkout-Formulare ausgefüllt haben und die Formularfelder bereits in unserem Kopf sind.

Ziehen Sie die Felder jetzt per Drag-and-Drop oder wählen Sie sie aus dem Bereich der Eingabefelder aus. In Fluent Forms erhalten Sie vier Teile von Eingabefeldern: allgemeine Felder , erweiterte Felder , Container und Zahlungsfelder . Wir übernehmen die Namens-, E-Mail-, Nummern- und Adressfelder aus dem Abschnitt mit den allgemeinen Feldern.

Um die Einstellungen der Felder anzupassen, gehen Sie zum Abschnitt Anpassung der Eingabe . Beispielsweise legen wir die Einstellungen des Adressfelds fest. Hier möchten wir keine zweite Adresse und keinen Staatsnamen für den Bestellvorgang erheben. Also deaktivieren wir die Optionen.

Danach wechseln wir zur Option für erweiterte Felder . Jetzt wählen wir das Feld Formularschritt , weil das Formular ein Langformular sein wird. Wir möchten unseren Kunden hier eine Pause geben, um sie auf die nächste Seite zu bringen.

Hier kommt der zentrale Teil – die Anpassung mehrseitiger Formulare mit Fluent Forms. Das Formularschrittfeld des Plugins besteht aus drei verschiedenen Teilen. Diese werden im Folgenden beschrieben.

Paging-Start

Dies ist die erste Option des Felds Formularschritt. Dieser Teil enthält die erste Seite des Formulars. Wenn Sie den ersten Teil des Formulars ausfüllen, wird es automatisch in den Paging-Startabschnitt umgewandelt. Um diesen Abschnitt anzupassen, klicken Sie auf das Bearbeitungssymbol der Option. Es umfasst drei verschiedene Abschnitte. Lassen Sie uns die Optionen besprechen.

• Elementklasse: Es fügt den Eingabefeldern selbst benutzerdefinierte CSS-Klassen hinzu.
• Fortschrittsanzeige: Diese Option hilft Benutzern, den Fortschritt ihres Formulars nach ihrer Wahl zu sehen. Sie können aus drei verschiedenen Anzeigeleistenstilen wählen: Fortschrittsleiste, Schritte und keine. Wir wählen die Fortschrittsbalkenoption aus. Wenn Sie zum Fortschrittsbalken gehen, wird der Fortschritt des Formulars mit einem im Balken angegebenen Prozentsatz angezeigt. Die Auswahl der Schaltfläche „Schritte“ stellt den Formularprozess in Schritten dar, und die Schaltfläche „Keine“ zeigt nichts über den Formularfortschritt an.

• Schritttitel: In diesem Abschnitt können Sie die Formularschritte oder Teile benennen. Beispielsweise legen wir Schritt 1 als personenbezogene Daten und Schritt 2 für Produktinformationen fest. Kunden sehen das Formular wie in diesem Bild unten.

• Im letzten Teil geht es darum, das automatische Scrollen des Formulars zu deaktivieren, die automatische Seite zu aktivieren und die Datenspeicherung pro Schritt zu aktivieren.

-Auto-Scroll ist standardmäßig auf unserem Schrittformular aktiviert. Sie können die Schaltfläche „Autofokus beim Wechseln jeder Seite deaktivieren“ ankreuzen, um sie zu deaktivieren.

Wenn Sie die Option „Einzelnes Optionsfeld für automatische Seite aktivieren“ aktivieren, wird das letzte Optionsfeld auf der nächsten Seite des mehrstufigen Formulars ausgelöst.

Wenn Sie schließlich das Feld „Datenspeicherung pro Schritt aktivieren“ aktivieren, werden die aktuellen Daten gespeichert. Infolgedessen können Ihre Benutzer an dem Tag fortfahren, an dem sie es verlassen haben. Klicken Sie auf das geöffnete Feld, nachdem Sie diesen Abschnitt angekreuzt haben, um die Wiederaufnahme der Sitzung zu aktivieren.

Seitenumbruch

Jedes Mal, wenn Sie einen neuen Schritt machen müssen, klicken oder ziehen Sie die Formularfelder unter diesen Abschnitt und legen Sie sie dort ab. Weil es automatisch einen neuen Schritt oder Abschnitt auf dem Builder-Punkt erstellt. Danach werden Sie feststellen, dass ein neuer Platz geschaffen wurde, um neue Felder oder Schritte einzugeben. Sie müssen dieses Segment anpassen, indem Sie auf das Bearbeitungssymbol klicken, wenn Sie mit der Maus über das Feld fahren. Hier sehen Sie unten Teile zum Anpassen.

• Zurück-Schaltfläche: In diesem Teil müssen Sie aus zwei Optionen auswählen, entweder Standard oder Bild. Wenn Sie die Standardoption wählen, wird die Textschaltfläche für die vorherige Seite angezeigt. Wenn Sie zum Bildteil gehen, wird ein Symbol Ihrer Wahl dargestellt.
• Text der vorherigen Schaltfläche: Dieses Feld hilft Ihnen, den Text der vorherigen Schaltfläche zu bearbeiten oder den Symbollink des Bildes hinzuzufügen, das Sie der vorherigen Schaltfläche hinzugefügt haben.
• Weiter-Schaltfläche: Die Einstellung dieser Schaltfläche ist dieselbe wie für die vorherige Schaltfläche. Der einzige Unterschied besteht darin, dass dies für die nächste Schaltfläche gilt. Sie müssen entweder die Text- oder die Bildoption auswählen, die auf der nächsten Schaltfläche angezeigt werden soll.
• Text der nächsten Schaltfläche: In diesem Abschnitt müssen Sie den Text der ausgewählten Option oder den Link von der nächsten Schaltfläche angeben.
• Elementklasse: Sie können dem Eingabefeld selbst benutzerdefiniertes CSS hinzufügen.

Paging-Ende

Seitenende ist der letzte Teil des Formularschrittfelds von Fluent Forms. Es zeigt das Ende der mehrseitigen Formulare an. Auch hier müssen Sie diesen Abschnitt bearbeiten, indem Sie auf das Bearbeitungssymbol des Felds klicken. Diese Option enthält drei verschiedene Bearbeitungsoptionen. Diese sind:

• Elementklasse: Fügen Sie benutzerdefinierte CSS-Klassen in das Eingabefeld selbst ein.
• Zurück-Schaltfläche: Sie müssen zwischen zwei Optionen wählen, z. B. Standard oder Text.
• Vorheriger Schaltflächentext: Passen Sie den vorherigen Schaltflächentext an oder passen Sie den Symbollink an, um das Bild anzuzeigen.

Damit sind wir mit dem ersten Schritt unseres Formulars fertig. Im zweiten Schritt fügen wir Container und einige Zahlungsfelder wie Zahlungsposten, Artikelmenge, Zahlungsmethode usw. hinzu. Informationen zum Entwerfen hervorragender Zahlungsformulare finden Sie in unserem Artikel zum Einziehen von Zahlungen mit der Fluent Forms-Zahlungsintegration. Und wie gesagt, diese Felder werden nach der Seitenumbruchoption hinzugefügt. Unser Formular ist ein zweistufiges Formular, daher ist dies vorerst das endgültige Aussehen unseres Formulars.

Sie können auch die globale Stiloption aus der Vorschau und Gestaltungsstimmung des Formulars verwenden. Die globale Styler-Option von Fluent Forms kann Ihrem Formular ein farbenfrohes und schönes Aussehen verleihen. Dies ist unser Formular, nachdem wir einige Farben aus der erweiterten Anpassung angegeben haben.

Sie können auch unseren Artikel über das Entwerfen schöner Formulare mit der globalen Styler-Option von Fluent Forms lesen.

Schritt-3: Formulareinstellungen

Um die Formulareinstellungen anzupassen, gehen Sie im Formulareditor zum Abschnitt Einstellungen und Integrationen.

Hier erhalten Sie vier Haupteinstellungsoptionen, benannte Formulareinstellungen, Zahlungseinstellungen, E-Mail-Benachrichtigung und Marketing- und CRM-Integrationen. In der Option „Formulareinstellungen“ können Sie die Formularbestätigungseinstellungen, das Formularlayout, die Planung und Einschränkungen, die erweiterte Formularvalidierung, das Umfrageergebnis, die Compliance-Einstellungen und andere anpassen.

In der Option Formularbestätigungseinstellungen können Sie die Einstellung des Formulars nach dem Absenden des Formulars festlegen, wie z.

Außerdem können Sie die Double-Opt-Bestätigung aktivieren, wenn Sie möchten.

Im Abschnitt Formularlayout können Sie die Beschriftungsausrichtung, die Position der Hilfemeldung, die Position der Fehlermeldung, die Position des Sternchens usw. festlegen.

Die Option Planung & Einschränkungen dient zum Festlegen der maximalen Anzahl von Einträgen, Formularplanungszeiten, Formularwarte- und Ablaufmeldungen usw.

Die erweiterte Formularvalidierungsfunktion ist eine sehr nützliche Funktion, um Ihre Formulare vor Spam und Bots zu schützen.

Darüber hinaus können Sie das Umfrageergebnis als Beschriftung oder Zählung anzeigen, indem Sie die Schaltfläche „Anhängen“ aktivieren. Bei den Compliance-Einstellungen geht es darum, die unnötigen Daten nach dem Absenden des Formulars zu löschen. Wenn alle Einstellungen in diesem Abschnitt vorgenommen wurden, klicken Sie auf die Schaltfläche Einstellungen speichern .

Fahren Sie danach mit dem Abschnitt für die E-Mail-Benachrichtigung fort. Hier können Sie das Senden von E-Mail-Benachrichtigungen an Ihre Benutzer aktivieren, wenn sie ein Formular absenden.

Die Zahlungseinstellungsoption ist für die Zahlungsformulare. Im Abschnitt „Andere Bestätigungen“ können Sie die Bedingungslogik oder andere Bestätigungen des Formulars festlegen.

Im letzten Teil, in dem es um Marketing- und CRM-Integrationen geht, können Sie Ihrem Formular beliebige Integrationen hinzufügen.

Schritt-4: Veröffentlichen

Kopieren Sie abschließend den Shortcode des Formulars und fügen Sie ihn irgendwo auf Ihrer Website in den HTML-Block ein.

Das ist es! Wir hoffen, dass Sie dieses Tutorial für Ihr Unternehmen hilfreich fanden. Teilen Sie uns Ihre Meinung im Kommentarbereich unten mit.

Abschließende Gedanken

Mehrseitige Formulare sind die beste Alternative für lange Einzelschrittformulare. Und jetzt wissen Sie, wie Sie mit Fluent Forms ganz einfach eine für Ihre Website erstellen können. Warum also nicht gleich heute ausprobieren?

Folgen Sie uns auf Twitter, Facebook, Instagram und YouTube für weitere Tutorials wie dieses.

• Facebook
• Instagram
• WordPress
• Twitter
• Youtube