Sådan opretter du dropdown-menuer i WordPress-formularer

Dropdown-menuer er formularens arbejdsheste. Valg af land, valg af kategori, præferencerangering – når brugerne skal vælge fra en foruddefineret liste, leverer dropdown-menuer. De sparer plads, standardiserer data og guider brugerne til gyldige muligheder. Sådan opretter du effektive dropdown-menuer i dine WordPress-formularer.

Hvorfor bruge dropdown-menuer?

Fordele i forhold til tekstfelter

• Standardiserede data: Ingen stavefejl eller variationer
• Guidet udvælgelse: Brugere ser tilgængelige muligheder
• Pladseffektiv: Skjult indtil der klikkes på
• Mobilvenlig: Indbygget vælger på telefoner
• Hurtigere færdiggørelse: Klik vs. type

Fordele i forhold til radioknapper

• Bedre til lange lister: 6+ muligheder passer på lille plads
• Renere udseende: Mindre visuelt rod
• Rulbar: Håndter snesevis af muligheder

Hvornår skal man bruge dropdown-menuer

• 6+ muligheder (færre = overvej radioknapper)
• Foruddefinerede, kendte muligheder
• Enkelt valg kræves
• Pladsen er begrænset
• Datastandardisering er vigtig

Oprettelse af en grundlæggende dropdown-menu

Trin 1: Tilføj et rullemenufelt

1. Åbn din formular i A.F.B.
2. Finde Dropdown i felttyper
3. Træk til din formular

Trin 2: Konfigurer etiket

Etiket: "Hvordan hørte du om os?" Pladsholder: "Vælg en mulighed..." Obligatorisk: Ja/Nej

Trin 3: Tilføj muligheder

Indtast hver mulighed på en ny linje:

Google-søgning Sociale medier Ven eller kollega Annonce Blog eller artikel Andet

Trin 4: Forhåndsvisning og test

1. Gem formular
2. Forhåndsvisning på frontend
3. Klik på rullemenuen for at bekræfte mulighederne
4. Indsend testbidrag

Indstillinger for rullemenukonfiguration

Grundlæggende indstillinger

• Etiket: Spørgsmål eller forespørgsel
• Pladsholder: Standardtekst (f.eks. "Vælg...")
• Påkrævet: Skal vælges for at indsende
• Hjælpetekst: Yderligere instruktioner

Valgmuligheder Indstillinger

• Liste over muligheder: Tilgængelige valg
• Standard valgt: Forudvalgt mulighed
• Søgbar: Skriv for at filtrere
• Flervalg: Vælg flere

Tilføjelse af rullemenuindstillinger

Enkel liste

Mulighed 1 Mulighed 2 Mulighed 3 Mulighed 4

Med værdier, der er forskellige fra etiketter

Vis én ting frem, opbevar en anden:

Visning: "USA" Værdi: "US" Visning: "Storbritannien" Værdi: "UK"

Grupperede muligheder (Optgroups)

--- Nordamerika --- USA Canada Mexico --- Europa --- Storbritannien Tyskland Frankrig

Mange muligheder

For lange lister, overvej:

• Alfabetisk rækkefølge
• De mest almindelige muligheder først
• Søgbarhed aktiveret
• Logiske grupperinger

Pladsholdertekst

Hvad er en pladsholder?

Teksten, der vises, før brugeren vælger en mulighed:

[Vælg en mulighed... ▼] ← Pladsholder

Gode ​​eksempler på pladsholdere

"Vælg dit land..." "Vælg en kategori..." "Vælg et tidsrum..." "-- Vælg venligst --" "Vælg én"

Bedste praksis for pladsholdere

• Hold det kort
• Gør det klart, at det er en prompt
• Brug ikke som en gyldig mulighed
• Overvej formatet "– Vælg –"

Søgbare rullemenuer

Hvad er søgbart?

Brugere kan skrive for at filtrere muligheder:

[Skriv for at søge... ▼] Brugertyper: "ger" Viser: Tyskland, Algeriet, Niger

Hvornår skal søgbar aktiveres

• 20+ muligheder
• Lande-/statslister
• Produktkataloger
• Enhver lang liste

Aktivering af søgbar

1. Vælg rullemenu
2. Find muligheden "Søgbar"
3. Slå TIL

Søgbar brugeroplevelse

