So richten Sie ein Dropdown-Feld mit Mehrfachauswahl in WordPress ein (der einfache Weg)

Veröffentlicht: 2020-10-26

Müssen Sie in WordPress ein Dropdown-Feld mit Mehrfachauswahl hinzufügen? Dropdown-Menüs zur Mehrfachauswahl sind eine großartige Möglichkeit, Benutzern mehr als eine Option aus einer Liste auszuwählen.

In diesem Artikel zeigen wir Ihnen eine einfache und schnelle Möglichkeit, Ihr eigenes Dropdown-Menü mit Mehrfachauswahl zu erstellen. Sie müssen keinen Code schreiben, um das Dropdown-Menü zu erstellen und es Ihrer Website hinzuzufügen.

Erstellen Sie jetzt Ihr WordPress-Formular

Wie wählen Sie mehrere Optionen in einem Dropdown-Menü aus?

Mit WPForms können Sie jedes Dropdown-Menü als Mehrfachauswahl-Dropdown festlegen.

Wenn Ihr Besucher auf ein Element in der Liste klickt, bleibt das Dropdown-Menü geöffnet, damit er weitere Auswahlen treffen kann.

WordPress Multi-Dropdown-Liste in einem Formular

WPForms ist das beste WordPress Form Builder-Plugin. Erhalte es kostenlos!

In dieser Dropdown-Liste können Sie auch die Auswahl durchsuchen. Es ist also perfekt für lange Listen, wie eine Dropdown-Liste von Ländern.

Wir zeigen Ihnen den einfachen Weg, selbst ein Dropdown-Menü mit Mehrfachauswahl zu erstellen.

So richten Sie ein Dropdown-Feld mit Mehrfachauswahl in WordPress ein

Werfen wir einen Blick auf die Schritte, die wir in diesem Tutorial durchlaufen werden.

  1. Installieren Sie das WPForms-Plugin
  2. Erstellen Sie Ihr Formular
  3. Fügen Sie Ihrem Formular ein Dropdown-Feld zur Mehrfachauswahl hinzu
  4. Veröffentlichen Sie Ihr Formular auf Ihrer Website

OK, beginnen wir mit der Installation des Plugins, das wir verwenden werden.

Schritt 1: Installieren Sie das WPForms-Plugin

WPForms ist der beste Formularersteller für WordPress. Mit dem Drag-and-Drop-Builder können Sie ganz einfach jedes Formular für Ihre Website erstellen.

Um mit der Erstellung Ihres Formulars zu beginnen, müssen Sie das WPForms-Plugin in WordPress installieren und aktivieren. Wenn Sie Hilfe bei diesem Schritt benötigen, lesen Sie diese Anleitung für Anfänger zur Installation eines Plugins.

Alles bereit? Lassen Sie uns weitermachen und Ihr erstes Formular erstellen.

Schritt 2: Erstellen Sie Ihr Formular

Jetzt erstellen wir ein einfaches Formular und fügen ihm ein Dropdown-Menü hinzu.

In diesem Beispiel erstellen wir ein freiwilliges Formular mit einer Datumsauswahl und einer Dropdown-Liste.

WPForms hat eine großartige Bewerbungsformularvorlage für Freiwillige. Aber für dieses Beispiel verwenden wir stattdessen das einfache Kontaktformular als Ausgangspunkt.

Öffnen Sie zunächst Ihr WordPress-Dashboard und klicken Sie auf WPForms » Neu hinzufügen .

Neues Formular hinzufügen, um ein Dropdown-Menü mit mehreren Schritten hinzuzufügen

Geben Sie oben einen Namen für Ihr Formular ein. Klicken Sie dann auf die Vorlage Einfaches Kontaktformular, um es in Ihrem Browser zu öffnen.

Öffnen Sie eine einfache Kontaktformular-Vorlage in WPForms

Jetzt ist die Vorlage geöffnet, Sie werden sehen, dass wir bereits 3 Felder haben:

  • Name
  • Email
  • Kommentar oder Nachricht

Neues Formular für Mehrfachauswahl-Dropdown-Feld erstellen

