Wie man Dropdown-Menüs in WordPress-Formularen erstellt

Dropdown-Menüs sind unverzichtbare Helfer in Formularen. Länderauswahl, Kategoriewahl, Prioritätenreihenfolge – immer wenn Nutzer aus einer vordefinierten Liste auswählen müssen, sind Dropdown-Menüs die ideale Lösung. Sie sparen Platz, standardisieren Daten und führen Nutzer zu den passenden Optionen. Hier erfahren Sie, wie Sie effektive Dropdown-Menüs in Ihren WordPress-Formularen erstellen.

Warum Dropdown-Menüs verwenden?

Vorteile gegenüber Textfeldern

• Standardisierte Daten: Keine Tippfehler oder Abweichungen
• Geführte Auswahl: Dem Benutzer werden die verfügbaren Optionen angezeigt.
• Platzsparend: Ausgeblendet, bis man darauf klickt
• Handyfreundlich: Native Picker auf Smartphones
• Schnellere Fertigstellung: Klicken vs. Tippen

Vorteile gegenüber Radiobuttons

• Besser geeignet für lange Listen: 6+ Optionen passen auf kleinem Raum
• Saubereres Erscheinungsbild: Weniger visuelle Unordnung
• Scrollbar: Dutzende von Optionen verwalten

Wann verwendet man Dropdown-Menüs?

• 6 oder mehr Optionen (weniger = Optionsfelder in Betracht ziehen)
• Vordefinierte, bekannte Optionen
• Eine Auswahl ist erforderlich
• Der Platz ist begrenzt
• Datenstandardisierung wichtig

Erstellen eines einfachen Dropdown-Menüs

Schritt 1: Dropdown-Feld hinzufügen

1. Öffnen Sie Ihr Formular in AFB
2. Finde Dropdown in Feldtypen
3. Ziehen Sie es in Ihr Formular.

Schritt 2: Beschriftung konfigurieren

Bezeichnung: „Wie sind Sie auf uns aufmerksam geworden?“ Platzhalter: „Bitte wählen Sie eine Option aus…“ Erforderlich: Ja/Nein

Schritt 3: Optionen hinzufügen

Geben Sie jede Option in einer neuen Zeile ein:

Google-Suche Soziale Medien Werbung von Freunden oder Kollegen Blog oder Artikel Sonstiges

Schritt 4: Vorschau und Test

1. Formular speichern
2. Vorschau im Frontend
3. Klicken Sie auf das Dropdown-Menü, um die Optionen zu überprüfen.
4. Testeintrag einreichen

Dropdown-Konfigurationsoptionen

Grundeinstellungen

• Etikette: Frage oder Aufforderung
• Platzhalter: Standardtext (z. B. „Auswählen…“)
• Erforderlich: Zum Absenden auswählen.
• Hilfetext: Zusätzliche Anweisungen

Optionen Einstellungen

• Optionsliste: Verfügbare Optionen
• Standardmäßig ausgewählt: Vorgewählte Option
• durchsuchbar: Zum Filtern eingeben
• Mehrfachauswahl: Wählen Sie mehrere

Hinzufügen von Dropdown-Optionen

Einfache Liste

Option 1 Option 2 Option 3 Option 4

Mit Werten, die von den Bezeichnungen abweichen

Das eine anzeigen, das andere speichern:

Anzeige: „Vereinigte Staaten“ Wert: „US“ Anzeige: „Vereinigtes Königreich“ Wert: „UK“

Gruppierte Optionen (Optgroups)

--- Nordamerika --- Vereinigte Staaten Kanada Mexiko --- Europa --- Vereinigtes Königreich Deutschland Frankreich

Viele Optionen

Bei langen Listen sollten Sie Folgendes beachten:

• Alphabetischer Reihenfolge
• Die häufigsten Optionen zuerst
• Suchfunktion aktiviert
• Logische Gruppierungen

Platzhaltertext

Was ist ein Platzhalter?

Der Text, der angezeigt wird, bevor der Benutzer eine Option auswählt:

