So erstellen Sie ein Formular mit einem Fortschrittsbalken

Möchten Sie wissen, wie Sie einem Formular einen Fortschrittsbalken hinzufügen?

Ein Fortschrittsbalken auf Ihrem Formular trägt dazu bei, das Verlassen des Formulars zu reduzieren, indem Sie Ihre Besucher über ihren Fortschritt auf dem Laufenden halten.

Wir zeigen Ihnen unten, wie Sie eine zu Ihrem Formular hinzufügen können.

Was ist der Fortschrittsbalken in Formularen?

Fortschrittsbalken sind visuelle Funktionen, die Benutzern zeigen, wie viele Seiten sich in Ihrem Formular befinden und auf welcher Seite sie sich gerade befinden.

Fortschrittsindikatoren, wie sie auch genannt werden, verfolgen und zeigen den Gesamtfortschritt des Benutzers an, während er das Formular ausfüllt.

So erstellen Sie ein Formular mit einem Fortschrittsbalken

Hier sind die Schritte, die wir unternehmen werden:

1. 1. Installieren Sie das WPForms-Plugin
   2. Erstellen Sie ein neues Formular
   3. Fügen Sie Ihrem Formular Seitenumbrüche hinzu
   4. Speichern und veröffentlichen Sie Ihr Formular
   5. Überprüfen Sie Ihren Formularfortschrittsbalken

Beginnen wir mit der Installation des Formular-Plugins, das wir für den Fortschrittsbalken benötigen.

1. Installieren Sie das WPForms-Plugin

Um einen Fortschrittsbalken auf Ihrem Formular zu haben, müssen Sie zunächst eine WPForms Pro-Lizenz erwerben und sich dann bei Ihrem WPForms-Konto anmelden. Nachdem Sie sich angemeldet haben, klicken Sie auf die Registerkarte Downloads .

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

Wichtig: Sie benötigen WPForms Pro, da es das Feld Seitenumbruch enthält. Sie benötigen das Feld Seitenumbruch, wenn Sie verschiedene Schritte in Ihrem Formular haben und um den Fortschrittsbalken anzuzeigen.

Installieren von WPForms auf Ihrer Website

Nachdem Sie Ihre ZIP-Datei heruntergeladen haben, gehen Sie zu Ihrer WordPress-Site, auf der Sie WPForms installieren möchten. Gehen Sie dann im Admin-Dashboard zu Plugins » Neu 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.

Dadurch wird der Installationsvorgang für Sie gestartet. Sobald das Plugin installiert ist, klicken Sie auf die Schaltfläche Plugin aktivieren, um WPForms auf Ihrer Website zu aktivieren.

Überprüfen Sie nach der Aktivierung des Plugins Ihren WPForms-Lizenzschlüssel, um automatische Updates und Plugin-Unterstützung zu erhalten. Das Hinzufügen Ihres Lizenzschlüssels ermöglicht es Ihnen auch, WPForms-Add-Ons einfach von Ihrem WordPress-Dashboard aus zu installieren und zu aktivieren.

Das ist es! Wir können jetzt ein neues Formular erstellen.

2. Erstellen Sie ein neues Formular

Zu Beginn müssen Sie sich in Ihrem WordPress-Adminbereich anmelden. Klicken Sie dort in der Admin-Seitenleiste auf WPForms , um zur Formularübersichtsseite zu gelangen.

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

Auf der Einrichtungsseite des Formularerstellers können Sie Ihr Formular im Eingabefeld Formularname benennen.

Wenn kein Name ausgewählt wird, wird als Formularname standardmäßig der Name der von Ihnen ausgewählten Vorlage verwendet.

Unter dem Feld „Formularname“ finden Sie Hunderte von Formularvorlagen im Abschnitt „ Vorlage auswählen “. Dies sind vorgefertigte Vorlagen häufig verwendeter Formulare, 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.

Wenn Sie die gewünschte Vorlage gefunden haben, bewegen Sie den Mauszeiger darüber und klicken Sie auf die Schaltfläche Vorlage verwenden .

Wenn Sie Schwierigkeiten beim Erstellen Ihres Formulars haben, lesen Sie unsere ausführlichen Anweisungen zum Erstellen und vollständigen Anpassen Ihres Formulars.

