Ako vytvoriť rozbaľovacie ponuky vo formulároch WordPress

Ako vytvoriť rozbaľovacie ponuky vo formulároch WordPress

Rozbaľovacie ponuky sú ťažnými koňmi formulárov. Výber krajiny, výber kategórie, poradie preferencií – vždy, keď si používatelia potrebujú vybrať z preddefinovaného zoznamu, rozbaľovacie ponuky poslúžia. Šetria miesto, štandardizujú údaje a vedú používateľov k platným možnostiam. Tu je návod, ako vytvoriť efektívne rozbaľovacie ponuky vo formulároch WordPressu.

Prečo používať rozbaľovacie ponuky?

Výhody oproti textovým poliam

  • Štandardizované údaje: Žiadne preklepy ani variácie
  • Sprievodca výberom: Používatelia vidia dostupné možnosti
  • Priestorovo efektívne: Zbalené, kým sa naň nekliklo
  • Vhodné pre mobilné zariadenia: Natívny výber na telefónoch
  • Rýchlejšie dokončenie: Kliknutie verzus typ

Výhody oproti prepínacím tlačidlám

  • Lepšie pre dlhé zoznamy: 6+ možností sa zmestí do malého priestoru
  • Čistejší vzhľad: Menej vizuálneho neporiadku
  • Posúvateľné: Zvládnite desiatky možností

Kedy použiť rozbaľovacie ponuky

  • 6+ možností (menej = zvážte prepínače)
  • Preddefinované, známe možnosti
  • Vyžaduje sa jeden výber
  • Priestor je obmedzený
  • Štandardizácia údajov je dôležitá

Vytvorenie základného rozbaľovacieho zoznamu

Krok 1: Pridanie rozbaľovacieho poľa

  1. Otvorte formulár v A.F.B.
  2. nájsť rozbaľovací v typoch polí
  3. Presuňte do formulára

Krok 2: Konfigurácia štítku

Štítok: „Ako ste sa o nás dozvedeli?“ Zástupný symbol: „Vyberte možnosť...“ Povinné: Áno/Nie

Krok 3: Pridajte možnosti

Každú možnosť zadajte na novom riadku:

Vyhľadávanie Google Sociálne médiá Priateľ alebo kolega Reklama Blog alebo článok Iné

Krok 4: Náhľad a test

  1. Uložiť formulár
  2. Náhľad na frontende
  3. Kliknite na rozbaľovaciu ponuku a overte možnosti
  4. Odoslať testovací príspevok

Možnosti konfigurácie rozbaľovacej ponuky

základné nastavenie

  • Label: Otázka alebo výzva
  • Zástupný symbol: Predvolený text (napr. „Vybrať…“)
  • Požadovaný: Musíte vybrať pre odoslanie
  • Pomocný text: Dodatočné pokyny

Možnosti Nastavenia

  • Zoznam možností: Dostupné možnosti
  • Predvolená hodnota: Predvolená možnosť
  • Vyhľadávateľné: Zadajte text pre filtrovanie
  • Viacnásobný výber: Vyberte viacero

Pridanie možností rozbaľovacej ponuky

Jednoduchý zoznam

Možnosť 1 Možnosť 2 Možnosť 3 Možnosť 4

S hodnotami odlišnými od označení

Jednu vec vystavte, druhú uskladnite:

Zobrazenie: „Spojené štáty“ Hodnota: „USA“ Zobrazenie: „Spojené kráľovstvo“ Hodnota: „UK“

Zoskupené možnosti (Optgroups)

--- Severná Amerika --- Spojené štáty americké Kanada Mexiko --- Európa --- Spojené kráľovstvo Nemecko Francúzsko

Mnoho možností

V prípade dlhých zoznamov zvážte:

  • Abecedné poradie
  • Najbežnejšie možnosti ako prvé
  • Vyhľadávateľné povolené
  • Logické zoskupenia

Zástupný text

Čo je zástupný symbol?