[Option auswählen... ▼] ← Platzhalter

Gute Platzhalterbeispiele

"Land auswählen..." "Kategorie auswählen..." "Zeitfenster auswählen..." "-- Bitte auswählen --" "Bitte auswählen"

Best Practices für Platzhalter

• Halt dich kurz
• Machen Sie deutlich, dass es sich um eine Aufforderung handelt.
• Diese Option ist nicht gültig.
• Beachten Sie das Format „– Auswählen –“.

Suchbare Dropdown-Menüs

Was ist durchsuchbar?

Nutzer können die Optionen durch Eingabe filtern:

[Zum Suchen eingeben... ▼] Nutzereingabe: "ger" Ergebnisse: Deutschland, Algerien, Niger

Wann sollte die Suchfunktion aktiviert werden?

• Über 20 Optionen
• Länder-/Bundeslandlisten
• Produktkataloge
• Jede lange Liste

Suchfunktion aktivieren

1. Dropdown-Feld auswählen
2. Option „Durchsuchbar“ finden
3. Umschalten

Suchbare Benutzeroberfläche

1. Der Benutzer klickt auf das Dropdown-Menü. 2. Ein Texteingabefeld erscheint. 3. Der Benutzer gibt eine Teilübereinstimmung ein. 4. Die Optionen werden in Echtzeit gefiltert. 5. Der Benutzer wählt aus der gefilterten Liste aus.

Mehrfachauswahl-Dropdowns

Einzel- vs. Mehrfachauswahl

Einfachauswahl: Der Benutzer wählt EINE Option aus. Mehrfachauswahl: Der Benutzer wählt MEHRERE Optionen aus.

Wann sollte man die Mehrfachauswahl verwenden?

• „Mehrere Antworten möglich“
• Mehrere Interessen/Präferenzen
• Auswahl mehrerer Kategorien
• Wenn Kontrollkästchen zu viel Platz einnehmen würden

Mehrfachauswahl aktivieren

1. Dropdown-Feld auswählen
2. Suchen Sie nach „Mehrfachauswahl zulassen“.
3. Umschalten

Mehrfachauswahl Erscheinungsbild

[Webdesign, SEO, Marketing ▼] Ausgewählte Elemente werden als Tags/Chips angezeigt

Mehrfachauswahl mit Einschränkungen

Kombinieren Sie dies mit der Min-/Max-Auswahl:

„Wählen Sie 2–4 Themen aus“ Min.: 2 Max.: 4

Konfigurationsbeispiele

Beispiel 1: Länderauswahl

Bezeichnung: „Land“ Platzhalter: „Wählen Sie Ihr Land…“ Suchbar: Ja Erforderlich: Ja Optionen: [195+ Länder alphabetisch]

Beispiel 2: Anfragetyp

Bezeichnung: „Worum geht es in Ihrer Anfrage?“ Platzhalter: „Kategorie auswählen…“ Erforderlich: Ja Optionen: – Vertrieb – Support – Abrechnung – Partnerschaft – Presse/Medien – Sonstiges

Beispiel 3: Budgetbereich

Bezeichnung: „Wie hoch ist Ihr Budget?“ Platzhalter: „Bereich auswählen…“ Erforderlich: Nein Optionen: – Unter 1,000 € – 1,000 € – 5,000 € – 5,000 € – 10,000 € – 10,000 € – 25,000 € – Über 25,000 € – Noch unentschlossen

Beispiel 4: Zeitfenster

Bezeichnung: „Wunschtermin“ Platzhalter: „Bitte wählen Sie eine Uhrzeit…“ Erforderlich: Ja Optionen: – 9:00 Uhr – 10:00 Uhr – 11:00 Uhr – 1:00 Uhr – 2:00 Uhr – 3:00 Uhr – 4:00 Uhr

Beispiel 5: Mehrfachauswahl von Interessen

