So erlauben Sie Besuchern das Duplizieren von Formularfeldern

Veröffentlicht: 2024-06-14

Es kommt oft vor, dass Ihre Formularbenutzer sich wahrscheinlich wünschen, sie könnten die Felder in Ihren Formularen einfach duplizieren. Felder für zusätzliche Namen, Kontaktdaten, geleistete Arbeitsstunden usw. können einfach hinzugefügt werden, wenn Benutzer sie einfach wiederholen können.

Jetzt können Ihre Website-Benutzer mit dem WPForms Repeater-Feld genau das tun! In diesem Tutorial zeige ich Ihnen, wie Sie Ihre Formulare in nur 5 Schritten ändern, um doppelte Felder zuzulassen.

So erlauben Sie Besuchern das Duplizieren von Formularfeldern

In diesem Artikel

  • 1. Wählen Sie Ihr Formular aus oder erstellen Sie es
  • 2. Fügen Sie das Repeater-Feld hinzu
  • 3. Zeilen oder Blöcke anzeigen
  • 4. Wählen Sie ein Layout
  • 5. Passen Sie die Schaltflächenansicht an
  • Bonus: Das Repeater-Feld in Aktion
  • FAQ

Holen Sie sich zunächst WPForms

Ok, ich weiß, dass ich gesagt habe, dass dieses Tutorial nur 5 Schritte erfordert, also scheint das extra zu sein. Es ist jedoch eine Selbstverständlichkeit, dass WPForms auf Ihrer WordPress-Site installiert und aktiviert sein muss, um die Felder in Ihren Formularen zu duplizieren.

WPForms home

Holen Sie sich also zuerst das WPForms-Plugin!

1. Wählen Sie Ihr Formular aus oder erstellen Sie es

Das Repeater-Feld ist eine großartige Funktion, die in den Formularen enthalten ist, die Sie über WPForms erstellen. Damit können Ihre Formularbenutzer weitere Einträge hinzufügen oder ganze Blöcke des Formulars duplizieren.

Sie müssen jedoch kein völlig neues Formular erstellen, um Benutzern das Duplizieren von Feldern zu ermöglichen.

Möglicherweise verwenden Sie auf Ihrer Website bereits Formulare, die Sie mit dem Feld „Repeater“ ändern möchten. Klicken Sie einfach unter dem Formular, für das Sie den Formularersteller öffnen möchten, auf Bearbeiten .

Editing a form

Wenn Sie jedoch ein neues Formular erstellen müssen, können Sie sich einen Vorsprung verschaffen, indem Sie aus Tausenden von Formularvorlagen auswählen, die in der WPForms-Galerie bereitgestellt werden.

Wir bieten eine umfangreiche Auswahl an Formularvorlagen, die über die integrierte Repeater-Feldfunktionalität verfügen.

Browsing the Repeater field form templates

Oder Sie können eine andere Formularvorlage auswählen und das Repeater-Feld schnell mit dem Formular-Builder hinzufügen.

Und wie immer können Sie Ihr Formular von Grund auf selbst erstellen, indem Sie mit einem leeren Formular beginnen.

Erstellen Sie jetzt Ihr WordPress-Formular

2. Fügen Sie das Repeater-Feld hinzu

Sobald Sie Ihr Formular ausgewählt und in den Formular-Builder geladen haben, können Sie das Feld „Repeater“ hinzufügen.

Sie sehen es in den Feldern auf der linken Seite des Bildschirms.

Adding the Repeater field to a form

Klicken Sie einfach auf das Feld „Repeater“, ziehen Sie es auf Ihr Formular und legen Sie es dort ab, wo Sie es haben möchten.

Dann ermöglicht das Repeater-Feld, wie das Layout-Feld, das Hinzufügen anderer Felder in Ihrem Formular.

Adding fields to the Repeater field area

Welche Felder gehören also in den Abschnitt „Repeater-Felder“? Die Felder, die Ihre Formularbenutzer duplizieren dürfen.

Auf einem Gruppenregistrierungsformular möchten Benutzer beispielsweise wahrscheinlich mehrere Namen von Teilnehmern angeben, die sich gleichzeitig registrieren möchten.

Front-end view of the Repeater field