Text zobrazený predtým, ako používateľ vyberie možnosť:

[Vyberte možnosť... ▼] ← Zástupný symbol

Dobré príklady zástupných symbolov

„Vyberte si krajinu...“ „Vyberte kategóriu...“ „Vyberte časový úsek...“ „-- Vyberte si --“ „Vyberte jednu možnosť“

Najlepšie postupy pre zástupné symboly

  • Nechajte to krátke
  • Dajte jasne najavo, že ide o výzvu
  • Nepoužívajte ako platnú možnosť
  • Zvážte formát „– Vyberte –“

Vyhľadávateľné rozbaľovacie ponuky

Čo je vyhľadávateľné?

Používatelia môžu filtrovať možnosti zadaním textu:

[Zadajte text pre vyhľadávanie... ▼] Typy používateľov: „ger“ Zobrazuje: Nemecko, Alžírsko, Niger

Kedy povoliť vyhľadávanie

  • 20+ možností
  • Zoznamy krajín/štátov
  • Katalógy výrobkov
  • Akýkoľvek dlhý zoznam

Povolenie vyhľadávania

  1. Vyberte rozbaľovacie pole
  2. Nájsť možnosť „Vyhľadávateľné“
  3. Zapnite

Vyhľadávateľné používateľské rozhranie

1. Používateľ klikne na rozbaľovaciu ponuku 2. Zobrazí sa textové pole 3. Používateľ zadá čiastočnú zhodu 4. Možnosti filtrovania v reálnom čase 5. Používateľ vyberie z filtrovaného zoznamu

Rozbaľovacie ponuky s viacerými možnosťami výberu

Jednoduchý vs. viacnásobný výber

Jeden výber: Používateľ vyberie JEDNU možnosť Viacnásobný výber: Používateľ vyberie VIACERO možností

Kedy použiť viacnásobný výber

  • „Vyberte všetky možnosti, ktoré sa vzťahujú na daný problém“
  • Viaceré záujmy/preferencie
  • Výber viacerých kategórií
  • Kedy by zaškrtávacie políčka zaberali príliš veľa miesta

Povolenie viacnásobného výberu

  1. Vyberte rozbaľovacie pole
  2. Nájdite možnosť „Povoliť viacero výberov“
  3. Zapnite

Vzhľad s možnosťou výberu viacerých položiek

[Webdizajn, SEO, Marketing ▼] Vybrané položky zobrazené ako tagy/čipy

Viacnásobný výber s obmedzeniami

Kombinujte s výberom min/max:

„Vyberte 2 – 4 témy“ Min: 2 Max: 4

Príklady konfigurácie

Príklad 1: Výber krajiny

Štítok: „Krajina“ Zástupný symbol: „Vyberte si krajinu...“ Vyhľadávateľné: Áno Povinné: Áno Možnosti: [viac ako 195 krajín abecedne]

Príklad 2: Typ dopytu

Štítok: „O čom je vaša otázka?“ Zástupný symbol: „Vyberte kategóriu...“ Povinné: Áno Možnosti: - Predaj - Podpora - Fakturácia - Partnerstvo - Tlač/Médiá - Iné

Príklad 3: Rozsah rozpočtu

Štítok: „Aký je váš rozpočet?“ Zástupný symbol: „Vyberte rozsah...“ Povinné: Nie Možnosti: - Menej ako 1 000 USD - 1 000 USD - 5 000 USD - 5 000 USD - 10 000 USD - 10 000 USD - 25 000 USD - 25 000 USD+ - Zatiaľ si nie som istý

Príklad 4: Časový úsek

Štítok: „Preferovaný čas stretnutia“ Zástupný symbol: „Vyberte čas...“ Povinné: Áno Možnosti: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Príklad 5: Viacnásobný výber záujmov

Štítok: „Témy záujmu“ Zástupný symbol: „Vybrať témy...“ Viacnásobný výber: Áno Vyhľadávateľné: Áno Možnosti: - Technológia - Obchod - Marketing - Dizajn - Vývoj - Analytika - Bezpečnosť - AI/ML