Fügen wir ein Datumsfeld hinzu, damit die Person, die das Formular ausfüllt, den Tag auswählen kann, an dem sie helfen möchte.

Ziehen Sie zunächst ein Datum / Uhrzeit- Feld von der linken Seite des Formularerstellers auf die rechte Seite. Klicken Sie anschließend einmal auf das Feld Datum / Uhrzeit, um die Einstellungen zu öffnen.

Es gibt 2 Grundeinstellungen, die wir hier anpassen werden:

  • Ändern Sie den Beschriftungstext , damit er zu Ihrem Formular passt
  • Benutzen Sie die Dropdown es zu einem Datumsfeld nur zu ändern.

Datum/Uhrzeit-Feld auf Datum ändern

Scrollen Sie nun nach unten zu Erweiterte Optionen und klicken Sie darauf, um die Einstellungen zu erweitern.

Erweitern Sie die erweiterten Optionen für das Datumsfeld

Wir möchten Freiwillige nur an Wochentagen, also klicken wir auf Tage begrenzen, damit Wochenenden ausgegraut sind. Wählen Sie dazu einfach Montag bis Freitag aus:

Begrenzen Sie die Tage im Zeit- und Datumsfeld

OK, das ist erledigt, wir können also auf Speichern klicken.

Fahren wir mit dem Hinzufügen unseres Dropdown-Menüs zur Mehrfachauswahl fort.

Schritt 3: Fügen Sie Ihrem Formular ein Dropdown-Feld zur Mehrfachauswahl hinzu

In diesem Schritt fügen wir ein Dropdown-Feld hinzu und passen es dann an, um mehrere Auswahlen zu akzeptieren.

Ziehen wir zunächst ein Dropdown-Menü auf das Formular. Klicken Sie dann auf das Feld, damit sich links die Einstellungen öffnen.

Ziehen Sie das Dropdown-Menü zur Mehrfachauswahl auf das Formular

Wenn Sie möchten, können Sie das Dropdown-Menü aus anderen Teilen von WordPress, wie Ihren Beiträgen oder Produkten, automatisch ausfüllen. In diesem Artikel erfahren Sie, wie Sie dynamische Feldauswahlen verwenden.

Aber wenn Sie die Liste hart codieren möchten, macht es WPForms einfach. Es kommt mit einigen nützlichen voreingestellten Listen für Dropdown-Felder. Um die Dinge zu beschleunigen, fügen wir eine Liste der US-Bundesstaaten hinzu, die eine der Voreinstellungen verwenden.

Fahren Sie zunächst fort und klicken Sie in den Einstellungen für das Dropdown-Feld auf Bulk Add .

Bulk-Add-Optionen zum Dropdown-Menü mit Mehrfachauswahl

Klicken Sie dann auf Voreinstellungen anzeigen , um alle verfügbaren Voreinstellungslisten zu öffnen.

Dropdown-Voreinstellungen für Mehrfachauswahl anzeigen

Klicken wir nun auf Staaten, um automatisch eine Liste der US-Bundesstaaten zu erhalten, die wir der Dropdown-Liste für die Mehrfachauswahl hinzufügen können.

Dropdown-Liste mit Mehrfachauswahl für Staaten

Die vollständige Liste der Bundesstaaten wird automatisch im Auswahlfeld angezeigt. Klicken Sie auf Neue Auswahlmöglichkeiten hinzufügen, um sie als Antwortoptionen hinzuzufügen.

Fügen Sie dem Dropdown-Menü zur Mehrfachauswahl Antwortoptionen hinzu

Ist Ihnen aufgefallen, dass das Dropdown-Feld 3 Standardantworten enthält? Vergessen Sie nicht, auf das Minuszeichen neben diesen Standardoptionen zu klicken, um sie zu entfernen.

Standardantworten aus der Dropdown-Liste mit Mehrfachauswahl entfernen

In Ordnung, das sind alle unsere Antwortmöglichkeiten, die im Dropdown-Feld eingerichtet sind.

Alles, was wir jetzt tun müssen, ist WPForms mitzuteilen, dass dies ein Mehrfachauswahlfeld sein soll.

Dazu scrollen wir auf der linken Seite nach unten und erweitern Erweiterte Optionen .

