So erstellen Sie ein Formular mit einem Repeater-Feld in WPForms

Veröffentlicht: 2023-10-04

Sie fragen sich, wie Sie ein WPForms-Repeater-Feld in Ihre Online-Formulare integrieren können, um mehr Daten für jede Formularübermittlung zu erfassen?

Wiederholungsfelder in Formularen ermöglichen Benutzern die Eingabe mehrerer Sätze ähnlicher Daten und machen die Formulare gleichzeitig intuitiver und benutzerfreundlicher.

In diesem Artikel zeigen wir Ihnen, wie Sie am einfachsten ein Repeater-Feld für WPForms entwerfen, um die Funktionalität und Benutzererfahrung Ihrer Website zu verbessern.

In diesem Artikel

  • 1. Abonnieren und installieren Sie WPForms Pro
  • 2. Erstellen Sie ein neues leeres Formular
  • 3. Fügen Sie ein Dropdown-Feld mit der Auswahl „Ja/Nein“ hinzu
  • 4. Wenden Sie bedingte Logik auf Ihre Formularfelder an
  • 5. Aktivieren Sie die bedingte Logik für die Dropdown-Felder
  • 6. Aktivieren Sie Formularbenachrichtigungen und -bestätigungen
  • 8. Veröffentlichen Sie Ihr Formular mit Repeater-Feldern
  • Weitere Fragen zum Repeater-Feld von WPForms

Warum ein WPForms-Repeater-Feld verwenden?

Das Schöne am WPForms-Repeater-Feld liegt in seiner Fähigkeit, die Datenerfassung zu optimieren und gleichzeitig mehrere andere Vorteile zu bieten, wie zum Beispiel:

  • Benutzerzentriertes Design: Durch die Einführung von Wiederholungsfeldern ermöglichen Sie Benutzern, den Umfang ihrer Eingaben zu bestimmen. Dies ist eine subtile Anspielung auf die Autonomie des Benutzers und verbessert das gesamte Benutzererlebnis.
  • Flexibilität beim Formulardesign: Nicht jedes Formular ist eine Einheitslösung. Mit Wiederholungsfeldern können Sie auf verschiedene Szenarien eingehen – sei es ein einzelner Eintrag oder mehrere Einträge – und so sicherstellen, dass sich Ihr Formular an unterschiedliche Anforderungen anpasst.
  • Konsistente Datenstrukturierung: Eine der Herausforderungen bei mehreren Feldern sind inkonsistente Daten. Die Daten bleiben mit Repeater-Feldern strukturiert und einheitlich, was die Backend-Verarbeitung und -Analyse vereinfacht.
  • Reduzierte Formularlänge: Anstelle eines langen, einschüchternden Formulars mit zahlreichen Feldern sorgen Wiederholungsfelder für ein übersichtlicheres Erscheinungsbild und stellen sicher, dass Benutzer nicht auf den ersten Blick überfordert werden.

Egal, ob Sie ein Unternehmer sind, der ein optimiertes Kunden-Onboarding anstrebt, oder ein Blogger, der Wert auf eine effiziente Datenerfassung legt, das WPForms-Repeater-Feld ist von unschätzbarem Wert. Lassen Sie uns in die Schritte zur Einrichtung eintauchen!

So erstellen Sie ein Formular mit einem Repeater-Feld in WPForms

Das Erstellen eines Formulars mit einem Wiederholungsfeld in WPForms ist recht einfach und erfordert lediglich ein grundlegendes Verständnis der bedingten Logik. Befolgen Sie die folgenden Schritte, um zu beginnen:

1. Abonnieren und installieren Sie WPForms Pro

Wenn es um die Erstellung einzigartiger Formulare geht, ist WPForms die beste Option. Sie können damit jede Art von Formular in WordPress erstellen und veröffentlichen. Das Formular-Plugin enthält über 1.000 Formularvorlagen, mit denen sich Repeater-Feldformulare erstellen lassen.

Da wir für dieses Handbuch bedingte Logik verwenden, um die Repeater-Felder in Ihrem Formular einzurichten, müssen Sie WPForms Pro abonnieren, das Ihnen auch Zugriff auf Premium-Integrationen, Add-ons und eine Menge nützlicher Funktionen bietet.

WPForms homepage

Nach dem Kauf eines Abonnements für WPForms Pro müssen Sie das Plugin auf Ihrer WordPress-Site installieren und aktivieren.

Jetzt erstellen wir Ihr Formular!

2. Erstellen Sie ein neues leeres Formular

Gehen Sie in Ihrem WordPress-Admin-Dashboard zu WPForms und wählen Sie „Neu hinzufügen“ aus der Liste der Optionen.

Add new form WPForms

Geben Sie Ihrem Formular als Nächstes einen Namen und wählen Sie eine vorhandene WPForms-Vorlage aus oder richten Sie einfach ein neues Formular entsprechend Ihren Anforderungen ein.

In diesem Tutorial erstellen wir ein neues Formular, um Ihnen alle wesentlichen Schritte zum Einrichten des Wiederholungsfelds zu zeigen. Wir wählen also die Option „Leeres Formular erstellen“ .

