KI-Zusammenfassung
Möchten Sie Ihren Benutzern erlauben, mehrere Optionen in einem Dropdown-Feld auszuwählen? Das Hinzufügen eines Dropdowns mit Mehrfachauswahl zu Ihren WordPress-Formularen ermöglicht es Ihren Benutzern, viele Optionen auszuwählen, ohne ein Kontrollkästchenfeld verwenden zu müssen.
Dieses Tutorial zeigt Ihnen, wie Sie ein Dropdown-Feld mit Mehrfachauswahl in WPForms einrichten.
In diesem Artikel
Erste Schritte
Bevor wir beginnen, müssen Sie ein neues Formular erstellen oder ein vorhandenes Formular bearbeiten.
In unserem Beispiel richten wir ein Anfrageformular für Sportvereine ein. Dazu öffnen wir zunächst den Formular-Generator.
Navigieren Sie dann zum Abschnitt Standardfelder, um das Feld Dropdown zu finden. Klicken Sie einfach auf das Feld, um es zum Formular hinzuzufügen, oder ziehen Sie es per Drag & Drop in den Vorschau-Bereich Ihres Formulars.
Sobald das Feld hinzugefügt wurde, klicken Sie darauf, um den Bereich Feldoptionen zu öffnen.
Dann ändern wir die Beschriftung dieses Feldes in Wählen Sie aus, über welche(n) Verein(e) Sie mehr erfahren möchten. Wir fügen auch 4 Optionen unter Auswahlen hinzu: Schwimmen, Bogenschießen, Cricket und Tanzen.
Navigieren Sie innerhalb der Feldoptionen zum Abschnitt Erweitert und klicken Sie darauf, um zusätzliche Einstellungen zu öffnen.
Wählen Sie dann die Option Mehrfachauswahl, um sie zu aktivieren.
Anpassungsoptionen
Für das Dropdown-Feld stehen zwei verschiedene Stilkonfigurationen zur Verfügung: Klassisch oder Modern. Diese formatieren das Styling des Dropdowns jeweils auf eine etwas andere Weise. Sie können den Stil Ihres Dropdown-Feldes unter Erweitert » Stil ändern.
Klassischer Stil
Der klassische Stil listet alle Ihre Optionen in einem Feld auf. Wenn mehr als 4 Optionen zum Dropdown hinzugefügt werden, enthält das Feld eine vertikale Bildlaufleiste.
Hinweis: Der klassische Stil zeigt immer mindestens vier Zeilen an, auch wenn keine Daten in diesen Zeilen vorhanden sind.
Um mehrere Optionen auszuwählen, halten Sie die Strg-Taste (oder Cmd auf dem Mac) gedrückt, während Sie klicken. Dies fügt den von Ihnen ausgewählten Optionen einen Hervorhebungseffekt hinzu.
Moderner Stil
Der moderne Stil zeigt ein Standard-Dropdown an. Dieses Dropdown ermöglicht es Ihnen, entweder durch eine Optionsliste zu scrollen und Ihre Auswahl zu treffen, oder Suchbegriffe einzugeben, um die gewünschten Optionen zu finden.
Wenn mehrere Optionen ausgewählt sind, wird jede Option zur Dropdown-Leiste hinzugefügt.
Bedingte Logik konfigurieren
Die Konfiguration der bedingten Logik mit einem Dropdown mit Mehrfachauswahl ermöglicht es Ihnen, Felder ein- oder auszublenden, wenn ein Benutzer mehr als eine Dropdown-Auswahl trifft.
In unserem Anfrageformular für Sportvereine zeigen wir den Benutzern beispielsweise eine Nachricht an, wenn sie sowohl Schwimmen als auch Tanzen aus dem Dropdown auswählen. In unserer Nachricht teilen wir ihnen mit, dass diese Vereine zu widersprüchlichen Zeiten stattfinden.
Um dies einzurichten, fügen wir zunächst ein HTML-Feld zu unserem Formular hinzu.
Dann können wir im Abschnitt Code unsere Nachricht hinzufügen: „Achtung! Die von Ihnen gewählten Clubs treffen sich zu widersprüchlichen Zeiten.“
Danach müssen wir unsere bedingte Logik einrichten, damit das Feld nur angezeigt wird, wenn Benutzer Schwimmen und Tanzen auswählen. Dazu klicken wir auf den Abschnitt Intelligente Logik, um ihn zu öffnen, und wählen dann die Option Bedingte Logik aktivieren.
Dann legen wir die Logik so fest: Zeige dieses Feld an, wenn Wählen Sie, über welche Clubs Sie mehr erfahren möchten, Schwimmen UND Wählen Sie, über welche Clubs Sie mehr erfahren möchten, Tanzen.
Dieses Feld bleibt nun verborgen, es sei denn, ein Benutzer wählt sowohl Schwimmen als auch Tanzen aus unserem Dropdown-Feld aus.
Hinweis: Weitere Details zur Verwendung des UND-Operators finden Sie in unserem Leitfaden zur intelligenten bedingten Logik.
Das ist alles! Sie können jetzt ein Dropdown-Feld mit Mehrfachauswahl in Ihren WPForms einrichten.
Möchten Sie als Nächstes ganz einfach eine große Anzahl von Optionen für ein Dropdown-, Multiple-Choice- oder Kontrollkästchenfeld hinzufügen? Schauen Sie sich unser Tutorial an, wie Sie Choices in großen Mengen hinzufügen, um weitere Details zu erfahren!