Lassen Sie uns in diesem Abschnitt die Auswahl mehrerer Optionen auswählen.

Aktivieren Sie die Auswahl mehrerer Optionen, um ein Dropdown-Menü mit Mehrfachauswahl zu erstellen

Direkt darunter gibt es eine weitere wichtige Änderung.

Ändern wir den Stil dieses Felds in ein Modern- Dropdown-Menü.

Dropdown-Menü mit Mehrfachauswahl im modernen Stil

Fragen Sie sich, warum wir dieses Feld in den Modern-Stil geändert haben?

Es gibt 3 Gründe, warum dieses Feld besser für eine Dropdown-Liste mit Mehrfachauswahl geeignet ist:

  • Das Feld Moderner Stil zeigt eine Zeile mit einem Pfeil an, um die Liste zu erweitern. Es ist also kompakter als der Classic-Stil, der immer 4 Zeilen anzeigt.
  • Im Feld Moderner Stil können Sie auf mehrere Einträge klicken, ohne Tasten auf der Tastatur gedrückt zu halten. Beim klassischen Feld muss Ihr Besucher die Strg- oder Befehlstaste auf seiner Tastatur gedrückt halten, um mehr als einen Eintrag gleichzeitig auszuwählen.
  • Und wie oben erwähnt, verfügt die Dropdown-Liste für die Mehrfachauswahl im modernen Stil über ein Suchfeld, mit dem Sie das gewünschte Element schnell finden können.

OK, also haben wir unser Dropdown-Menü so eingerichtet, wie wir es wollen. Lassen Sie uns unseren bisherigen Fortschritt speichern, indem Sie oben im Formulargenerator auf die Schaltfläche Speichern klicken.

Jetzt können wir das Formular veröffentlichen. Dies ist der letzte Schritt und dauert nur wenige Minuten.

Schritt 4: Veröffentlichen Sie Ihr Formular auf Ihrer Website

Jetzt haben wir das Formular ausgefüllt und es ist an der Zeit, es auf Ihrer WordPress-Site zu veröffentlichen.

Mit WPForms können Sie Ihre Formulare überall veröffentlichen. Sie können sie hinzufügen zu:

  • Beiträge
  • Seiten
  • Seitenleisten
  • Die WordPress-Fußzeile.

In diesem Beispiel erstellen wir eine neue Seite für das Formular.

Klicken Sie zum Starten oben im Formular- Generator auf Einbetten .

Betten Sie Ihr Mehrfachauswahl-Dropdown-Formular ein

Lassen Sie uns nun fortfahren und klicken Sie auf Neue Seite erstellen .

Neue Seite in WordPress für Mehrfachauswahl-Dropdown erstellen

Geben Sie einen Namen für Ihre Seite ein und klicken Sie dann auf Los geht's .

Klicken Sie auf die Schaltfläche Los geht's, um eine Seite für das Dropdown-Formular mit Mehrfachauswahl zu erstellen

WordPress öffnet die neue Seite und zeigt eine Vorschau Ihres Formulars an. Klicken Sie oben rechts auf die blaue Schaltfläche Veröffentlichen oder Aktualisieren .

Formular mit Mehrfachauswahl-Dropdown veröffentlichen

Jetzt ist Ihr Mehrfachauswahl-Dropdown live und einsatzbereit.

Beispiel für ein Dropdown-Menü zur Mehrfachauswahl

Und das ist es! Sie haben gelernt, wie Sie in WordPress einfach ein Dropdown-Menü mit Mehrfachauswahl erstellen.

Erstellen Sie jetzt Ihr WordPress-Formular

Nächster Schritt: Teilen Sie Ihr Formular in Seiten auf

Wenn Sie Ihr Formular kompakter gestalten möchten, sollten Sie es in mehrere Seiten aufteilen. Dies kann das Durcharbeiten langer Formulare erheblich erleichtern.

Um zu erfahren, wie Sie einem Formular Seitenumbrüche hinzufügen, lesen Sie unseren Leitfaden zum Erstellen eines mehrstufigen Formulars.

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 weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter, um weitere kostenlose WordPress-Tutorials und -Anleitungen zu erhalten.