Cum să creezi meniuri derulante în formularele WordPress

Meniurile derulante sunt elemente esențiale pentru formulare. Selectarea țării, alegerea categoriei, clasificarea preferințelor - ori de câte ori utilizatorii trebuie să aleagă dintr-o listă predefinită, meniurile derulante oferă rezultate. Acestea economisesc spațiu, standardizează datele și ghidează utilizatorii către opțiuni valide. Iată cum să creați meniuri derulante eficiente în formularele WordPress.

De ce să folosiți meniuri derulante?

Avantaje față de câmpurile de text

• Date standardizate: Fără greșeli de scriere sau variații
• Selecție ghidată: Utilizatorii văd opțiunile disponibile
• Eficient din punct de vedere al spațiului: Restrâns până la clic
• Compatibil cu dispozitivele mobile: Selector nativ pe telefoane
• Finalizare mai rapidă: Clic vs. tastare

Avantaje față de butoanele radio

• Mai potrivit pentru liste lungi: Peste 6 opțiuni se potrivesc într-un spațiu mic
• Aspect mai curat: Mai puțină dezordine vizuală
• Derulabil: Gestionează zeci de opțiuni

Când se utilizează meniurile derulante

• 6+ opțiuni (mai puține = luați în considerare butoanele radio)
• Opțiuni predefinite, cunoscute
• Selecție unică necesară
• Spațiul este limitat
• Standardizarea datelor este importantă

Crearea unui meniu derulant de bază

Pasul 1: Adăugați un câmp derulant

1. Deschideți formularul în A.F.B.
2. Găsi dropdown în tipurile de câmp
3. Trageți în formularul dvs.

Pasul 2: Configurați eticheta

Etichetă: „Cum ați aflat despre noi?” Substitut: „Selectați o opțiune...” Obligatoriu: Da/Nu

Pasul 3: Adăugați opțiuni

Introduceți fiecare opțiune pe o linie nouă:

Căutare Google Rețele sociale Prieten sau coleg Reclamă Blog sau articol Altele

Pasul 4: Previzualizare și testare

1. Salvare formular
2. Previzualizare pe frontend
3. Faceți clic pe meniul derulant pentru a verifica opțiunile
4. Trimiteți înscrierea la test

Opțiuni de configurare derulante

Setări de bază

• Casa de discuri: Întrebare sau solicitare
• Substituent: Text implicit (de exemplu, „Selectați…”)
• Necesar: Trebuie să selectați pentru a trimite
• Text de ajutor: Instructiuni aditionale

Opțiuni Setări

• Listă de opțiuni: Opțiuni disponibile
• Implicit selectat: Opțiune preselectată
• interogată: Tastați pentru a filtra
• Selectare multipla: Alegeți mai multe

Adăugarea opțiunilor derulante

Listă simplă

Opțiunea 1 Opțiunea 2 Opțiunea 3 Opțiunea 4

Cu valori diferite de etichete

Afișează un lucru, păstrează altul:

Afișaj: „Statele Unite” Valoare: „SUA” Afișaj: „Regatul Unit” Valoare: „UK”

Opțiuni grupate (Optgroups)

--- America de Nord --- Statele Unite Canada Mexic --- Europa --- Regatul Unit Germania Franța

Multe Opțiuni

Pentru liste lungi, luați în considerare:

• Ordine alfabetică
• Cele mai comune opțiuni mai întâi
• Căutare activată
• Grupări logice

Text substituent

Ce este un substituent?

Textul afișat înainte ca utilizatorul să selecteze o opțiune:

[Selectați o opțiune... ▼] ← Substitut

Exemple bune de substituenți

„Selectați țara dvs...” „Alegeți o categorie...” „Alegeți un interval orar...” „-- Vă rugăm să selectați --” „Selectați unul”

Cele mai bune practici pentru substituenți

• Ține-l scurt
• Spune clar că este o solicitare
• Nu utilizați ca o opțiune validă
• Luați în considerare formatul „– Selectați –”

Meniuri derulante cu funcție de căutare

Ce este căutabil?

Utilizatorii pot tasta pentru a filtra opțiunile:

[Tastează pentru a căuta... ▼] Tipuri de utilizatori: „ger” Emisiuni: Germania, Algeria, Niger

Când se activează opțiunea de căutare

• 20+ opțiuni
• Liste de țări/state
• Cataloage de produse
• Orice listă lungă

Activarea opțiunii Căutări posibile

1. Selectați câmpul derulant
2. Găsiți opțiunea „Se poate căuta”
3. Comutați la ON

UX cu funcție de căutare

