Erstellen einer Dropdown-Liste mit mehreren Auswahlmöglichkeiten

Dropdowns mit Mehrfachauswahl erleichtern die Arbeit mit großen Listen in Formularen. Es ist nicht die einzige Möglichkeit, eine lange Liste mit mehreren auswählbaren Optionen in ein Formular einzufügen, aber es ist der prägnanteste Ansatz.

Und wenn es darum geht, Formulare zu entwerfen, die die Leute auch wirklich ausfüllen wollen, brauchen Sie etwas, das Ihr Formular nicht länger als unbedingt nötig macht.

Dennoch sehe ich Websites, die große Checklisten in Situationen verwenden, in denen sie ein saubereres Design hätten schaffen können, wenn sie sich für ein Multi Select Dropdown entschieden hätten.

Basierend auf dem, was ich gesehen habe, ist dies entweder aufgrund der Form Builder nicht unterstützt Multi Select Dropdowns, oder der Schöpfer nicht aufpassen.

Also dachte ich, ich sollte eine kurze Anleitung zusammenstellen, um zu zeigen, wie einfach es ist, Dropdowns zu Ihren Formularen in WordPress mit Mehrfachauswahloptionen hinzuzufügen.

Wie man ein Multi Select Dropdown Feld in WordPress einrichtet

Beginnen wir mit der Installation des Plugins, das wir verwenden werden.

Schritt 1: Installieren Sie das WPForms Plugin

Zunächst einmal benötigen Sie einen Formularersteller, der Dropdowns mit mehreren Auswahlmöglichkeiten unterstützt. Ich empfehle WPForms, weil ich wirklich denke, dass kein anderes WordPress-Formular-Plugin die Flexibilität und zeitsparende Funktionen auf dem gleichen Niveau bietet.

Zum Beispiel, mit WPForms Dropdowns, können Sie:

• Hinzufügen von Mehrfachauswahloptionen in Dropdowns sowohl in der kostenlosen als auch in der kostenpflichtigen Version
• Lange Listen von Optionen automatisch mit AI generieren und hinzufügen

Während Sie entweder WPForms Lite oder WPForms Pro verwenden können, um Dropdowns mit Multi-Select zu erstellen, werde ich WPForms Pro in diesem Handbuch verwenden (siehe WPForms Lite vs Pro, um mehr über die wichtigsten Unterschiede in den beiden Versionen zu erfahren).

Installieren Sie zum ersten Mal ein Plugin? Es ist unglaublich einfach. Folgen Sie den Installationsschritten, die in unserer Anleitung beschrieben sind.

Nach der Installation können Sie sofort mit der Erstellung Ihrer Formulare beginnen.

Schritt 2: Ein neues Formular erstellen

Öffnen Sie Ihr WordPress-Verwaltungsmenü. Bewegen Sie den Mauszeiger über WPForms in der Seitenleiste und klicken Sie dann auf Add New.

Mit dieser Aktion wird der Bildschirm zur Einrichtung des Formulars geladen. In diesem Beispiel möchte ich ein Buchanforderungsformular erstellen. Also gebe ich dem Formular einen passenden Namen für meine interne Referenz und wähle eine Vorlage.

Der Einfachheit halber werde ich mit dem einfachen Kontaktformular fortfahren und es später durch Hinzufügen eines Dropdowns ein wenig anpassen.

Denken Sie daran, dass Sie aus mehr als 2.000 Formularvorlagen wählen können. Sie können sogar das gesamte Formular mit AI erstellen.

Aber um die Funktionalität und die Anpassungen besser zu demonstrieren, benutze ich in diesem Fall den manuellen Weg.

Nachdem Sie Ihre Vorlage ausgewählt haben, wird der Formularersteller in wenigen Sekunden geladen.

Jede Vorlage in WPForms ist 100% anpassbar. So können Sie ganz einfach neue Felder einfügen, vorhandene Felder entfernen oder andere Einstellungen ändern.

Im nächsten Schritt füge ich ein Dropdown-Feld mit einer ziemlich langen Liste von Auswahlmöglichkeiten hinzu.

Schritt 3: Ein Dropdown-Feld hinzufügen

Ziehen wir zunächst ein Dropdown auf das Formular.

Klicken Sie dann auf das Feld, so dass sich die Einstellungen auf der linken Seite öffnen.

Im linken Bereich sehen Sie verschiedene Optionen. So können Sie beispielsweise die Bezeichnung des Feldes ändern und die Auswahlmöglichkeiten für Ihr Dropdown eingeben.

Geben wir dem Feld zunächst einen aussagekräftigeren Namen, indem wir die Bezeichnung ändern. Da ich in diesem Feld eine Liste von Büchern hinzufügen möchte, die die Benutzer anfordern können, gebe ich diesem Feld den Namen "Bücher zum Anfordern".

Nun ist es an der Zeit, die Auswahlmöglichkeiten für Ihre Dropdown-Liste hinzuzufügen. Es ist einfach genug, die Auswahlmöglichkeiten manuell hinzuzufügen, wenn Sie nur ein paar davon haben.

