So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

Anfänger: So erstellen Sie ein mehrstufiges Formular in WordPress (mit einem Plugin)

Möchten Sie in WordPress ein übersichtliches, mehrstufiges Formular erstellen, das gut aussieht und sich gut konvertieren lässt?

Die Aufteilung eines Formulars in mehrere Seiten trägt dazu bei, das Engagement zu steigern und die Benutzererfahrung zu verbessern. Gleichzeitig wird Formularmüdigkeit entgegengewirkt, sodass Sie mehr Formularkonvertierungen erzielen.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress ein mehrstufiges Formular erstellen.

Hier ist ein Inhaltsverzeichnis der Schritte, wenn Sie fortfahren möchten:

Warum ein mehrstufiges Formular auf Ihrer Website verwenden?

Fragen Sie sich zunächst einmal, was ein mehrstufiges Formular ist? Dabei wird Ihr Formular einfach in mehrere Seiten oder Schritte unterteilt, sodass es kein einziges langes Formular ist.

Und obwohl Sie Ihrem WordPress-Formular weitere Schritte hinzufügen, kann die Verwendung eines mehrstufigen Formulars (auch bekannt als mehrteiliges oder mehrseitiges Formular) auf Ihrer WordPress-Website die Konvertierungsrate Ihres Formulars erhöhen. Website, insbesondere wenn das Formular mehr als 3 hat Formularfelder.

Tatsächlich verzeichnete WhatIsMyComfortZone.com nach der Aufteilung eines einst einstufigen Landingpage-Formulars in WordPress in mehrere Schritte tatsächlich 53 % der Website-Besucher, die konvertierten und zu Leads wurden, selbst wenn das Formular in viele Schritte unterteilt war.

Erhöhen Sie die Formularkonvertierungsrate

Und da sie in jedem Formular die gleichen Fragen stellten, war es sinnvoll, dass von da an alle langen Formulare auf ihrer Website zu mehrstufigen Formularen wurden.

Hier sind einige weitere Gründe, die Erstellung eines mehrstufigen Formulars in WordPress in Betracht zu ziehen:

  • Fördern Sie die Konzentration: Durch Gruppieren der Fragen im Formular können Sie die Informationen in Schwerpunktbereiche für den Benutzer aufteilen.
  • Reduzieren Sie den Abbruch von Formularen: Es ist wahrscheinlicher, dass Benutzer die von Ihnen angeforderten Informationen vervollständigen, wenn sie in Seiten unterteilt sind, anstatt sie in einem langen Formular darzustellen.
  • Besorgen Sie sich nur das, was Sie brauchen: Mithilfe der bedingten Logik können Sie ein mehrstufiges WordPress-Formular mit bedingten Feldern erstellen. Zeigen Sie verschiedene Seiten des Formulars basierend auf den Antworten der Benutzer an.

Schauen wir uns also an, wie man in WordPress ein mehrstufiges Formular erstellt.

So erstellen Sie ein mehrstufiges Formular in WordPress

Wenn Sie nach einem mehrstufigen Elementor-Formular suchen, lesen Sie dieses Tutorial und erfahren Sie, wie Sie WPForms ein Elementor-Formular hinzufügen.

Sehen Sie sich das Video oben an, wenn Sie sich fragen, wie Sie mit einem Plugin ein mehrstufiges Formular erstellen. Wenn Sie schriftliche Anweisungen bevorzugen, lesen Sie weiter unten.

Und wenn Sie nach dem besten kostenlosen Kontaktformular-Plugin suchen, lesen Sie unbedingt unseren Beitrag zum Vergleich von WPForms Lite und Contact Form 7.

Schritt 1: Erstellen Sie ein mehrstufiges Formular in WordPress

Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Informationen zum Einrichten dieses Formularerstellers finden Sie in dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.

Dann geh zu WPForms » Neu hinzufügen um ein neues Formular zu erstellen.

Mit WPForms können Sie jedes Formular in mehrere Teile oder Schritte aufteilen. Für unser Beispiel erstellen wir ein einfaches Kontaktformular.

Geben Sie Ihrem Formular auf dem Einstellungsbildschirm einen Namen und wählen Sie die Vorlage aus, die Sie verwenden möchten, abhängig von der Art des Formulars, das Sie erstellen. Wir werden uns für die einfache Kontaktformularvorlage entscheiden.

Einfache Kontaktformularvorlage

WPForms erstellt ein einfaches Kontaktformular im Drag-and-Drop-Builder.

Einfaches Kontaktformular