Bezeichnung: „Interessante Themen“ Platzhalter: „Themen auswählen…“ Mehrfachauswahl: Ja Suchbar: Ja Optionen: – Technologie – Wirtschaft – Marketing – Design – Entwicklung – Analytik – Sicherheit – KI/ML

Beispiel 6: Gruppierte Dienste

Bezeichnung: „Welchen Service benötigen Sie?“ Optionen: --- Webdienste --- - Webdesign - Webentwicklung - E-Commerce --- Marketing --- - SEO - PPC - Social Media --- Support --- - Wartung - Hosting - Beratung

Standardauswahl

Kein Standardwert (empfohlen)

[Wählen Sie eine Option... ▼]

Der Benutzer muss die Auswahl aktiv treffen. Am besten geeignet für Pflichtfelder.

Vorausgewählter Standard

[Vereinigte Staaten ▼] ← Vorausgewählt

Verwenden Sie es, wenn:

• Eine Option ist überwiegend üblich.
• Beschleunigt das Ausfüllen des Formulars
• Logischer Standardwert vorhanden

Standardeinstellung

1. In der Optionsliste die Standardoption markieren
2. Oder legen Sie in den Einstellungen einen „Standardwert“ fest.

Dropdown-Menüs vs. Optionsfelder

Dropdown-Menü verwenden, wenn

• Über 6 Optionen
• Lange Liste (Länder, Bundesstaaten)
• Der Platz ist begrenzt
• Die Optionen sind von ähnlicher Natur

Verwenden Sie Optionsfelder, wenn

• 2-5 Optionen
• Alle Optionen sollten sichtbar sein.
• Die Optionen haben Beschreibungen.
• Visueller Vergleich wichtig

Direktvergleich

Dropdown-Menü (6+ Optionen, erst nach Anklicken sichtbar): [Plan auswählen... ▼] Optionsfelder (2-5 Optionen, alle sichtbar): ○ Kostenlos ○ Basic (9 €/Monat) ○ Pro (29 €/Monat) ○ Enterprise (Kontaktieren Sie uns)

Styling-Dropdowns

Standarddarstellung

Dropdown-Menüs übernehmen das Formular-Styling:

• Rahmenfarbe/Radius
• Hintergrundfarbe
• Schriftart/Schriftgröße
• Polsterung

Individuelle Styling-Optionen

• Dropdown-Pfeilsymbol
• Erscheinungsbild des ausgewählten Elements
• Optionen beim Überfahren mit der Maus
• Formatierung von Mehrfachauswahl-Tags

Mobiles Styling

Native mobile Dropdown-Menüs:

• iOS: Radauswahl
• Android: Materialauswahl
• Konform mit dem Betriebssystem

Praxisbeispiele

1. Optionen logisch ordnen

• Alphabetisch: Länder, Namen
• Numerisch: Mengen, Bereiche
• Frequenz: Am häufigsten zuerst
• Chronologisch: Zeitfenster, Daten

2. Optionen prägnant halten

Gut: „Vereinigte Staaten“ Vermeiden: „Vereinigte Staaten von Amerika (USA)“ Gut: „1,000–5,000 $“ Vermeiden: „Zwischen eintausend und fünftausend Dollar“

3. Fügen Sie gegebenenfalls „Sonstige“ hinzu.

Optionen: - Google - Facebook - LinkedIn - Freundesempfehlung - Sonstige ← Berücksichtigt Sonderfälle

4. Platzhalter verwenden, nicht die erste Option

Gut: Platzhalter: „Auswählen…“ Optionen: Option 1, Option 2, Option 3 Vermeiden: Optionen: „Auswählen…“, Option 1, Option 2 (Die erste Option sollte keine Eingabeaufforderung sein)

5. Suche nach langen Listen aktivieren

Jedes Dropdown-Menü mit 15-20 oder mehr Optionen sollte durchsuchbar sein.

6. Berücksichtigen Sie die Ladeleistung.

Extrem lange Listen (über 1000 Einträge) benötigen möglicherweise Folgendes:

• Faules Laden
• Serverseitige Suche
• Aufteilung in Unterkategorien