Wenn Sie jedoch eine lange Liste haben, können Sie viel Zeit sparen, indem Sie die KI die Auswahlen für Sie erstellen und hinzufügen lassen.

Um KI für Auswahlen zu verwenden, klicken Sie auf die lila Schaltfläche Auswahlen generieren .

Nun, beschreiben Sie die Auswahl in einfachen Worten und WPForms AI wird Ihre Liste für Sie fast augenblicklich zu generieren. Ich möchte eine Liste beliebter Bücher hinzufügen (die wahrscheinlich in jeder anständigen Bibliothek verfügbar sind), und das ist, was ich in der Eingabeaufforderung fragen werde.

Innerhalb weniger Sekunden hatte ich eine fantastische Liste, mit der ich arbeiten konnte. Aber wenn Sie die Liste massiv ändern wollen, können Sie versuchen, Ihre Eingabeaufforderung zu ändern und WPForms AI erneut bitten, die Liste zu aktualisieren.

Wenn Sie mit den Vorschlägen zufrieden sind, klicken Sie auf Auswahlen einfügen.

Die generierten Auswahlmöglichkeiten erscheinen in der Liste der Auswahlmöglichkeiten im linken Fensterbereich. Sie können diese Auswahlen auch manuell bearbeiten.

Standardmäßig kann ein Besucher immer nur eine Auswahl aus der Dropdown-Liste treffen. Aber es ist einfach, diese Einstellungen zu ändern, wie ich im nächsten Schritt zeigen werde.

Schritt 4: Bearbeiten Sie die Einstellungen für Dropdown-Felder, um die Mehrfachauswahl zu aktivieren.

Standardmäßig kann ein Besucher immer nur eine Auswahl aus der Dropdown-Liste treffen. Um dies zu ändern, gehen Sie zunächst auf die Registerkarte Erweitert des Dropdown-Feldes.

Klicken Sie anschließend auf die Auswahl "Mehrere Optionen", um sie zu aktivieren.

Großartig! Wir sind hier fast fertig. Aber ich persönlich bin kein Fan des klassischen Dropdown-Stils (das ist die Standard-Mide).

Dadurch wird das Dropdown-Menü als rechteckiges Feld mit vertikalem Bildlauf angezeigt, und Sie müssen die Strg-Taste(Befehlstaste auf dem Mac) drücken, um mehrere Optionen auszuwählen.

Sie können das Dropdown-Feld intuitiver gestalten, indem Sie den Stil von Klassisch auf Modern ändern.

Es gibt 3 Gründe, warum der moderne Stil besser für ein Multi Select Dropdown funktioniert:

• Das Feld im modernen Stil zeigt eine Zeile mit einem Pfeil zum Erweitern der Liste an. Es ist kompakter als der klassische Stil, der immer 4 Zeilen anzeigt und mehr Platz auf dem Bildschirm einnimmt.
• Mit dem Feld im modernen Stil können Sie mehrere Einträge anklicken, ohne eine Taste 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 auf einmal auszuwählen.
• Das Dropdown-Menü im modernen Stil verfügt über ein Suchfeld, mit dem Sie den gewünschten Artikel schnell finden können.

Speichern wir unseren bisherigen Fortschritt, indem wir auf die Schaltfläche Speichern am oberen Rand des Formularerstellers klicken.

Jetzt können wir das Formular veröffentlichen. Dies ist der letzte Schritt, der nur ein paar Minuten dauert.

Schritt 5: Veröffentlichen Sie Ihr Formular

Nachdem wir das Formular ausgefüllt haben, ist es nun an der Zeit, es auf Ihrer WordPress-Website zu veröffentlichen.

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

• Beiträge
• Seiten
• Seitenleisten
• Der WordPress-Footer.

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

Klicken Sie oben im Formularersteller auf Einbetten, um zu beginnen.

Klicken wir nun 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 auf die blaue Schaltfläche Veröffentlichen oben rechts.

Jetzt ist Ihr Formular mit dem Dropdown-Menü für die Mehrfachauswahl live und einsatzbereit.

Und das war's! Sie haben gelernt, wie Sie in WordPress ganz einfach ein Dropdown-Menü mit mehreren Auswahlmöglichkeiten erstellen können.

Erstellen Sie jetzt Ihr WordPress-Formular

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

Wenn Sie nach Möglichkeiten suchen, Ihr Formular kompakter zu gestalten, sollten Sie darüber nachdenken, es auf mehrere Seiten aufzuteilen. So lassen sich lange Formulare viel leichter bearbeiten.

• Wie Sie Seitenumbrüche in ein Formular einfügen können, erfahren Sie in unserer Anleitung zur Erstellung eines mehrstufigen Formulars.
• Wenn Sie ein mehrstufiges Formular erstellen möchten, um Konversionen und Leads zu steigern, lesen Sie , wie Sie ein Lead-Formular erstellen.

Sind Sie bereit, Ihr Formular zu erstellen? Starten 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 dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.