Bevor WPForms das Repeater-Feld anbot, haben Sie Ihr Formular möglicherweise mit einer Handvoll Namensfeldern verstopft, die Ihr Benutzer möglicherweise * benötigt.

Oder Sie haben möglicherweise bedingte Logikeinstellungen verwendet, um zusätzliche Namensfelder einzuschließen, wenn der Benutzer mehr einschließen wollte.

Applying conditional logic settings

Was auch immer der Fall gewesen sein mag, das Repeater-Feld erleichtert Ihnen und Ihren Formularbenutzern jetzt das Duplizieren von Feldern erheblich!

3. Zeilen oder Blöcke anzeigen

Bevor wir nun weitermachen, werfen wir einen Blick auf die Anzeigeoptionen , die auf das Feld „Repeater“ angewendet werden.

Selecting the Repeater field to display rows

Sie können nicht nur die Felder im Repeater-Feldbereich so anpassen, dass sie als einzelne Zeilen hinzugefügt werden, sondern Sie können auch die Duplizierung ganzer Feldblöcke zulassen.

Profi-Tipp : Navigieren Sie zur Registerkarte „Erweitert“, um die Feldbezeichnung „Repeater“ auszublenden, wie ich es getan habe.

Wenn Sie die Felder im Repeater-Bereich auswählen, die als Zeilen angezeigt werden sollen, duplizieren Ihre Formularbenutzer jede horizontale Linie.

Front-end view of the Repeater field block

Wie Sie oben sehen können, befinden sich die Schaltflächen + hinzufügen oder entfernen am Ende jeder Zeile.

Blöcke hingegen eignen sich gut zum Kombinieren von sich wiederholenden Feldern, die nicht in nur eine Zeile passen.

Selecting the Repeater field display as Blocks

Und bei Blöcken befinden sich die Schaltflächen + hinzufügen oder – entfernen unterhalb des gesamten Feldabschnitts. Mehr zu diesen Schaltflächen später.

In meinem Beispiel unten habe ich Blöcke als Anzeigemöglichkeit meiner wiederholbaren Felder ausgewählt. Anschließend habe ich die Felder in den Feldbereich „Repeater“ eingefügt, die Benutzer als Abschnitt duplizieren können sollen.

Front-end view of Repeater field blocks

Wenn Formularbenutzer nun einen weiteren Teilnehmer hinzufügen, können sie alle von mir benötigten Informationen im Formular für jeden Block bereitstellen.

Auf diese Weise können Formularbenutzer ganze Abschnitte des Formulars auf einmal duplizieren.

4. Wählen Sie ein Layout

Schauen Sie sich als Nächstes die verschiedenen Möglichkeiten an, wie Sie das Layout Ihrer wiederholbaren Felder gestalten können.

Selecting the Repeater field layout

Sie können Ihre Felder in einzelnen Zeilen, gleichmäßig verteilten Spalten und ungleichmäßigen Spalten einrichten.

Wenn Sie beispielsweise über wiederholbare Zeilen mit Namen und Alter der Teilnehmer verfügen, können Sie ein Layout wählen, bei dem der Name größer und das Alter kleiner ist.

Selecting the Repeater field 2 column layout

Mein Beispiel für Zeilen und Layoutspalten im Formular-Builder oben würde für einen Formularbenutzer also so aussehen:

Oder erinnern Sie sich an den Block, den ich Ihnen am Ende von Schritt 3 gezeigt habe, mit dem Namen des Teilnehmers, den Notfallkontaktinformationen und anderen Feldern?

Ich könnte ein Layout mit zwei Spalten verwenden, um diesen Teil des Formulars anzupassen.

Selecting the Repeater field 2 column layout

Dann würde es für den Benutzer etwa so aussehen:

Front-end view of the Repeater field 2 column layout

Profi-Tipp : Verwenden Sie ein einfaches, einzeiliges Namensfeld, um die Spalten gleichmäßig verteilt zu halten, wie ich es oben getan habe.

Das Ändern dieser Aspekte des Felds „Repeater“ trägt lediglich dazu bei, dass im gesamten Formular alles sauber und organisiert bleibt.

5. Passen Sie die Schaltflächenansicht an