1. Bruger klikker på rullemenuen 2. Tekstinput vises 3. Bruger indtaster delvist match 4. Indstillinger filtreres i realtid 5. Bruger vælger fra filtreret liste

Rullemenuer med flere valgmuligheder

Enkelt vs. flervalg

Enkeltvalg: Brugeren vælger ÉN mulighed. Flervalg: Brugeren vælger FLERE muligheder.

Hvornår skal man bruge multivalg

• "Vælg alle relevante svar"
• Flere interesser/præferencer
• Valg af flere kategorier
• Når afkrydsningsfelter fylder for meget

Aktivering af flervalg

1. Vælg rullemenu
2. Find "Tillad flere valg"
3. Slå TIL

Udseende med flere valgmuligheder

[Webdesign, SEO, Marketing ▼] Udvalgte elementer vist som tags/chips

Flervalg med begrænsninger

Kombinér med min/max-valg:

"Vælg 2-4 emner" Min: 2 Maks: 4

Konfigurationseksempler

Eksempel 1: Valg af land

Etiket: "Land" Pladsholder: "Vælg dit land..." Søgbar: Ja Påkrævet: Ja Valgmuligheder: [195+ lande alfabetisk]

Eksempel 2: Forespørgselstype

Etiket: "Hvad handler din forespørgsel om?" Pladsholder: "Vælg kategori..." Obligatorisk: Ja Valgmuligheder: - Salg - Support - Fakturering - Partnerskab - Presse/Medier - Andet

Eksempel 3: Budgetinterval

Etiket: "Hvad er dit budget?" Pladsholder: "Vælg interval..." Obligatorisk: Ingen Valgmuligheder: - Under $1,000 - $1,000 - $5,000 - $5,000 - $10,000 - $10,000 - $25,000 - $25,000+ - Ikke sikker endnu

Eksempel 4: Tidsrum

Etiket: "Foretrukket aftaletidspunkt" Pladsholder: "Vælg et tidspunkt..." Obligatorisk: Ja Valgmuligheder: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Eksempel 5: Interesser med flere valgmuligheder

Etiket: "Emner af interesse" Pladsholder: "Vælg emner..." Flervalg: Ja Søgbar: Ja Valgmuligheder: - Teknologi - Forretning - Marketing - Design - Udvikling - Analyse - Sikkerhed - AI/ML

Eksempel 6: Grupperede tjenester

Etiket: "Hvilken service har du brug for?" Muligheder: --- Webtjenester --- - Webdesign - Webudvikling - E-handel --- Marketing --- - SEO - PPC - Sociale medier --- Support --- - Vedligeholdelse - Hosting - Konsulentbistand

Standardvalg

Ingen standard (anbefales)

[Vælg en mulighed... ▼]

Brugeren skal aktivt vælge. Bedst til obligatoriske felter.

Forudvalgt standard

[USA ▼] ← Forudvalgt

Brug når:

• Én mulighed er overvældende almindelig
• Fremskynder udfyldelsen af ​​formularer
• Logisk standard findes

Indstilling af standard

1. Markér standardindstillingen i listen over valgmuligheder
2. Eller indstil "Standardværdi" i indstillingerne

Dropdown vs. radioknapper

Brug rullemenuen når

• 6+ muligheder
• Lang liste (lande, stater)
• Pladsen er begrænset
• Valgmulighederne er af lignende art

Brug radioknapper når

• 2-5 muligheder
• Alle muligheder skal være synlige
• Valgmuligheder har beskrivelser
• Visuel sammenligning er vigtig

Side-by-side sammenligning

RULLMENU (6+ muligheder, skjult indtil der klikkes på dem): [Vælg en plan... ▼] ALTERNATIVKNAPPER (2-5 muligheder, alle synlige): ○ Gratis ○ Basic ($9/md.) ○ Pro ($29/md.) ○ Enterprise (Kontakt os)

Styling-rullemenuer

Standardudseende

Rullemenuer arver formularstyling:

• Kantfarve/radius
• Baggrundsfarve
• Skriftfamilie/størrelse
• Polstring

Brugerdefinerede stylingmuligheder

• Rullemenu-pilikon
• Udseende af valgt element
• Valgmulighedssvævetilstande
• Stilisering af tags med flere valgmuligheder

Mobil styling

Indbyggede mobil-dropdowns:

• iOS: Hjulvælger
• Android: Materialevælger
• I overensstemmelse med operativsystemet