Von diesem Formularerstellungsbereich aus können Sie zusätzliche Felder zu Ihrem Kontaktformular hinzufügen, indem Sie sie vom linken Bereich in den rechten Bereich ziehen.

Mit der einfachen Kontaktformularvorlage haben Sie bereits das Name, EmailUnd Kommentar oder Nachricht Formularfelder.

Klicken Sie auf eines der Formularfelder, um Änderungen vorzunehmen. Sie können auch auf ein Formularfeld klicken und es ziehen, um die Reihenfolge in Ihrem Kontaktformular neu anzuordnen.

Wenn Sie etwas komplexeres als ein einfaches Kontaktformular erstellen möchten, schauen Sie sich einige unserer anderen Tutorials an, die vorgefertigte Vorlagen verwenden, die mit WPForms geliefert werden:

Diese Formulare sind in der Regel viel länger als ein einfaches Kontaktformular und erfordern wahrscheinlich mehrere Schritte zum Ausfüllen, wenn Sie viele Informationen anfordern.

Sehen wir uns nun an, wie Sie Ihr Formular in mehrere Teile aufteilen.

Schritt 2: Teilen Sie Ihr Formular in verschiedene Teile auf

Nachdem Sie alle Formularfelder in Ihrem Formular hinzugefügt und angepasst haben, müssen Sie das hinzufügen Seitenumbruch Fügen Sie Ihrer Website ein Formularfeld hinzu, um es in verschiedene Seiten aufzuteilen.

Ziehen Sie dazu die Seitenumbruch Formularfeld, gelegen in Luxusfeldervom linken Feld zum rechten Feld.

Platzieren Sie das Feld an der Stelle, an der das Formular geteilt werden soll.

Seitenumbruch zu WPForms hinzufügen

Tun Sie dies überall dort, wo Ihr Formular auf eine andere Seite aufgeteilt werden soll. Von dort aus können Sie zusätzliche Formularfelder hinzufügen, um Ihr Formular zu vervollständigen.

Mit WPForms können Sie so viele Formularseiten erstellen, wie Sie möchten. Denken Sie jedoch daran, Ihre Benutzer nicht zu überfordern. Sammeln Sie nur die Informationen, die Sie benötigen. Sie können später jederzeit weitere Informationen einholen.

Schritt 3 – Passen Sie die Fortschrittsleiste für mehrseitige Formulare an

Abhängig von Ihren Anforderungen möchten Sie möglicherweise eine Fortschrittsanzeige anzeigen, um Benutzer über die verschiedenen Abschnitte Ihres Formulars zu informieren. Auf diese Weise wissen sie immer, wo sie sich in ihrem Formular befinden und wie viel sie noch ausfüllen müssen, bevor sie anhand der Fortschrittsbalken auf „Senden“ klicken.

Um Ihnen die Arbeit zu erleichtern, verfügt WPForms über drei verschiedene Anzeigeleisten im Breadcrumb-Stil für Ihre mehrstufigen Formulare:

  1. Anschlüsse: Zeigt eine Verbindungsleiste und die Seitentitel für jeden Teil Ihres mehrstufigen Formulars an.
  2. Kreise: Zeigt einen Kreis und einen seitenweisen Titel in Ihrem mehrstufigen Formular an.
  3. Fortschrittsanzeige: Zeigt den Fortschritt des Formulars an, während der Benutzer es ausfüllt.

WPForms-Fortschrittsbalken

Um den Fortschrittsbalken und den Seitentitel auf der ersten Seite Ihres mehrstufigen Formulars anzupassen, klicken Sie auf Erste Seite Bruchabschnitt.

Klicken Sie auf die erste Seite, um den Fortschrittsbalken in mehrteiliger Form in WordPress anzuzeigen

Im Formulareditor wird ein neues Bedienfeld angezeigt, in dem Sie auswählen können, welchen Fortschrittsbalken Sie verwenden möchten. Hier können Sie auch die Farbe der Fortschrittsanzeige ändern.

Sie können auch den Seitentitel ändern, um Benutzern mitzuteilen, an welcher Stelle im Formular sie sich befinden, wenn Sie Folgendes auswählen Kreise entweder Anschlüsse Möglichkeit. Andernfalls sehen Benutzer nur einen Standard-Fortschrittsbalken, der sie durch die Anzahl der verbleibenden Schritte im mehrstufigen Formular führt.

Mehrstufiges Formular zur Anpassung der Fortschrittsanzeige