Create a blank form for repeater field

Sie werden nun zum Bildschirm „Felder“ weitergeleitet, wo verfügbare Felder im linken Bereich angezeigt werden. Auf welche Sie Zugriff haben, hängt von Ihrer Lizenzstufe ab.

WPForms fields menu

Im rechten Bereich sehen Sie eine bearbeitbare Vorschau Ihres Formulars. Da wir ein leeres Formular ausgewählt haben, erscheint dieser Abschnitt leer.

Add fields to your repeater form

Verwenden Sie den intuitiven Formularersteller von WPForms, um benutzerdefinierte Felder einfach hinzuzufügen, zu ändern und anzuordnen, um das Formular nach Ihren Wünschen anzupassen.

Für dieses Tutorial fügen wir primäre Feldtypen wie Name , Email und Phone hinzu, um die Informationen für einen einzelnen Benutzer, also Registrant 1, abzurufen.

Registration fields for repeater form

Als Nächstes führen wir Sie durch die einfachen Schritte zum Erstellen einer Repeater-Komponente über ein Dropdown-Feld und bedingte Logik.

3. Fügen Sie ein Dropdown-Feld mit der Auswahl „Ja/Nein“ hinzu

Um das Dropdown- Feld zu Ihrem Formular hinzuzufügen, können Sie entweder im linken Bereich darauf klicken oder es per Drag & Drop direkt in die Formularvorschau ziehen.

WPForms select dropdown field

Geben Sie anschließend dem Dropdown-Feld „ Beschriftung“ einen Namen wie „Weitere hinzufügen?“ und dann können Sie einfache Ja/Nein-Optionen für Choices hinzufügen.

Configure dropdown options

Als Nächstes wiederholen wir die gleichen Schritte, um die Felder „Name“ , „E-Mail “ und „ Telefonnummer “ unter dem Dropdown- Feld für Registrant 2 hinzuzufügen.

Fields below dropdown repeater form

Danach fügen wir unter „ Auswahl“ ein weiteres Dropdown-Feld mit der gleichen Beschriftung und den Optionen „Ja/Nein“ hinzu, um den Repeater-Effekt zu erzeugen.

Configure dropdown options

Dadurch können Sie einen Effekt erzeugen, bei dem jeder nachfolgende Satz von Registrantenfeldern eine bedingte Logik verwendet, die nur dann angezeigt wird, wenn der Benutzer auf „Weiteres hinzufügen?“ mit „ Ja “ geantwortet hat.

Dropdown field below repeater fields

Jetzt müssen wir die bedingte Logik auf Ihre Formularfelder anwenden, sodass nur dann zusätzliche Registrantenfelder angezeigt werden, wenn der Benutzer in Ihrem Dropdown-Menü „Ja“ auswählt.

4. Wenden Sie bedingte Logik auf Ihre Formularfelder an

Sie können dies ganz einfach tun, indem Sie in der rechten Formularvorschau auf ein beliebiges Feld klicken und unter den Feldoptionen zur Registerkarte „Smart Logic“ navigieren.

Smart Logic tab in field options

Aktivieren Sie im Menü „Smart Logic“ die Option „Bedingte Logik aktivieren“ für alle Formularfelder unter „Weitere hinzufügen?“. Dropdown- Feld, das wir zuvor erstellt haben.

Enable conditional logic for repeater field

Als Nächstes verwenden Sie die bedingte Logik, um das Feld nur dann anzuzeigen , wenn das Dropdown- Feld, z. B. „Weiteres hinzufügen?“, angezeigt wird. Ich sage „Ja.“ Wiederholen Sie dies für alle weiteren Felder darunter.

Conditional logic show field if yes

5. Aktivieren Sie die bedingte Logik für die Dropdown-Felder

Um zu verhindern, dass die Person, die das Formular ausfüllt, einen dritten Registranten hinzufügt, es sei denn, sie hat die Informationen für Registrant 2 eingegeben, müssen Sie eine bedingte Logik für das Dropdown-Feld darunter einrichten.

Aktivieren Sie dazu die Option „ Bedingte Logik aktivieren“ für das Dropdown- Feld unter den Feldern „Registrant 2 – Name“, „E-Mail“ und „Telefon“.

Enable conditional logic for dropdown field

Als Nächstes verwenden Sie die bedingte Logik, um das Feld nur anzuzeigen , wenn das Feld„Registrant 2 – E-Mail“ nicht leer ist .Dadurch entsteht der Repeater-Feldeffekt.

Dropdown field is not empty

Sie können die obigen Schritte so oft wiederholen, wie Sie möchten, um zahlreiche Registranteninformationen zu erhalten. Diese werden nur angezeigt, wenn der Benutzer auf „Weitere hinzufügen?“ mit „Ja“ antwortet.

Klicken Sie anschließend oben rechts im Formularersteller auf die Schaltfläche „Speichern“ , bevor Sie fortfahren, um sicherzustellen, dass keine Ihrer Änderungen verloren geht.