Häufige Anwendungsfälle für Dropdown-Menüs

Kontaktformulare

- Abteilung (Vertrieb, Support, Abrechnung) - Art der Anfrage (Frage, Feedback, Beschwerde) - Wie sind Sie auf uns aufmerksam geworden?

Anmeldeformulare

- Land - Bundesland/Provinz - Branche - Unternehmensgröße - Berufsbezeichnung/Funktion

Bestellformulare

- Produktauswahl - Menge - Größen-/Farbvarianten - Versandart

Umfrageformulare

- Bewertungsskala (1-10) - Häufigkeit (Nie bis Immer) - Zustimmung (Stimme überhaupt nicht zu bis Stimme voll und ganz zu)

Buchungsformulare

- Serviceart - Wunschtermin - Zeitfenster - Dauer

Problemlösung

Dropdown-Menü zeigt keine Optionen an

• Überprüfen Sie, ob die Optionen gespeichert wurden.
• Prüfen, ob die Optionsliste leer ist
• Cache leeren und aktualisieren

Suche funktioniert nicht

• Bestätigen Sie, dass die Suchfunktion aktiviert ist.
• JavaScript-Fehler prüfen
• Test in verschiedenen Browsern

Mehrfachauswahl speichert nicht alle Auswahlen

• Prüfen Sie, ob die Mehrfachauswahl aktiviert ist.
• Prüfen Sie die Bearbeitung von Formularübermittlungen.
• Test mit weniger Auswahlmöglichkeiten

Mobile-Auswahl wird nicht angezeigt

• Benutzerdefinierte Stile können native Stile überschreiben.
• Test auf einem echten Mobilgerät
• Auf JavaScript-Konflikte prüfen

Barierrefreiheit

Tastaturnavigation

• Tabulatortaste zum Fokussieren Dropdown-Menü
• Pfeiltasten zur Navigation
• Eingabetaste/Leertaste zum Auswählen
• Geben Sie den ersten Buchstaben ein, um zu springen

Bildschirmleser

• Etikett korrekt zugeordnet
• Optionen angekündigt
• Auswahl bestätigt

Praxisbeispiele

• Klare, beschreibende Etiketten
• Logische Optionsreihenfolge
• Platzhalter nur als Anweisung verwenden

Zusammenfassung

Dropdown-Menüs erstellen:

1. Dropdown-Feld hinzufügen – Zum Formen ziehen
2. Bezeichnung festlegen – Klare Frage/Aufforderung
3. Platzhalter hinzufügen – „Auswählen…“-Text
4. Optionen eingeben – Eins pro Zeile
5. Suchfunktion aktivieren – Für lange Listen
6. Mehrfachauswahl aktivieren – Falls mehrere Auswahlmöglichkeiten erforderlich sind
7. Set erforderlich – Basierend auf den Formanforderungen
8. Testen Sie gründlich – Alle Optionen, alle Geräte

Fazit

Dropdown-Menüs ermöglichen eine effiziente Auswahl von Optionen in Formularen. Sie sparen Platz, standardisieren Daten und funktionieren auf allen Geräten einwandfrei. Für kurze Listen eignen sich Optionsfelder. Bei langen Listen sollte die Suchfunktion aktiviert werden. Für Mehrfachauswahl verwenden Sie den Mehrfachauswahlmodus. Mit der richtigen Konfiguration werden Dropdown-Menüs zu leistungsstarken Eingabefeldern, die sowohl die Benutzerfreundlichkeit als auch die Datenqualität verbessern.

Automatischer Formulargenerator Enthält voll ausgestattete Dropdown-Felder mit Suchmodus, Mehrfachauswahloption und individueller Formatierung. Erstellen Sie professionelle Auswahlmenüs in wenigen Minuten.

Bereit, Dropdown-Menüs hinzuzufügen? Laden Sie den automatischen Formulargenerator herunter. und beginnen Sie noch heute mit der Erstellung von Formularen mit Dropdown-Menüs.