• Articles
• admin

Erfahren Sie, wie Sie bedingte Dropdown-Listen in WordPress mithilfe von WordPress-Formularen erstellen. Eine einfache, Code-freie, Abfrage-freie Methode.

Suchen Sie nach einer Möglichkeit, bedingte Dropdown-Listen in Formularen zu erstellen, bei denen die Optionen in einem Dropdown-Menü von der Auswahl abhängen, die eine Person in den vorherigen Dropdown-Listen getroffen hat?

Zum Beispiel ein Autohändlerformular, in dem ein Benutzer zuerst das Jahr seines Autos, dann die Marke und dann das Modell aus einer Liste von Optionen auswählt, die nur für das Jahr / die Marke gelten, die er bereits ausgewählt hat. Möglicherweise haben Sie diese Arten von Formularen auch als verkettete Formulare bezeichnet.

Diese Funktion ist sehr hilfreich, wenn Sie Formulare für Preisschätzungen, Angebote, Zahlungen usw. erstellen. Es ist auch ideal für Endbenutzer, da sie nicht durch Tonnen irrelevanter Optionen filtern müssen.

Mit Formidable Forms können Sie bedingte Dropdown-Listen direkt über eine benutzerfreundliche Oberfläche einrichten – Sie müssen sich nicht mit komplexen Abfragen oder benutzerdefinierten Codelösungen herumschlagen.

Lesen Sie weiter, um eine Schritt-für-Schritt-Anleitung zum Erstellen abhängiger Dropdown-Listen in WordPress mit Formidable Forms zu erhalten.

So erstellen Sie bedingte Dropdown-Listen mit Formidable Forms

Bevor Sie sich mit dem detaillierten Schritt-für-Schritt-Tutorial befassen, schauen wir uns auf hoher Ebene an, wie kaskadierende Dropdown-Formulare mit Formidable Forms funktionieren.

1. Erstellen Sie ein „Datenformular“, um alle Daten aufzunehmen, die Ihre kaskadierenden Dropdown-Listen füllen. Endbenutzer interagieren nicht direkt mit diesem Formular – es dient nur zum Speichern der Daten.
2. Füllen Sie Ihr „Datenformular“ mit den benötigten Daten, indem Sie Einträge hinzufügen. Wenn Sie eine Menge Daten haben, können Sie Zeit sparen, indem Sie eine CSV importieren, anstatt zu versuchen, alle Ihre Daten manuell einzugeben.
3. Erstellen Sie ein zweites „Endbenutzerformular“. Dies ist die Form, mit der Ihre menschlichen Besucher interagieren.
4. Fügen Sie dem „Endbenutzerformular“ Nachschlagefelder hinzu, damit es nach Bedarf Daten aus dem „Datenformular“ abrufen kann, um die Dropdown-Listen zu füllen.

Gehen wir es genauer durch …

In diesem Beispiel verwenden wir ein Beispiel für die Autoindustrie mit drei bedingten Dropdown-Feldern. Die Bestellung wird so gehen:

1. Der Benutzer wählt das Jahr seines Autos aus
2. Der Benutzer wählt die Marke seines Autos aus den in diesem Jahr verfügbaren Marken aus
3. Der Benutzer wählt das spezifische Modell seines Autos basierend auf dem Jahr / der Marke aus, die er ausgewählt hat

Erstellen Sie das „Datenformular“

Erstellen Sie zunächst ein neues Formular, das als ihr „Datenformular“. Auch hier interagieren Ihre Endbenutzer nicht direkt mit diesem Formular, aber das „Endbenutzerformular“, das Sie später erstellen, zieht seine Daten aus den Einträgen dieses Formulars.

Fügen Sie dann ein Textfeld für jede Dropdown-Liste hinzu, die Sie in Ihr Endbenutzerformular aufnehmen möchten. In unserem Beispiel wären das drei Textfelder für:

1. Jahr
2. Machen
3. Modell

Speichern Sie dann Ihr Formular.

Daten als Formulareinträge importieren

Als nächstes müssen Sie Ihr „Datenformular“ mit den Optionen füllen, die Sie in Ihren kaskadierenden Dropdown-Listen anzeigen möchten.

Dazu fügen Sie jedes Datenelement als Formulareintrag hinzu.

Wenn Sie einen großen Datensatz haben, ist die einfachste Methode, eine CSV-Datei zu importieren. Zum Beispiel hat unser Automobildatensatz über 7.000 Zeilen – das möchten Sie nicht manuell tun!

Wenn Sie nicht viele Daten haben, können Sie auch manuell Einträge auf der Registerkarte Einträge Ihres Datenformulars hinzufügen.