Best Practices

1. Logisk sortering af muligheder

• Alfabetisk: Lande, navne
• Numerisk: Mængder, intervaller
• Frekvens: Mest almindelige først
• Kronologisk: Tidsrum, datoer

2. Hold mulighederne koncise

Godt: "USA" Undgå: "Amerikas Forenede Stater (USA)" Godt: "$1,000 - $5,000" Undgå: "Mellem tusind og fem tusind dollars"

3. Medtag "Andet", når det er relevant

Muligheder: - Google - Facebook - LinkedIn - Vennehenvisning - Andet ← Opfanger marginale tilfælde

4. Brug pladsholder, ikke første valgmulighed

God: Pladsholder: "Vælg..." Muligheder: Mulighed 1, Mulighed 2, Mulighed 3 Undgå: Muligheder: "Vælg...", Mulighed 1, Mulighed 2 (Første mulighed bør ikke være en prompt)

5. Aktivér søgning efter lange lister

Enhver rullemenu med 15-20+ muligheder burde være søgbar.

6. Overvej indlæsningsydelsen

Ekstremt lange lister (1000+) kan kræve:

• Lazy loading
• Søgning på serversiden
• Opdeling i underkategorier

Almindelige brugsscenarier for dropdown-menuer

Kontakt formularer

- Afdeling (Salg, Support, Fakturering) - Forespørgselstype (Spørgsmål, Feedback, Klage) - Hvordan hørte du om os

Registreringsformularer

- Land - Stat/Provins - Branche - Virksomhedsstørrelse - Jobtitel/rolle

Bestillingsformularer

- Produktvalg - Antal - Størrelses-/farvevarianter - Forsendelsesmetode

Undersøgelsesformularer

- Vurderingsskalaer (1-10) - Hyppighed (Aldrig til Altid) - Enighed (Helt uenig til Helt enig)

Bookingformularer

- Servicetype - Foretrukken dato - Tidsrum - Varighed

Fejlfinding

Rullemenuen viser ikke muligheder

• Bekræft, at indstillingerne er gemt
• Tjek for en tom liste over valgmuligheder
• Ryd cachen og opdater

Søgning virker ikke

• Bekræft, at søgbarhed er aktiveret
• Tjek JavaScript-fejl
• Test i en anden browser

Multivalg gemmer ikke alle valg

• Bekræft, at flervalg er aktiveret
• Tjek håndtering af formularindsendelse
• Test med færre valg

Mobilvælger vises ikke

• Brugerdefineret styling kan tilsidesætte native
• Test på en faktisk mobil enhed
• Tjek for JavaScript-konflikter

Tilgængelighed

Tastaturnavigation

• Tab for at fokusere på rullemenuen
• Piletaster til at navigere
• Enter/Mellemrum for at vælge
• Skriv det første bogstav for at hoppe

Skærmlæsere

• Etiket korrekt tilknyttet
• Muligheder annonceret
• Valg bekræftet

Best Practices

• Tydelige, beskrivende etiketter
• Logisk rækkefølge af muligheder
• Undgå pladsholder som eneste instruktion

Resumé

Oprettelse af rullemenuer:

1. Tilføj rullemenufelt – Træk til formular
2. Angiv etiket – Tydelig spørgsmål/opfordring
3. Tilføj pladsholder – “Vælg…” tekst
4. Indtast valgmuligheder – En pr. linje
5. Aktivér søgbar – Til lange lister
6. Aktivér flervalg – Hvis der er behov for flere valgmuligheder
7. Sæt påkrævet – Baseret på formkrav
8. Test grundigt – Alle muligheder, alle enheder

Konklusion

Rullemenuer håndterer effektivt valg af muligheder i formularer. De sparer plads, standardiserer data og fungerer godt på tværs af enheder. Overvej alternativknapper til korte lister. Aktiver søgning til lange lister. Brug flervalgstilstand til flere valg. Den rigtige konfiguration gør rullemenuer til effektive inputfelter, der forbedrer både brugeroplevelsen og datakvaliteten.

Automatisk formularbygger Inkluderer fuldt funktionelle rullemenuer med søgbar tilstand, mulighed for at vælge flere elementer og brugerdefineret styling. Opret professionelle valgmenuer på få minutter.

Klar til at tilføje rullemenuer? Download automatisk formularbygger og begynd at oprette formularer med rullemenuer i dag.