So erstellen Sie ein WordPress-Formular mit einer Fortschrittsleiste

Suchen Sie ein WordPress-Fortschrittsbalken-Plugin?

Fortschrittsanzeigen, wie sie auch genannt werden, verfolgen und zeigen den Gesamtfortschritt des Benutzers beim Ausfüllen des Formulars an.

In diesem Beitrag zeigen wir Ihnen, wie Sie mit WPForms einfach einen Fortschrittsbalken zu Ihrem Formular hinzufügen.

Erstellen Sie jetzt Ihr WordPress-Formular

Wie fügt man einen WordPress-Fortschrittsbalken hinzu?

Fortschrittsbalken sind visuelle Elemente, die Funktionalität hinzufügen und die Benutzererfahrung verbessern. Sie zeigen den Benutzern, wie viele Seiten Ihr Formular hat und auf welcher Seite sie sich gerade befinden.

Ein Fortschrittsbalken in Ihrem Formular hilft, den Abbruch von Formularen zu reduzieren, indem Ihr Besucher über seinen Fortschritt informiert wird.

Der einfachste Weg, sie zu Ihren Formularen hinzuzufügen, ist die Verwendung eines Plugins. Die gute Nachricht, insbesondere für Anfänger, ist, dass Sie kein spezielles Fortschrittsbalken-WordPress-Plugin benötigen. WPForms ist sehr benutzerfreundlich und optimiert den Prozess, indem es das Erstellen von mehrseitigen Formularen mit Fortschrittsbalken zum Kinderspiel macht.

So erstellen Sie ein WordPress-Formular mit einer Fortschrittsleiste

Hier sind die Schritte, die wir unternehmen werden:

Beginnen wir mit der Installation von WPForms als unserem Formular-Builder und Fortschrittsbalken-Plugin.

1. Installieren Sie das WPForms-Plugin

Zuerst benötigen Sie eine WPForms Pro Lizenz, um einen Fortschrittsbalken in Ihrem Formular zu haben, und müssen sich dann in Ihr WPForms-Konto einloggen. Sobald Sie eingeloggt sind, klicken Sie auf den Tab Downloads.

Dies zeigt Ihnen eine Seite mit all Ihren verfügbaren Lizenzen. Um das Plugin herunterzuladen, klicken Sie auf die Schaltfläche WPForms herunterladen neben einer Ihrer Lizenzen. Dies speichert eine gezippte Datei des WPForms-Plugins auf Ihrem Computer.

Wichtig: Sie benötigen WPForms Pro, da es das Feld für Seitenumbrüche enthält. Sie benötigen das Feld für Seitenumbrüche, wenn Sie verschiedene Schritte in Ihrem Formular haben und den Fortschrittsbalken anzeigen möchten.

WPForms auf Ihrer WordPress-Website installieren

Sobald Sie Ihre ZIP-Datei heruntergeladen haben, gehen Sie zu Ihrer WordPress-Website, auf der Sie WPForms installieren möchten. Gehen Sie dann im Admin-Dashboard zu Plugins » Neues Plugin hinzufügen und klicken Sie auf die Schaltfläche Plugin hochladen.

Klicken Sie hier auf die Schaltfläche Datei auswählen und wählen Sie die gerade heruntergeladene WPForms-ZIP-Datei aus.

Nachdem Ihre Datei hochgeladen wurde, klicken Sie auf die Schaltfläche Jetzt installieren.

Dies startet den Installationsprozess für Sie. Sobald das Plugin installiert ist, klicken Sie auf die Schaltfläche Plugin aktivieren, um WPForms auf Ihrer Website zu aktivieren.

Nachdem Sie das Plugin aktiviert haben, verifizieren Sie Ihren WPForms-Lizenzschlüssel, um automatische Updates und Plugin-Support zu erhalten. Durch die Eingabe Ihres Lizenzschlüssels können Sie auch WPForms-Addons einfach installieren und aktivieren direkt aus Ihrem WordPress-Dashboard.

Das ist alles! Wir können jetzt fortfahren und ein neues Formular erstellen.

2. Neues Formular erstellen