Um eine CSV in Google Forms zu importieren, stellen Sie zunächst sicher, dass die Überschriften in Ihrer CSV mit den Textfeldern in Ihrem „Datenformular“ übereinstimmen.

In Excel können Sie sehen, wie unser Beispiel CSV drei Spalten hat, von denen jede mit den Textfeldern übereinstimmt, die wir im vorherigen Schritt erstellt haben:

Sobald Sie Ihre CSV-Datei bereit haben…

• Gehen Sie zu Datei → Import / Export
• Verwenden Sie die Schaltfläche Datei auswählen, um Ihre CSV-Datei auszuwählen
• Geben Sie das CSV-Trennzeichen ein (dies ist fast immer ein Komma)
• Wählen Sie Ihr „Datenformular“ aus der Dropdown-Liste In Formular importieren
• Klicken Sie auf Datei hochladen

Stellen Sie im nächsten Bildschirm sicher, dass die Daten aus Ihrer CSV-Datei ordnungsgemäß den entsprechenden Feldern in Ihrem Formular zugeordnet sind. Klicken Sie dann auf Importieren:

Jetzt haben Sie die Daten, die Sie benötigen, um Ihre bedingten Dropdown-Listen zu füllen:

Als nächstes ist es an der Zeit, abhängige Dropdown-Listen zu erstellen, mit denen Ihre Besucher interagieren können.

Erstellen Sie ein „Endbenutzerformular“ und fügen Sie Nachschlagefelder hinzu

Erstellen Sie als Nächstes ein neues Formular. Dies wird die Form sein, die Ihre menschlichen Besucher sehen.

Sobald Sie Ihr neues Formular haben, fügen Sie ein Suchfeld hinzu und geben Sie ihm einen Namen – z. B. „Select Year“.

Suchen Sie dann die Einstellungen für Nachschlageoptionen im Feld Einstellungen und…

• Wählen Sie Ihr Datenformular mit dem Dropdown-Menü Formular auswählen aus
• Wählen Sie das Quellfeld aus, aus dem Daten abgerufen werden sollen, indem Sie das Dropdown-Menü Feld auswählen verwenden – z. B. „Jahr“

Stellen Sie sicher, dass Sie Ihre Änderungen speichern.

Fügen Sie dann ein weiteres Nachschlagefeld hinzu und konfigurieren Sie es für den nächsten Datensatz. Erst jetzt verwenden Sie auch die Schaltfläche Nachschlagefeld überwachen, um dieses Nachschlagefeld vom vorherigen Nachschlagefeld abhängig zu machen. Auf diese Weise können Sie nur Optionen anzeigen, die dem vorherigen Feld entsprechen, und diesen „Kaskadierungseffekt“ erzeugen:

Stellen Sie sicher, dass Sie Ihre Änderungen speichern.

Um die endgültige Dropdown-Liste hinzuzufügen (zumindest für unser Beispiel), fügen Sie ein weiteres Nachschlagefeld hinzu. Erst jetzt verwenden Sie die Option Watch a Lookup Field, um sie von beiden vorherigen Feldern abhängig zu machen:

Wenn Sie Ihrem Formular weitere bedingte Dropdown-Listen hinzufügen möchten, können Sie dasselbe Muster so oft wie nötig wiederholen.

Und das war’s – wenn Sie eine Vorschau Ihres Formulars anzeigen, sollten Sie diesen schönen Kaskadeneffekt sehen, wenn Sie mit Ihrem Formular interagieren:

Erstellen Sie noch heute Ihre erste bedingte Dropdown-Liste

Kaskadierende Dropdown-Formulare sind ein beliebter Ansatz, der eine großartige Option für Formulare mit Preisschätzungen, Angeboten, Zahlungen, Standorten usw. darstellt.

Mit Formidable Forms können Sie bedingte Dropdown-Listen mit beliebig vielen Bedingungen erstellen, ohne benutzerdefinierte Abfragen oder Code schreiben zu müssen.

Um es einzurichten, müssen Sie lediglich zwei Formulare erstellen und Nachschlagefelder verwenden, um die beiden zu verbinden. Bei großen Datensätzen können Sie sogar eine CSV-Datei direkt aus Excel importieren, um Ihr Datenformular auszufüllen.

Um abhängige Dropdown-Listen mit Formidable Forms zu erstellen, benötigen Sie den Formidable Forms Basic-Plan oder höher.

Wenn Sie Formidable Forms Pro noch nicht verwenden, erfahren Sie mehr über alle hilfreichen Form Builder-Funktionen, um zu verstehen, warum Formidable Forms das beste WordPress-Formular-Plugin für bedingte Dropdown-Listen ist.