Príklad 6: Zoskupené služby

Štítok: „Ktorú službu potrebujete?“ Možnosti: --- Webové služby --- - Dizajn webových stránok - Vývoj webových stránok - E-commerce --- Marketing --- - SEO - PPC - Sociálne médiá --- Podpora --- - Údržba - Hosting - Konzultácie

Predvolený výber

Žiadne predvolené nastavenie (odporúčané)

[Vyberte možnosť... ▼]

Používateľ si musí aktívne vybrať. Najlepšie pre povinné polia.

Predvolené nastavenie

[Spojené štáty ▼] ← Predbežne vybrané

Použite, keď:

  • Jedna možnosť je prevažne bežná
  • Zrýchľuje vypĺňanie formulárov
  • Existuje logická predvolená hodnota

Predvolené nastavenie

  1. V zozname možností označte predvolenú možnosť
  2. Alebo nastavte „Predvolenú hodnotu“ v nastaveniach

Rozbaľovacie verzus prepínače

Použite rozbaľovací zoznam, keď

  • 6+ možností
  • Dlhý zoznam (krajiny, štáty)
  • Priestor je obmedzený
  • Možnosti sú si podobné

Použite prepínače, keď

  • 2-5 možnosti
  • Všetky možnosti by mali byť viditeľné
  • Možnosti majú popisy
  • Vizuálne porovnanie je dôležité

Porovnanie vedľa seba

ROZBAĽOVACIA PONUKA (6+ možností, skryté, kým na ne nekliknete): [Vyberte plán... ▼] PREPÍNAČE (2 – 5 možností, všetky viditeľné): ○ Zadarmo ○ Základná (9 USD/mesiac) ○ Pro (29 USD/mesiac) ○ Podniková (Kontaktujte nás)

Rozbaľovacie ponuky pre štýly

Predvolený vzhľad

Rozbaľovacie ponuky dedia štýl formulára:

  • Farba/polomer okraja
  • Farba pozadia
  • Rodina/veľkosť písma
  • Vypchávka

Možnosti vlastného štýlu

  • Ikona šípky rozbaľovacej ponuky
  • Vzhľad vybranej položky
  • Stavy možnosti, ktoré sa nachádzajú pri umiestnení kurzora myši
  • Štýlovanie značiek s viacerými výbermi

Mobilný štýl

Natívne rozbaľovacie ponuky pre mobilné zariadenia:

  • iOS: Výber pomocou kolieska
  • Android: Výber materiálu
  • V súlade s operačným systémom

Osvedčené postupy

1. Logické usporiadanie možností

  • Abecedne: Krajiny, názvy
  • Číselné: Množstvá, rozsahy
  • Frekvencia: Najbežnejšie ako prvé
  • Chronologické: Časové úseky, dátumy

2. Udržujte možnosti stručné

Dobré: „Spojené štáty“. Vyhnite sa: „Spojené štáty americké (USA)“. Dobré: „1 000 – 5 000 USD“. Vyhnite sa: „Medzi tisíc a päťtisíc dolármi“.

3. V prípade potreby uveďte aj „Iné“

Možnosti: - Google - Facebook - LinkedIn - Odporučenie priateľa - Iné ← Zachytáva okrajové prípady

4. Použite zástupný symbol, nie prvú možnosť

Dobré: Zástupný symbol: „Vybrať...“ Možnosti: Možnosť 1, Možnosť 2, Možnosť 3 Nepoužívajte: Možnosti: „Vybrať...“, Možnosť 1, Možnosť 2 (Prvá možnosť by nemala byť výzvou)

5. Povoliť vyhľadávanie pre dlhé zoznamy

Akákoľvek rozbaľovacia ponuka s 15 až 20+ možnosťami by mala byť vyhľadateľná.

6. Zvážte výkon načítavania