1. Utilizatorul dă clic pe meniul derulant 2. Apare textul introdus 3. Utilizatorul introduce o potrivire parțială 4. Opțiunile filtrează în timp real 5. Utilizatorul selectează dintr-o listă filtrată

Meniuri derulante cu selecție multiplă

Selecție unică vs. selecție multiplă

Selecție unică: Utilizatorul alege O SINGURĂ opțiune Selecție multiplă: Utilizatorul alege MAI MULTE opțiuni

Când se utilizează selecția multiplă

• „Selectați toate opțiunile aplicabile”
• Interese/preferințe multiple
• Selectarea mai multor categorii
• Când casetele de selectare ar ocupa prea mult spațiu

Activarea selecției multiple

1. Selectați câmpul derulant
2. Găsiți „Permiteți selecții multiple”
3. Comutați la ON

Aspect cu selecție multiplă

[Design web, SEO, Marketing ▼] Elementele selectate sunt afișate ca etichete/cipuri

Selectare multiplă cu limite

Combinați cu selecția min/max:

„Selectați 2-4 subiecte” Min: 2 Max: 4

Exemple de configurare

Exemplul 1: Selectarea țării

Etichetă: „Țară” Substitut: „Selectați țara dvs...” Posibilitate de căutare: Da Obligatoriu: Da Opțiuni: [peste 195 de țări în ordine alfabetică]

Exemplul 2: Tipul de solicitare

Etichetă: „Despre ce este solicitarea dumneavoastră?” Substitut: „Selectați categoria...” Obligatoriu: Da Opțiuni: - Vânzări - Asistență - Facturare - Parteneriat - Presă/Media - Altele

Exemplul 3: Interval bugetar

Etichetă: „Care este bugetul dvs.” Substitut: „Selectați intervalul...” Obligatoriu: Fără Opțiuni: - Sub 1,000 USD - 1,000 USD - 5,000 USD - 5,000 USD - 10,000 USD - 10,000 USD - 25,000 USD - 25,000 USD+ - Nu sunt încă sigur

Exemplul 4: Interval orar

Etichetă: „Oră preferată pentru programare” Substitut: „Alegeți o oră...” Obligatoriu: Da Opțiuni: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Exemplul 5: Interese cu selectare multiplă

Etichetă: „Subiecte de interes” Substitut: „Selectați subiecte...” Selecție multiplă: Da Posibilitate de căutare: Da Opțiuni: - Tehnologie - Afaceri - Marketing - Design - Dezvoltare - Analiză - Securitate - AI/ML

Exemplul 6: Servicii grupate

Etichetă: „De ce serviciu aveți nevoie?” Opțiuni: --- Servicii web --- - Design site web - Dezvoltare site web - Comerț electronic --- Marketing --- - SEO - PPC - Social Media --- Asistență --- - Mentenanță - Găzduire - Consultanță

Selecție implicită

Fără setări implicite (recomandat)

[Selectați o opțiune... ▼]

Utilizatorul trebuie să aleagă în mod activ. Cel mai potrivit pentru câmpurile obligatorii.

Implicit preselectat

[Statele Unite ▼] ← Preselectat

Se utilizează când:

• O opțiune este covârșitor de comună
• Accelerează completarea formularului
• Există o implicită logică

Setare implicită

1. În lista de opțiuni, marcați opțiunea implicită
2. Sau setați „Valoare implicită” în setări

Butoane derulante vs. butoane radio

Folosește meniul derulant când

• 6+ opțiuni
• Listă lungă (țări, state)
• Spațiul este limitat
• Opțiunile sunt similare ca natură

Folosește butoanele radio când

• 2-5 variante
• Toate opțiunile ar trebui să fie vizibile
• Opțiunile au descrieri
• Comparația vizuală este importantă

Comparație alăturată

MENIU DERULANT (6+ opțiuni, ascunse până la clic): [Selectați un plan... ▼] BUTOANE RADIO (2-5 opțiuni, toate vizibile): ○ Gratuit ○ Basic (9 USD/lună) ○ Pro (29 USD/lună) ○ Enterprise (Contactați-ne)

Meniuri derulante de stilizare

Aspect implicit

Meniurile derulante moștenesc stilizarea formularului:

• Culoarea/rază chenarului
• Culoarea fundalului
• Familie/dimensiune font
• umplutură

Opțiuni de stil personalizate

• Pictogramă săgeată derulantă
• Aspectul elementului selectat
• Stările de la cursor ale opțiunilor
• Stilizarea etichetelor cu selecție multiplă

Stilizare mobilă

Meniuri derulante native pentru mobil:

• iOS: Selector de roți
• Android: Selector de materiale
• Compatibil cu sistemul de operare