Das Letzte, was Sie in Ihrem Repeater-Feldbereich anpassen müssen, sind die Schaltflächen „+“ und „–“ zum Hinzufügen und Entfernen von wiederholbaren Feldern.

Dies sind die Schaltflächen, auf die Ihr Formularbenutzer klickt, um Namen, Registrierungsabschnitte oder andere Felder hinzuzufügen, die Sie zum Duplizieren zur Verfügung gestellt haben.

Standardmäßig zeigen diese Schaltflächen am Ende jeder Zeile + oder – an, Sie können diese Symbole jedoch anpassen, wenn Sie einen Block verwenden.

Navigating to the Repeater field button settings

Da die Tasten unterhalb des Blocks und nicht am Ende der Reihe untergebracht sind, sorgt die Möglichkeit, dass dieser durch individuelle Anpassung länger wird, für eine optisch aufgeräumte Optik.

Wählen Sie zunächst den Schaltflächentyp aus.

Selecting the Repeater field button type

Zu den Optionen gehören hier:

  • Schaltflächen mit Symbolen
  • Tasten
  • Symbole mit Text
  • Symbole
  • Klartext

Wenn auf Ihrer Schaltfläche Text jeglicher Art angezeigt wird, können Sie ihn im nächsten Feld anpassen. Hier können Sie den Text der Schaltflächenbeschriftung ändern.

Customizing the Repeater field button labels

Auf einem Gruppenregistrierungsformular können Sie beispielsweise Ihre Schaltfläche so anpassen, dass sie „Teilnehmer hinzufügen“ lautet.

Schließlich können Sie das minimale und maximale Limit für Ihre wiederholbaren Felder auswählen.

Setting the Repeater field button limit

Standardmäßig ist dieses Limit auf mindestens 1 und höchstens 10 eingestellt. Das bedeutet, dass Formularbenutzer bis zu 10 Teilnehmer auf diesem Formular registrieren können.

Wenn Sie also die oben gezeigten Einstellungen anwenden, würde die Schaltfläche auf unserem Gruppenregistrierungsformular für Benutzer folgendermaßen aussehen:

Front-end view of the Repeater field button

Wie immer gilt: Wenn Sie mit Ihren benutzerdefinierten, wiederholbaren Feldern zufrieden sind, speichern Sie sie unbedingt Ihr Formular zur Veröffentlichung, wenn Sie bereit sind.

Und das ist alles! Sie wissen jetzt, wie Sie Website-Besuchern erlauben, Felder in Ihren Formularen zu duplizieren.

Bonus: Das Repeater-Feld in Aktion

Ich habe Ihnen gezeigt, wie Sie den Feldbereich „Repeater“ in einem Gruppenregistrierungsformular verwenden, möchte aber noch ein paar andere gute Beispiele dieser Funktion in Aktion vorstellen.

Formular zur Arbeitszeittabelle für Mitarbeiter

Werfen Sie zunächst einen Blick auf diesen Mitarbeiter-Stundenzettel, den wir als Vorlage anbieten:

Full view of the employee timesheet form template

Zuerst werden die Mitarbeiterdaten erfasst, einschließlich Name, E-Mail-Adresse des Mitarbeiters, Mitarbeiter-ID sowie die Gesamtstundenzahl für die Woche.

The employee details section of the template

Anschließend können die Mitarbeiter ihre spezifischen Arbeitstage und -stunden für die Woche eingeben und dieses Formular im Wesentlichen als wöchentlichen Stundenzettel verwenden.

The weekly timesheet section of the form template

Es verwendet wiederholbare Blöcke und Spalten, die es Benutzern ermöglichen, Felder für den Wochentag, an dem sie gearbeitet haben, zusammen mit der Ein- und Auszeit dieses Tages zu duplizieren. Diese Felder können bis zu 14 Mal oder in Doppelschichten für eine Woche wiederholt werden.

Möchten Sie dieses Formular auf Ihrer Website verwenden? Holen Sie sich die Vorlage!

Formular zur Klassenliste

Schauen Sie sich jetzt diesen Stundenplan an, den wir auch als Vorlage anbieten:

Full view of the class roster form template

Zunächst werden die Informationen des Lehrers erfasst, damit jede Einreichung leicht nachverfolgt werden kann.

The teacher information section of the form template