Um zu beginnen, müssen Sie in Ihrem WordPress-Adminbereich angemeldet sein. Dort angekommen, klicken Sie auf WPForms in der Admin-Seitenleiste, um zur Übersichtsseite der Formulare zu gelangen.

Klicken Sie dann, um ein neues Formular zu erstellen, auf die Schaltfläche Neu hinzufügen, um den WPForms-Formular-Builder zu starten.

Auf der Einrichtungsseite des Formular-Generators können Sie Ihrem Formular im Eingabefeld Formularname einen Namen geben.

Wenn kein Name gewählt wird, wird der Formularname standardmäßig nach dem Namen Ihrer Vorlage benannt.

Unter dem Feld „Formularname“ finden Sie Hunderte von Formularvorlagen im Abschnitt Vorlage auswählen. Dies sind vorgefertigte Vorlagen für häufig verwendete Formulare wie Kontaktformulare, Registrierungsformulare und viele mehr, die Ihnen den schnellen Einstieg erleichtern.

Hinweis: Wenn Sie Ihr Formular von Grund auf neu erstellen möchten, verwenden Sie die Vorlage „Leeres Formular“.

Um eine Vorlage auszuwählen, können Sie die Kategorien im Menü auf der linken Seite verwenden. Sie können auch die Suchleiste in der oberen linken Ecke der Vorlagenbibliothek verwenden, um die verfügbaren Optionen zu durchsuchen.

Sobald Sie Ihre gewünschte Vorlage gefunden haben, fahren Sie mit der Maus darüber und klicken Sie auf die Schaltfläche Vorlage verwenden.

Von dort aus gelangen Sie zum Formular-Generator, und Sie können zusätzliche Elemente per Drag & Drop hinzufügen, wenn Sie möchten. Sie können auch das Formularlayout ändern von Inline-Feldern zu Mehrspalten.

Wenn Sie Schwierigkeiten beim Erstellen Ihres Formulars haben, lesen Sie unsere ausführlichen Anleitungen zur Erstellung und vollständigen Anpassung Ihres Formulars.

3. Seitenumbrüche zu Ihrem Formular hinzufügen

Sie sind nun bereit, Ihre Seitenumbrüche und eine Fortschrittsleiste hinzuzufügen. Durch das Hinzufügen eines Seitenumbruchs wird automatisch die Fortschrittsleiste in das Formular aufgenommen.

Sobald Sie den Formular-Generator geöffnet haben, fügen Sie alle Felder hinzu, die Sie in Ihr Formular aufnehmen möchten. Ziehen Sie dann ein Feld Seitenumbruch in den Vorschau-Bereich und legen Sie es dort ab, wo Sie eine neue Formularseite erstellen möchten.

Jedes Feld für Seitenumbrüche, das Sie hinzufügen, teilt das Formular in zusätzliche Seiten auf, und Sie können so viele Seiten hinzufügen, wie Sie benötigen. Um den Seitenumbruch in einen anderen Abschnitt Ihres Formulars zu verschieben, klicken Sie im Vorschau-Bereich darauf und ziehen Sie ihn dorthin, wo Sie ihn haben möchten.

Anpassen Ihrer Fortschrittsleiste

Sobald Sie einen Seitenumbruch hinzugefügt haben, stellen Sie möglicherweise fest, dass im Vorschau-Bereich oben in Ihrem Formular ein Abschnitt „Erste Seite“ erschienen ist. Dies ist der Platzhalter für die horizontale Fortschrittsleiste. Klicken Sie auf Erste Seite / Fortschrittsanzeige, um auf die Optionen für Ihr mehrseitiges Formular zuzugreifen.

Sie können Ihre Fortschrittsleiste im Dropdown-Menü Fortschrittsanzeige anpassen, und es stehen Ihnen mehrere Anpassungsoptionen zur Verfügung.

Zuerst wählen Sie Ihre Fortschrittsanzeige-Stile. WPForms bietet Fortschrittsbalken, Kreisförmige Fortschrittsbalken und Verbindungs-Fortschrittsbalken.

Fortschrittsbalken:

Kreise:

Verbinder:

Sie haben einige Styling-Optionen, wenn es um diese mehrseitigen Formulare geht. Um die Farbe Ihrer Fortschrittsanzeige zu ändern, verwenden Sie die Farbauswahl oder geben Sie den Hex-Code ein.