Cele mai bune practici

1. Ordonați opțiunile logic

• Alfabetic: Țări, nume
• Numeric: Cantități, intervale
• Frecventa: Cel mai frecvent primul
• Cronologic: Intervale orare, date

2. Opțiunile trebuie să fie concise

Bun: „Statele Unite” De evitat: „Statele Unite ale Americii (SUA)” Bun: „1,000 - 5,000 USD” De evitat: „Între o mie și cinci mii de dolari”

3. Includeți „Altele” atunci când este cazul

Opțiuni: - Google - Facebook - LinkedIn - Recomandare de la un prieten - Altele ← Detectează cazurile limită

4. Folosește un substituent, nu prima opțiune

Bun: Substitut: „Selectați...” Opțiuni: Opțiunea 1, Opțiunea 2, Opțiunea 3 Evitați: Opțiuni: „Selectați...”, Opțiunea 1, Opțiunea 2 (Prima opțiune nu ar trebui să fie o solicitare)

5. Activați căutarea pentru liste lungi

Orice meniu derulant cu 15-20+ opțiuni ar trebui să poată fi căutat.

6. Luați în considerare performanța de încărcare

Listele extrem de lungi (peste 1000) ar putea necesita:

• Lazy încărcare
• Căutare pe partea de server
• Împărțirea în subcategorii

Cazuri comune de utilizare a meniurilor derulante

Formulare de contact

- Departament (Vânzări, Asistență, Facturare) - Tipul solicitării (Întrebare, Feedback, Reclamație) - Cum ați aflat despre noi

Formulare de înregistrare

- Țară - Stat/Provincie - Industrie - Mărimea companiei - Funcție/rol

Formulare de comandă

- Selecție produs - Cantitate - Variante mărime/culoare - Metodă de livrare

Formulare de sondaj

- Scale de evaluare (1-10) - Frecvență (Niciodată până Întotdeauna) - Acord (Dezacord total până Acord total)

Formulare de rezervare

- Tipul serviciului - Data preferată - Interval orar - Durata

Depanare

Meniul derulant nu afișează opțiunile

• Verificați dacă opțiunile sunt salvate
• Verificați dacă lista de opțiuni este goală
• Ștergeți memoria cache și actualizați

Căutarea nu funcționează

• Confirmați că opțiunea de căutare este activată
• Verificați erorile JavaScript
• Testează în alt browser

Selecția multiplă nu salvează toate selecțiile

• Verificați dacă selecția multiplă este activată
• Verificați gestionarea trimiterii formularului
• Testați cu mai puține selecții

Selectorul mobil nu apare

• Stilul personalizat poate înlocui stilul nativ
• Test pe un dispozitiv mobil real
• Verificați dacă există conflicte JavaScript

Accesibilitate

Navigare prin tastatură

• Tab pentru meniul derulant focalizare
• Tastele săgeată pentru navigare
• Enter/Space pentru a selecta
• Tastați prima literă pentru a sări

Cititoare de ecran

• Etichetă asociată corect
• Opțiuni anunțate
• Selecția a fost confirmată

Cele mai bune practici

• Etichete clare și descriptive
• Ordinea logică a opțiunilor
• Evitați substituentul ca singură instrucțiune

Rezumat

Crearea meniurilor derulante:

1. Adăugați un câmp derulant – Trageți pentru a forma
2. Setați eticheta – Întrebare/prompt clar
3. Adăugați un substituent – Textul „Selectați…”
4. Introduceți opțiuni – Unul pe linie
5. Activează opțiunea de căutare – Pentru liste lungi
6. Activează selecția multiplă – Dacă sunt necesare mai multe opțiuni
7. Setul este necesar – Pe baza nevoilor formularului
8. Testați temeinic – Toate opțiunile, toate dispozitivele

Concluzie

Meniurile derulante gestionează eficient selecția opțiunilor în formulare. Acestea economisesc spațiu, standardizează datele și funcționează bine pe diferite dispozitive. Pentru liste scurte, luați în considerare butoanele radio. Pentru liste lungi, activați căutarea. Pentru selecții multiple, utilizați modul de selecție multiplă. Configurația corectă face ca meniurile derulante să fie câmpuri de introducere puternice, care îmbunătățesc atât experiența utilizatorului, cât și calitatea datelor.

Constructor automat de formulare include câmpuri derulante complet funcționale cu mod de căutare, opțiune de selecție multiplă și stilizare personalizată. Creați meniuri de selecție profesionale în câteva minute.

Ești gata să adaugi meniuri derulante? Descărcați Auto Form Builder și începe să creezi formulare cu meniuri derulante chiar azi.