Mit dem Feld „Repeater“ können Lehrer dann ganz einfach Informationen zu jedem Schüler in ihrer Liste hinzufügen – etwa die Klassenstufe, den Geburtstag oder andere Daten, die sie für die Aufzeichnung einbeziehen möchten.

The class roster section of the form template

Lehrer können diese Liste für bis zu 20 Schüler verwenden. Oder wie immer ist diese Formularvorlage vollständig anpassbar, sodass die maximal zulässige Anzahl von Einträgen geändert werden kann.

Gefällt Ihnen dieses Formular? Holen Sie sich die Vorlage!

Warum sollte ich Besuchern erlauben, Formularfelder zu duplizieren?

Es ist gut für Ihre Formularbenutzer! Indem Besuchern ermöglicht wird, Formularfelder zu duplizieren, wird das Ausfüllen von Formularen erheblich vereinfacht, insbesondere wenn Benutzer ähnliche oder sich wiederholende Informationen eingeben müssen. Dadurch können Ihre Website-Besucher Zeit sparen und das Ausfüllen von Formularen komfortabler und effizienter gestalten.

Und es ist auch gut für Sie! Wenn Benutzer Formularfelder duplizieren können, ist es für Sie einfacher, Daten für die Analyse zu sammeln und zu organisieren, da ähnliche Datenpunkte gruppiert und besser verwaltbar sind.

Außerdem bleibt Ihr Formular einfach organisiert und optisch ansprechend. Ihre Website-Besucher werden nicht von langen Abschnitten mit leeren Feldern überwältigt, und Sie müssen keinen komplizierten Pfad aus bedingten Logikregeln erstellen, um zusätzliche Felder verborgen zu halten.

Das Repeater Field ist eine Win-Win-Situation für alle!

FAQ

Bei WPForms freuen wir uns immer, Ihnen Ratschläge zu den von uns bereitgestellten Funktionen und Tools geben zu können. Hier sind die Antworten auf einige unserer am häufigsten gestellten Fragen zum Duplizieren von Formularfeldern:

Was bedeutet es, Besuchern das Duplizieren von Formularfeldern zu erlauben?

Besuchern das Duplizieren von Formularfeldern zu ermöglichen bedeutet, ihnen die Möglichkeit zu geben, mehrere Instanzen eines bestimmten Felds innerhalb eines Formulars zu erstellen. Auf diese Weise können sie ähnliche oder sich wiederholende Informationen effizienter eingeben.

Bei WPForms bezeichnen wir diese Duplikate als Repeater-Felder, da Formularbenutzer diese Felder wiederholen können, um weitere Informationen einzugeben.

Wie kann ich Feldduplizierung in den Formularen meiner Website implementieren?

Die Implementierungsmethoden können je nach verwendeter Plattform oder Tools variieren.

Was WPForms betrifft, ermöglichen wir die Duplizierung von Feldern mit einem einfachen Klick oder einer Drag-and-Drop-Aktion. In anderen Fällen müssen Sie möglicherweise benutzerdefinierten Code oder Plugins verwenden, um diese Funktionalität hinzuzufügen.

Sollte ich die Anzahl der Duplikate eines Formularfelds begrenzen?

Das Festlegen von Grenzwerten kann dazu beitragen, die Benutzerfreundlichkeit des Formulars aufrechtzuerhalten und zu verhindern, dass Benutzer eine übermäßige Anzahl von Feldern erstellen, was sich auf die Formularleistung oder die Datenverwaltung auswirken könnte.

Mit dem WPForms-Repeater-Feld können Sie eine Höchstgrenze für doppelte Einträge festlegen, sodass Sie diesen Aspekt Ihres Formulars steuern können.

Erstellen Sie jetzt Ihr WordPress-Formular

Schauen Sie sich als Nächstes diese schnelle und einfache Anleitung an

Ich habe eine Menge Informationen darüber geteilt, wie man Besuchern das Duplizieren von Feldern ermöglicht, aber es gibt noch mehr zu lernen über die Verwendung des Repeater-Felds. Diese Funktion bietet so viel, dass es viel abzudecken gibt.

Weitere schnelle und einfache Tipps – einschließlich Anpassungsideen, die hier nicht behandelt werden – finden Sie in unserem Repeater-Feld-Tutorial.

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.