Geben Sie schließlich einen Namen für Ihr Formular in das Feld Seitentitel ein.

Wenn Sie jedoch mit dem Aussehen Ihres Formulars zufrieden sind, können Sie die Fortschrittsleiste ausblenden, indem Sie Keine auswählen.

Möchten Sie mehr erfahren? Lesen Sie die vollständigen Anleitungen zur Erstellung von mehrseitigen Formularen, um diese Formularfunktion voll auszunutzen.

Sie möchten Ihren Benutzern vielleicht auch erlauben, ihren Fortschritt zu speichern und den Rest Ihres Formulars zu einem späteren Zeitpunkt auszufüllen. Dies ist eine großartige Möglichkeit, den Abbruch von Formularen zu reduzieren und die Abschlussraten zu erhöhen.

4. Speichern und veröffentlichen Sie Ihr Formular

Sobald Sie mit der Anpassung Ihres Formulars fertig sind, können Sie es veröffentlichen. Klicken Sie zuerst auf die Schaltfläche Speichern in der oberen rechten Ecke Ihres Formular-Builders.

Sie können Ihr Formular zu Ihrer Website hinzufügen, indem Sie auf die Schaltfläche Einbetten klicken.

Von hier aus haben Sie die Möglichkeit, entweder eine neue Seite zu erstellen oder eine vorhandene Seite auszuwählen, um Ihr Formular hinzuzufügen.

Beachten Sie, dass es auch eine Shortcode-Option gibt, wenn Sie das Formular später direkt auf Ihrer Seite einbetten möchten. Dies ist auch nützlich, wenn Sie Formulare stattdessen in Widgets platzieren möchten.

Wenn Sie die Option Neue Seite erstellen auswählen, werden Sie aufgefordert, einen Namen für die Seite einzugeben. Klicken Sie dann auf die Schaltfläche Los geht's, um Ihr Formular einzubetten und Ihre Seite zu veröffentlichen.

Wenn Sie die Option Vorhandene Seite auswählen wählen, werden Sie aufgefordert, aus der Dropdown-Liste auszuwählen, auf welcher Seite Ihr Formular eingebettet werden soll.

Klicken Sie dann auf die Schaltfläche Los geht's, um Ihr Formular einzubetten.

Sie können Ihr Formular jetzt auf der ausgewählten Seite anzeigen. Gehen Sie entweder zu der Seite, auf der Sie es eingebettet haben, oder gehen Sie zu WPForms » Alle Formulare. Fahren Sie mit der Maus über den Formularnamen, um ein zusätzliches Menü mit Optionen anzuzeigen. Sobald die Optionen angezeigt werden, klicken Sie auf Vorschau.

5. Überprüfen Sie den Fortschrittsbalken Ihres Formulars

Sie haben nun ein Formular mit einer Fortschrittsanzeige, die etwa so aussieht:

Wir empfehlen, Ihr Formular zu testen, indem Sie die Felder ausfüllen und absenden, um sicherzustellen, dass alles gut aussieht und wie gewünscht funktioniert.

Hinweis: Die Seitenumbruchfelder können im Formular nach oben oder unten verschoben werden, wenn Sie das Layout anpassen möchten.

Als Nächstes: Werden Sie ein Experte für Formularerstellung

Möchten Sie Ihr Wissen über die Formularerstellung mit WPForms erweitern? Lesen Sie unbedingt unseren vollständigen Leitfaden zu Formularfeldern und wie Sie die Felder in Ihren Formularen anpassen.

Wenn Sie bereit sind, Ihre Formulare auf die nächste Stufe zu heben, ist unser Artikel über die Anpassung Ihrer Formulare an Ihr WordPress-Theme die Lektüre wert. Sie lernen, wie Sie das Aussehen, die Schaltflächen, die Hintergrundfarbe und mehr Ihres Formulars direkt im WordPress-Blockeditor anpassen können. Das Beste daran? Wenn Sie kein CSS können, ist das in Ordnung. Sie benötigen keine benutzerdefinierten CSS für diese Anpassungen!

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.