Klicken Sie auf, um den Titel der nächsten Seite und die Schaltfläche, die Website-Besucher zur nächsten Seite Ihres Formulars weiterleitet, anzupassen Seitenumbruch Abschnitt, den Sie erstellt haben, als Sie den Seitenumbruch zu Ihrem Formular hinzugefügt haben.

Passen Sie die nächste Seite an

Sie können auch die Funktion aktivieren, mit der Sie Website-Besuchern a anzeigen können Ehemalig Seitenschaltfläche. Auf diese Weise können sie bei Bedarf zur vorherigen Seite ihres Formulars zurückkehren.

Kopie der vorherigen Seite

Dabei haben Sie auch die Möglichkeit, die Schaltflächenkopie zu ändern.

Wenn Sie alle Seitenumbrüche erstellt und die Fortschrittsanzeige angepasst haben, klicken Sie auf Speichern.

Schritt 4: Konfigurieren Sie Ihre mehrstufigen Formulareinstellungen

Um zu beginnen, gehen Sie zu Einstellungen » Allgemein.

Einrichtung mehrteiliger Formulare

Hier können Sie Folgendes konfigurieren:

  • Formularname – Ändern Sie hier bei Bedarf den Namen Ihres Formulars.
  • Formularbeschreibung – Geben Sie Ihrem Formular eine Beschreibung.
  • Schaltflächentext senden – Passen Sie die Kopie über die Schaltfläche „Senden“ an.
  • Spam-Schutz: Stoppen Sie Kontaktformular-Spam mit Antispam, hCaptcha oder Google reCAPTCHA. Das Anti-Spam-Kontrollkästchen ist bei allen neuen Formularen automatisch aktiviert.
  • AJAX-Formulare – Aktivieren Sie die AJAX-Einstellungen ohne Neuladen der Seite, damit Sie in WordPress ein mehrstufiges AJAX-Formular haben.
  • Verbesserungen der DSGVO – Sie können die Speicherung von Eingabeinformationen und Benutzerdaten wie IP-Adressen und Benutzeragenten deaktivieren, um den Anforderungen der DSGVO nachzukommen. Sehen Sie sich unsere Schritt-für-Schritt-Anleitung zum Hinzufügen eines DSGVO-Vereinbarungsfelds zu Ihrem einfachen Kontaktformular an.

Wenn Sie fertig sind, klicken Sie auf Speichern.

Schritt 5: Richten Sie Ihre Formularbenachrichtigungen ein

Benachrichtigungen sind eine großartige Möglichkeit, jedes Mal eine E-Mail zu senden, wenn ein Formular auf Ihrer Website gesendet wird.

Benachrichtigungen

Sofern Sie diese Funktion nicht deaktivieren, erhalten Sie jedes Mal, wenn jemand ein mehrstufiges Formular auf Ihrer Website sendet, eine Benachrichtigung über die Übermittlung.

Wenn Sie Smart Tags verwenden, können Sie beim Absenden eines Formulars auch eine Benachrichtigung an die E-Mail-Adresse des Benutzers senden, um ihn darüber zu informieren, dass Sie das Formular erhalten haben und sich in Kürze mit Ihnen in Verbindung setzen. Dies stellt den Besuchern der Website sicher, dass ihr Formular korrekt verarbeitet wurde.

Es wird auch geschätzt, wenn es um mehrseitige Formulare geht, deren Ausfüllen möglicherweise lange gedauert hat. Das Letzte, was sich ein Website-Besucher fragen möchte, ist, ob das lange Formular, das er gerade ausgefüllt hat, vollständig ausgefüllt wurde.

Hilfe zu diesem Schritt finden Sie in unserer Dokumentation zum Einrichten von Formularbenachrichtigungen in WordPress.

Wenn Sie das Branding in Ihren E-Mails konsistent beibehalten möchten, lesen Sie außerdem diese Anleitung zum Hinzufügen einer benutzerdefinierten Kopfzeile zu Ihrer E-Mail-Vorlage.

Benutzerdefinierter E-Mail-Header

Schritt 6 – Passen Sie Ihre Formularbestätigungen an

Formularbestätigungen sind Nachrichten, die Website-Besuchern angezeigt werden, sobald sie ein Formular auf Ihrer Website absenden. Sie teilen den Leuten mit, dass ihr Formular bearbeitet wurde, und bieten Ihnen die Möglichkeit, ihnen die nächsten Schritte mitzuteilen.

Auch dies ist insbesondere dann nützlich, wenn Sie auf Ihrer Website mit langen Formularen arbeiten.