Save the form

Wir sind fast da! Jetzt müssen wir die Formularbenachrichtigungen und -bestätigungen aktivieren, die nach der Übermittlung eines Formulars angezeigt werden.

6. Aktivieren Sie Formularbenachrichtigungen und -bestätigungen

Es ist von entscheidender Bedeutung, die Nachrichten und Benachrichtigungen einzurichten, die angezeigt werden, nachdem ein Benutzer sein Registrierungsformular ausgefüllt und übermittelt hat.

Dieser Vorgang ist einfach. Wählen Sie im Form Builder-Bildschirm auf der Registerkarte „Einstellungen“ die Option „Benachrichtigungen“ aus.

Form notification settings

Benachrichtigungen werden automatisch an Administratoren gesendet. Bei Bedarf können Sie jedoch den Betreff, den Text und die Empfängerliste konfigurieren.

Enable form notifications for repeater field form

Die Nachricht, die Ihren Verbrauchern nach dem Absenden des Formulars angezeigt wird, kann dann geändert werden, indem Sie auf der Seite „Einstellungen“ die Option „Bestätigungen“ auswählen.

Form confirmation

Sie können auch die Einstellung „Bestätigungstyp“ in WPForms verwenden, um eine Nachricht anzuzeigen, auf eine andere Seite zu verlinken oder den Benutzer umzuleiten.

Customize confirmation message for repeater field form

Gut gemacht! Jetzt müssen Sie nur noch Ihr Formular auf einer vorhandenen oder neuen Seite veröffentlichen, um es öffentlich zu machen und zum Sammeln von Einsendungen bereit zu machen.

8. Veröffentlichen Sie Ihr Formular mit Repeater-Feldern

Erstellen Sie eine neue Webseite oder einen neuen Beitrag oder ändern Sie eine vorhandene. Wählen Sie anschließend das WPForms -Symbol aus, indem Sie auf die Schaltfläche „Block hinzufügen“ klicken.

Add form widget WPForms

Wählen Sie als Nächstes Ihr Repeater-Feld-Formulardesign aus dem Dropdown-Menü im WPForms-Block aus, um es Ihrer Seite oder Ihrem Beitrag hinzuzufügen.

Wenn Sie das Erscheinungsbild Ihres Formulars anpassen möchten, ist jetzt möglicherweise ein guter Zeitpunkt, es mit dem Blockeditor zu formatieren.

Repeater field form

Wenn alles so aussieht, als würde es in die richtige Richtung gehen, können Sie Ihr Formular veröffentlichen, indem Sie auf die Schaltfläche „Aktualisieren “ oder „Veröffentlichen“ klicken.

Wenn Sie mit der Veröffentlichung des Formulars fertig sind, müssen Sie nur noch das eingebettete Formular testen, um sicherzustellen, dass es im Frontend wie erwartet funktioniert.

WPForms repeater field

Weitere Fragen zum Repeater-Feld von WPForms

Das Erstellen von Repeater-Feldformularen ist ein beliebtes Thema für unsere Leser. Hier finden Sie einige schnelle Antworten auf einige der am häufigsten gestellten Fragen:

Was ist ein Repeater-Feld?

Ein Wiederholungsfeld ist ein vielseitiges Werkzeug, mit dem Benutzer dynamisch mehrere Sätze identischer Felder in einem Formular hinzufügen können. Stellen Sie es sich als „Kopieren“-Schaltfläche für eine Gruppe von Feldern vor. Es erhöht die Flexibilität bei der Eingabe wiederholbarer Daten, wie z. B. mehrerer Registrierungen.

Wie füge ich in WordPress ein Repeater-Feld hinzu?

Normalerweise benötigen Sie ein zuverlässiges WordPress-Plugin, um ein Repeater-Feld zu integrieren. WPForms, ein erstklassiger WordPress-Formularersteller, kann eine ideale Wahl sein, wenn Sie Ihren Formularen ein Wiederholungsfeld hinzufügen möchten, ohne über CSS- oder Programmierkenntnisse zu verfügen.

Was ist ein Repeater-Feld in WordPress?

Innerhalb des WordPress-Ökosystems können Sie mit einem Wiederholungsfeld eine Reihe von Unterfeldern erstellen, die vom Benutzer beim Ausfüllen des Formulars dupliziert werden können. Dies ist besonders nützlich, wenn die Anzahl der wiederholbaren Datensätze nicht vordefiniert ist.

Als Nächstes erfahren Sie, wie Sie in WordPress ein Akkordeonformular erstellen

Suchen Sie nach einer einfachen Möglichkeit, Ihrer WordPress-Website ein Akkordeon-Formulardesign hinzuzufügen? Sehen Sie sich unseren Beitrag über die einfachste Methode zum Erstellen eines Akkordeonformulars mit WPForms an, um die Benutzerfreundlichkeit und Benutzererfahrung Ihrer Website zu verbessern.

Erstellen Sie jetzt Ihr WordPress-Formular

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

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