So richten Sie ein Dropdown-Feld mit Mehrfachauswahl in WordPress ein (der einfache Weg)
Veröffentlicht: 2020-10-26Mü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.
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.
- Installieren Sie das WPForms-Plugin
- Erstellen Sie Ihr Formular
- Fügen Sie Ihrem Formular ein Dropdown-Feld zur Mehrfachauswahl hinzu
- 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 .
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.
Jetzt ist die Vorlage geöffnet, Sie werden sehen, dass wir bereits 3 Felder haben:
- Name
- Kommentar oder Nachricht
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.
Scrollen Sie nun nach unten zu Erweiterte Optionen und klicken Sie darauf, um die Einstellungen zu erweitern.
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:
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.
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 .
Klicken Sie dann auf Voreinstellungen anzeigen , um alle verfügbaren Voreinstellungslisten zu öffnen.
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.
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.
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.
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.
Direkt darunter gibt es eine weitere wichtige Änderung.
Ändern wir den Stil dieses Felds in ein Modern- Dropdown-Menü.
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 .
Lassen Sie uns nun fortfahren und klicken Sie auf Neue Seite erstellen .
Geben Sie einen Namen für Ihre Seite ein und klicken Sie dann auf Los geht's .
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 .
Jetzt ist Ihr Mehrfachauswahl-Dropdown live und einsatzbereit.
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.