3. Fügen Sie Ihrem Formular Seitenumbrüche hinzu

Sie können jetzt Ihre Seitenumbrüche und einen Fortschrittsbalken hinzufügen. Durch Hinzufügen eines Seitenumbruchs fügt das Formular automatisch den Fortschrittsbalken ein.

Sobald Sie den Formularersteller geöffnet haben, fügen Sie alle Felder hinzu, die Sie in Ihr Formular aufnehmen möchten. Ziehen Sie dann ein Seitenumbruchfeld in den Vorschaubereich und legen Sie es dort ab, wo Sie eine neue Formularseite erstellen möchten.

Jedes Seitenumbruchfeld, das Sie hinzufügen, teilt das Formular in zusätzliche Seiten auf, und Sie können so viele Seiten wie nötig hinzufügen. Um den Seitenumbruch in einen anderen Abschnitt Ihres Formulars zu verschieben, klicken Sie einfach im Vorschaubereich darauf und ziehen Sie ihn an die gewünschte Stelle.

Anpassen Ihres Fortschrittsbalkens

Nachdem Sie einen Seitenumbruch hinzugefügt haben, stellen Sie möglicherweise fest, dass im Vorschaubereich oben in Ihrem Formular ein Bereich für die erste Seite angezeigt wird. Klicken Sie auf Erste Seite / Fortschrittsanzeige , um auf die Optionen für Ihr mehrseitiges Formular zuzugreifen.

Sie können Ihren Fortschrittsbalken im Dropdown-Menü Fortschrittsanzeige anpassen.

Sie können dann aus den drei Stilen der Fortschrittsanzeige wählen: Fortschrittsbalken , Kreise oder Verbinder .

Fortschrittsanzeige:

Kreise:

Verbinder:

Um die Farbe Ihrer Fortschrittsanzeige zu ändern, verwenden Sie die Farbauswahl oder geben Sie den HEX-Code ein.

Geben Sie abschließend im Feld Seitentitel einen Namen für die erste Seite Ihres Formulars ein.

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

Möchten Sie mehr erfahren? Lesen Sie vollständig, wie Sie mehrseitige Formularanweisungen erstellen und Details anpassen, um diese Formularfunktion voll auszunutzen.

4. Speichern und veröffentlichen Sie Ihr Formular

Nachdem Sie Ihr Formular angepasst haben, können Sie es jetzt veröffentlichen. Klicken Sie zuerst auf die große orangefarbene Schaltfläche Speichern in der oberen rechten Ecke Ihres Formularerstellers.

Sie können dann den Einbettungsassistenten verwenden, um Ihr Formular in Ihre Website zu integrieren, indem Sie auf die Schaltfläche Einbetten klicken.

Von hier aus haben Sie die Möglichkeit, entweder eine neue Seite zum Einbetten Ihres Formulars zu erstellen oder eine vorhandene Seite auszuwählen, der Sie Ihr Formular hinzufügen 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“ auswä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 zu WPForms » All Forms . Bewegen Sie den Mauszeiger über den Formulartitel, um ein zusätzliches Menü mit Optionen anzuzeigen. Sobald die Optionen angezeigt werden, klicken Sie auf Vorschau .

5. Überprüfen Sie Ihren Formularfortschrittsbalken

Sie haben jetzt ein Formular mit einer ähnlichen Fortschrittsanzeige:

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 auf dem Formular nach oben oder unten verschoben werden, wenn Sie das Layout anpassen möchten.

Als nächstes werden Sie ein Formularerstellungsexperte

Möchten Sie Ihr WPForm-Building-Wissen erweitern? Lesen Sie unbedingt unseren vollständigen Leitfaden zu Formularfeldern und zum Anpassen der Felder in Ihren Formularen.

Sind Sie bereit, Ihr Formular jetzt zu erstellen? Denken Sie daran, sich für WPForms Pro anzumelden, da es das Seitenumbruchfeld und den Fortschrittsbalken sowie Hunderte von kostenlosen Vorlagen enthält und wir außerdem eine 14-tägige Geld-zurück-Garantie anbieten.

Erstellen Sie jetzt Ihr WordPress-Formular

Wenn Ihnen dieser Artikel weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter, um weitere kostenlose WordPress-Tutorials und -Anleitungen zu erhalten.