WPForms bietet drei Bestätigungstypen zur Auswahl:

  1. Nachricht. Dies ist der Standardbestätigungstyp in WPForms. Wenn ein Website-Besucher ein Formular absendet, erscheint eine einfache Bestätigungsmeldung, die ihn darüber informiert, dass sein Formular verarbeitet wurde. Hier finden Sie einige Erfolgsmeldungen, die zur Steigerung der Kundenzufriedenheit beitragen.
  2. Seite anzeigen. Diese Art der Bestätigung führt Website-Besucher zu einer bestimmten Webseite Ihrer Website und dankt ihnen für das Absenden Ihres Formulars. Wenn Sie dabei Hilfe benötigen, schauen Sie sich unser Tutorial zur Weiterleitung von Kunden auf eine Dankesseite an. Lesen Sie außerdem unbedingt unseren Artikel darüber, wie Sie effektive Dankesseiten erstellen, um die Kundenbindung zu erhöhen.
  3. Gehen Sie zur URL (Weiterleitung). Diese Option wird verwendet, wenn Sie Website-Besucher auf eine andere Website weiterleiten möchten.

Sehen wir uns an, wie Sie in WPForms eine einfache Formularbestätigung einrichten, damit Sie die Nachricht anpassen können, die Website-Besucher sehen, wenn sie ein Formular auf Ihrer Website senden.

Um zu beginnen, klicken Sie auf Bestätigung Registerkarte im Formulareditor in Einstellungen.

Wählen Sie als Nächstes den Bestätigungstyp aus, den Sie erstellen möchten. Für dieses Beispiel werden wir auswählen Nachricht.

Mehrstufiges Formular zur Konfiguration des Bestätigungstyps

Passen Sie dann die Bestätigungsnachricht nach Ihren Wünschen an und klicken Sie Speichern.

Hilfe zu anderen Bestätigungstypen finden Sie in der Dokumentation zum Konfigurieren von Formularbestätigungen.

Sie können nun Ihr Kontaktformular zu Ihrer Website hinzufügen.

Schritt 7 – Fügen Sie Ihr mehrstufiges Formular zu Ihrer WordPress-Website hinzu

Sobald Sie Ihr mehrstufiges Formular erstellt haben, müssen Sie es Ihrer WordPress-Website hinzufügen.

Mit WPForms können Sie Ihre Formulare an verschiedenen Stellen Ihrer Website hinzufügen, einschließlich Ihrer Seiten, Blog-Beiträge und Seitenleisten-Widgets.

Werfen wir einen Blick auf die gebräuchlichste Platzierungsoption: Seiten-/Beitragseinbettung.

Erstellen Sie zunächst eine neue Seite oder einen neuen Beitrag in WordPress oder aktualisieren Sie die Einstellungen einer vorhandenen Seite. Klicken Sie anschließend in den ersten Block (den leeren Bereich unter Ihrem Seitentitel) und klicken Sie auf das Symbol „WPForms hinzufügen“.

Fügen Sie Ihr Formular ein, indem Sie auf das Symbol „WPForms hinzufügen“ klicken

Das WPForms-Widget wird in Ihrem Block angezeigt. Klicken Sie auf das Dropdown-Menü „WPForms“ und wählen Sie aus, welche der bereits erstellten Formulare Sie auf Ihrer Seite einbetten möchten. Wählen Sie das gerade erstellte Formular aus.

Wählen Sie Ihr mehrteiliges Formular aus

Veröffentlichen Sie dann Ihren Beitrag oder Ihre Seite, damit Ihr Kontaktformular auf Ihrer Website erscheint.

Klicken Sie anschließend oben rechts auf die blaue Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, damit Ihr Formular auf Ihrer Website angezeigt wird.

Speichern und veröffentlichen Sie Ihr mehrstufiges Formular

Schauen Sie sich unten die Beispiele für mehrstufige Formulare an

Und da haben Sie es! Jetzt wissen Sie, wie Sie in WordPress ein mehrstufiges Formular erstellen und können sofort damit beginnen, Ihr Benutzererlebnis und Ihre Conversion-Rate zu verbessern.

Wenn Sie Inspiration für mehrseitige Formulare suchen, sehen Sie sich diese Zusammenfassung von Beispielen für mehrstufige Formulare an.

Also, worauf wartest Du? Beginnen Sie noch heute mit dem besten mehrstufigen Formularersteller für WordPress.

Und vergessen Sie nicht: Wenn Ihnen dieser Artikel gefällt, folgen Sie uns weiter Facebook Und Twitter.