Extrémne dlhé zoznamy (1000+) môžu vyžadovať:

  • Lazy loading
  • Vyhľadávanie na strane servera
  • Rozdelenie do podkategórií

Bežné prípady použitia rozbaľovacích ponúk

Kontaktné formuláre

- Oddelenie (predaj, podpora, fakturácia) - Typ dopytu (otázka, spätná väzba, sťažnosť) - Ako ste sa o nás dozvedeli

Registračné formuláre

- Krajina - Štát/Provincia - Odvetvie - Veľkosť spoločnosti - Pracovná pozícia/pozícia

Objednávkové formuláre

- Výber produktu - Množstvo - Varianty veľkostí/farieb - Spôsob dopravy

Formuláre prieskumu

- Hodnotiace stupnice (1-10) - Frekvencia (nikdy až vždy) - Súhlas (rozhodne nesúhlasím až rozhodne súhlasím)

Rezervačné formuláre

- Typ služby - Preferovaný dátum - Časový úsek - Trvanie

Riešenie problémov

Rozbaľovací zoznam nezobrazuje možnosti

  • Overenie uloženia možností
  • Skontrolujte prázdny zoznam možností
  • Vymazať vyrovnávaciu pamäť a obnoviť

Vyhľadávanie nefunguje

  • Potvrďte, že je povolené vyhľadávanie
  • Skontrolujte chyby JavaScriptu
  • Otestujte v inom prehliadači

Viacnásobný výber neukladá všetky výbery

  • Overte, či je povolený viacnásobný výber
  • Skontrolujte spracovanie odoslaného formulára
  • Test s menším počtom možností

Mobilný výber sa nezobrazuje

  • Vlastný štýl môže prepísať natívne
  • Test na skutočnom mobilnom zariadení
  • Kontrola konfliktov v JavaScripte

Prístupnosť

Navigácia pomocou klávesnice

  • Tab pre zaostrenie na rozbaľovaciu ponuku
  • Šípky na navigáciu
  • Enter/medzerník pre výber
  • Napíšte prvé písmeno pre skok

Čítačky obrazovky

  • Správne priradený štítok
  • Oznámené možnosti
  • Výber potvrdený

Osvedčené postupy

  • Jasné a popisné štítky
  • Logické poradie opcií
  • Vyhnite sa zástupnému symbolu ako jedinej inštrukcii

zhrnutie

Vytváranie rozbaľovacích ponúk:

  1. Pridať rozbaľovacie pole – Presunutím vytvorte formulár
  2. Nastaviť štítok – Jasná otázka/výzva
  3. Pridať zástupný symbol – Text „Vybrať…“
  4. Zadajte možnosti – Jeden na riadok
  5. Povoliť vyhľadávanie – Pre dlhé zoznamy
  6. Povoliť viacnásobný výber – Ak je potrebných viacero možností
  7. Požadovaná sada – Na základe potrieb formulára
  8. Dôkladne otestujte – Všetky možnosti, všetky zariadenia

Záver

Rozbaľovacie ponuky efektívne spracovávajú výber možností vo formulároch. Šetria miesto, štandardizujú údaje a dobre fungujú na rôznych zariadeniach. Pre krátke zoznamy zvážte prepínače. Pre dlhé zoznamy povoľte vyhľadávanie. Pre viacero výberov použite režim viacnásobného výberu. Správna konfigurácia robí z rozbaľovacích ponúk účinné vstupné polia, ktoré zlepšujú používateľskú skúsenosť aj kvalitu údajov.

Automatický tvorca formulárov zahŕňa plne funkčné rozbaľovacie polia s vyhľadávacím režimom, možnosťou viacnásobného výberu a vlastným štýlom. Vytvorte si profesionálne výberové menu za pár minút.

Ste pripravení pridať rozbaľovacie ponuky? Stiahnite si automatický nástroj na tvorbu formulárov a začnite vytvárať formuláre s rozbaľovacími ponukami ešte dnes.

Nechaj odpoveď

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *