Jak tworzyć menu rozwijane w formularzach WordPress

Menu rozwijane to prawdziwe konie pociągowe formularzy. Wybór kraju, wybór kategorii, ranking preferencji – zawsze, gdy użytkownicy muszą dokonać wyboru z predefiniowanej listy, menu rozwijane sprawdzają się znakomicie. Oszczędzają miejsce, standaryzują dane i kierują użytkowników do prawidłowych opcji. Oto jak tworzyć efektywne menu rozwijane w formularzach WordPress.

Dlaczego warto korzystać z menu rozwijanych?

Zalety w porównaniu z polami tekstowymi

• Dane standaryzowane: Bez literówek i wariantów
• Wybór kierowany: Użytkownicy widzą dostępne opcje
• Oszczędność miejsca: Zwinięte do momentu kliknięcia
• Przyjazny dla urządzeń mobilnych: Natywny selektor na telefonach
• Szybsze ukończenie: Kliknij a wpisz

Zalety w porównaniu z przyciskami radiowymi

• Lepiej sprawdza się w przypadku długich list: 6+ opcji mieści się w małej przestrzeni
• Czystszy wygląd: Mniej wizualnego bałaganu
• Przewijalne: Zarządzaj dziesiątkami opcji

Kiedy używać list rozwijanych

• 6+ opcji (mniej = rozważ przyciski radiowe)
• Predefiniowane, znane opcje
• Wymagany pojedynczy wybór
• Miejsce jest ograniczone
• Ważne jest ujednolicenie danych

Tworzenie podstawowej listy rozwijanej

Krok 1: Dodaj pole rozwijane

1. Otwórz formularz w A.F.B.
2. Znajdź Dropdown w typach pól
3. Przeciągnij do formularza

Krok 2: Skonfiguruj etykietę

Etykieta: „Skąd się o nas dowiedziałeś?” Symbol zastępczy: „Wybierz opcję...” Wymagane: Tak/Nie

Krok 3: Dodaj opcje

Wprowadź każdą opcję w nowym wierszu:

Wyszukiwarka Google Media społecznościowe Znajomy lub współpracownik Reklama Blog lub artykuł Inne

Krok 4: Podgląd i testowanie

1. Zapisz formularz
2. Podgląd w interfejsie użytkownika
3. Kliknij menu rozwijane, aby sprawdzić opcje
4. Prześlij wpis testowy

Opcje konfiguracji listy rozwijanej

Podstawowe ustawienia

• Nazwa Pytanie lub podpowiedź
• Symbol zastępczy: Tekst domyślny (np. „Wybierz…”)
• Wymagany: Należy wybrać, aby przesłać
• Tekst pomocy: Dodatkowe instrukcje

Ustawienia opcji

• Lista opcji: Dostępne opcje
• Domyślnie wybrano: Opcja wstępnie wybrana
• Poszukiwane: Wpisz, aby filtrować
• Wybór wielokrotny: Wybierz wiele

Dodawanie opcji rozwijanych

Prosta lista

Opcja 1 Opcja 2 Opcja 3 Opcja 4

Z wartościami różnymi od etykiet

Wyświetlaj jedną rzecz, przechowuj inną:

Wyświetl: „Stany Zjednoczone” Wartość: „US” Wyświetl: „Wielka Brytania” Wartość: „UK”

Opcje grupowane (Optgroups)

--- Ameryka Północna --- Stany Zjednoczone Kanada Meksyk --- Europa --- Wielka Brytania Niemcy Francja

Dużo opcji

W przypadku długich list należy wziąć pod uwagę:

• Porządek alfabetyczny
• Najczęściej wybierane opcje na początek
• Możliwość wyszukiwania
• Grupy logiczne

Tekst zastępczy

Co to jest Placeholder?

Tekst wyświetlany przed wyborem opcji przez użytkownika:

[Wybierz opcję... ▼] ← Symbol zastępczy

Dobre przykłady symboli zastępczych

„Wybierz swój kraj...” „Wybierz kategorię...” „Wybierz przedział czasowy...” „-- Proszę wybrać --” „Wybierz jeden”

Najlepsze praktyki dotyczące symboli zastępczych

• Trzymaj to krótko
• Wyjaśnij, że to jest monit
• Nie używaj jako prawidłowej opcji
• Rozważ format „– Wybierz –”

Przeszukiwalne listy rozwijane

Co to jest „przeszukiwalne”?

Użytkownicy mogą filtrować opcje, wpisując:

[Wpisz, aby wyszukać... ▼] Typy użytkowników: „ger” Wyświetla: Niemcy, Algieria, Niger

Kiedy włączyć funkcję wyszukiwania

• Ponad 20 opcji
• Listy krajów/stanów
• Katalogi produktów
• Jakakolwiek długa lista

Włączanie funkcji wyszukiwania

1. Wybierz pole rozwijane
2. Znajdź opcję „Wyszukiwalna”
3. Włącz

Przeszukiwalny UX

1. Użytkownik klika menu rozwijane 2. Pojawia się pole wprowadzania tekstu 3. Użytkownik wpisuje częściowe dopasowanie 4. Opcje filtrowania w czasie rzeczywistym 5. Użytkownik dokonuje wyboru z listy filtrowanej

Rozwijane listy wielokrotnego wyboru

Wybór pojedynczy a wybór wielokrotny

Wybór pojedynczy: Użytkownik wybiera JEDNĄ opcję Wybór wielokrotny: Użytkownik wybiera WIELE opcji

Kiedy używać funkcji wielokrotnego wyboru

• „Zaznacz wszystkie, które mają zastosowanie”
• Wiele zainteresowań/preferencji
• Wybieranie wielu kategorii
• Gdy pola wyboru zajmują zbyt dużo miejsca

Włączanie wielokrotnego wyboru

1. Wybierz pole rozwijane
2. Znajdź „Zezwalaj na wielokrotny wybór”
3. Włącz

Wygląd wielokrotnego wyboru

[Projektowanie stron internetowych, SEO, Marketing ▼] Wybrane elementy wyświetlane jako tagi/chipy

Wybór wielokrotny z limitami

Połącz z wyborem min/maks:

„Wybierz 2-4 tematy” Min.: 2 Maks.: 4

Przykłady konfiguracji

Przykład 1: Wybór kraju

Etykieta: „Kraj” Symbol zastępczy: „Wybierz swój kraj...” Możliwość wyszukiwania: Tak Wymagane: Tak Opcje: [ponad 195 krajów alfabetycznie]

Przykład 2: Typ zapytania

Etykieta: „Czego dotyczy Twoje zapytanie?” Symbol zastępczy: „Wybierz kategorię…” Wymagane: Tak Opcje: - Sprzedaż - Wsparcie - Rozliczenia - Partnerstwo - Prasa/Media - Inne

Przykład 3: Zakres budżetu

Etykieta: „Jaki jest Twój budżet?” Symbol zastępczy: „Wybierz zakres...” Wymagane: Nie Opcje: - Poniżej 1,000 USD - 1,000 USD - 5,000 USD - 5,000 USD - 10 000 USD - 10 000 USD - 25 000 USD - Powyżej 25 000 USD - Jeszcze nie jestem pewien

Przykład 4: Przedział czasowy

Etykieta: „Preferowana godzina spotkania” Symbol zastępczy: „Wybierz godzinę...” Wymagane: Tak Opcje: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Przykład 5: Wielokrotny wybór zainteresowań

Etykieta: „Tematy, które Cię interesują” Symbol zastępczy: „Wybierz tematy...” Wybór wielokrotny: Tak Możliwość wyszukiwania: Tak Opcje: - Technologia - Biznes - Marketing - Projektowanie - Rozwój - Analityka - Bezpieczeństwo - AI/ML

Przykład 6: Usługi zgrupowane

Etykieta: „Jakiej usługi potrzebujesz?” Opcje: --- Usługi internetowe --- - Projektowanie stron internetowych - Tworzenie stron internetowych - E-commerce --- Marketing --- - SEO - PPC - Media społecznościowe --- Wsparcie --- - Konserwacja - Hosting - Doradztwo

Wybór domyślny

Brak ustawień domyślnych (zalecane)

[Wybierz opcję... ▼]

Użytkownik musi dokonać aktywnego wyboru. Najlepiej wybrać pola wymagane.

Wstępnie wybrany domyślny

[Stany Zjednoczone ▼] ← Wstępnie wybrane

Stosuj, gdy:

• Jedna opcja jest niezwykle powszechna
• Przyspiesza wypełnianie formularzy
• Istnieje logiczna wartość domyślna

Ustawienie domyślne

1. Na liście opcji zaznacz opcję domyślną
2. Lub ustaw „Wartość domyślną” w ustawieniach

Menu rozwijane kontra przyciski radiowe

Użyj listy rozwijanej, gdy

• Ponad 6 opcji
• Długa lista (kraje, stany)
• Miejsce jest ograniczone
• Opcje mają podobną naturę

Użyj przycisków radiowych, gdy

• 2-5 opcje
• Wszystkie opcje powinny być widoczne
• Opcje mają opisy
• Ważne jest porównanie wizualne

Porównanie obok siebie

ROZWIJANA LINIA (6+ opcji, ukrytych do momentu kliknięcia): [Wybierz plan... ▼] PRZYCISKI RADIO (2-5 opcji, wszystkie widoczne): ○ Bezpłatny ○ Podstawowy (9 USD/mies.) ○ Pro (29 USD/mies.) ○ Enterprise (Skontaktuj się z nami)

Stylizacja rozwijanych menu

Wygląd domyślny

Listy rozwijane dziedziczą style formularzy:

• Kolor/promień obramowania
• Kolor tła
• Rodzina/rozmiar czcionki
• Wyściółka

Opcje niestandardowego stylu

• Ikona strzałki rozwijanej
• Wygląd wybranego elementu
• Stany najechania kursorem na opcję
• Stylizacja znaczników wielokrotnego wyboru

Stylizacja mobilna

Natywne menu rozwijane dla urządzeń mobilnych:

• iOS: selektor kół
• Android: Selektor materiałów
• Zgodne z systemem operacyjnym

Najlepsze praktyki

1. Logiczne zamawianie opcji

• Alfabetyczny: Kraje, nazwy
• Liczbowy: Ilości, zakresy
• Częstotliwość: Najczęściej pierwszy
• Chronologiczny: Przedziały czasowe, daty

2. Utrzymuj zwięzłe opcje

Dobrze: „Stany Zjednoczone” Unikaj: „Stany Zjednoczone Ameryki (USA)” Dobrze: „1,000–5,000 USD” Unikaj: „Od tysiąca do pięciu tysięcy dolarów”

3. W razie potrzeby uwzględnij „Inne”

Opcje: - Google - Facebook - LinkedIn - Polecenie znajomego - Inne ← Wychwytuje skrajne przypadki

4. Użyj symbolu zastępczego, a nie pierwszej opcji

Dobrze: Symbol zastępczy: „Wybierz…” Opcje: Opcja 1, Opcja 2, Opcja 3 Unikaj: Opcje: „Wybierz…”, Opcja 1, Opcja 2 (Pierwsza opcja nie powinna być monitem)

5. Włącz wyszukiwanie długich list

Każda lista rozwijana zawierająca 15–20+ opcji powinna umożliwiać przeszukiwanie.

6. Weź pod uwagę wydajność ładowania

W przypadku wyjątkowo długich list (ponad 1000) konieczne może być:

• Powolne ładowanie
• Wyszukiwanie po stronie serwera
• Podział na podkategorie

Typowe przypadki użycia menu rozwijanego

Formularze kontaktowe

- Dział (Sprzedaż, Wsparcie, Rozliczenia) - Typ zapytania (Pytanie, Opinia, Skarga) - Skąd się o nas dowiedziałeś

Formularze rejestracyjne

- Kraj - Województwo/prowincja - Branża - Wielkość firmy - Stanowisko/rola

Formularze zamówień

- Wybór produktu - Ilość - Warianty rozmiaru/koloru - Sposób wysyłki

Formularze ankietowe

- Skale ocen (1-10) - Częstotliwość (od „nigdy” do „zawsze”) - Zgoda (od „zdecydowanie się nie zgadzam” do „zdecydowanie się zgadzam”)

Formularze rezerwacji

- Rodzaj usługi - Preferowana data - Przedział czasowy - Czas trwania

Rozwiązywanie problemów

Lista rozwijana nie pokazuje opcji

• Sprawdź, czy opcje zostały zapisane
• Sprawdź, czy lista opcji jest pusta
• Wyczyść pamięć podręczną i odśwież

Wyszukiwanie nie działa

• Potwierdź, że wyszukiwanie jest włączone
• Sprawdź błędy JavaScript
• Przetestuj w innej przeglądarce

Wybór wielokrotny nie zapisuje wszystkich wyborów

• Sprawdź, czy opcja wielokrotnego wyboru jest włączona
• Sprawdź obsługę przesyłania formularzy
• Test z mniejszą liczbą wyborów

Mobilny selektor nie pojawia się

• Niestandardowy styl może zastąpić styl natywny
• Przetestuj na rzeczywistym urządzeniu mobilnym
• Sprawdź, czy nie występują konflikty JavaScript

Dostępność bez barier

Nawigacja za pomocą klawiatury

• Kliknij Tab, aby skupić się na rozwijanej liście
• Klawisze strzałek do nawigacji
• Enter/Spacja, aby wybrać
• Wpisz pierwszą literę, aby skoczyć

Czytniki ekranu

• Etykieta prawidłowo powiązana
• Ogłoszono opcje
• Wybór potwierdzony

Najlepsze praktyki

• Czytelne, opisowe etykiety
• Logiczne zamówienie opcji
• Unikaj stosowania symbolu zastępczego jako jedynej instrukcji

Podsumowanie

Tworzenie menu rozwijanych:

1. Dodaj pole rozwijane – Przeciągnij, aby utworzyć
2. Ustaw etykietę – Jasne pytanie/podpowiedź
3. Dodaj symbol zastępczy – tekst „Wybierz…”
4. Wprowadź opcje – Jeden na linię
5. Włącz możliwość wyszukiwania – Do długich list
6. Włącz wybór wielokrotny – Jeśli potrzebne są odpowiedzi wielokrotne
7. Zestaw wymagany – Na podstawie potrzeb formularza
8. Przetestuj dokładnie – Wszystkie opcje, wszystkie urządzenia

Wniosek

Rozwijane listy skutecznie obsługują wybór opcji w formularzach. Oszczędzają miejsce, standaryzują dane i działają dobrze na różnych urządzeniach. W przypadku krótkich list rozważ użycie przycisków opcji. W przypadku długich list włącz wyszukiwanie. W przypadku wielu wyborów użyj trybu wielokrotnego wyboru. Prawidłowa konfiguracja sprawia, że ​​rozwijane listy są wydajnymi polami wprowadzania danych, które poprawiają zarówno komfort użytkownika, jak i jakość danych.

Automatyczny kreator formularzy Zawiera w pełni funkcjonalne pola rozwijane z trybem wyszukiwania, opcją wielokrotnego wyboru i niestandardowym stylem. Twórz profesjonalne menu wyboru w kilka minut.

Chcesz dodać listy rozwijane? Pobierz Auto Form Builder i zacznij tworzyć formularze z menu rozwijanymi już dziś.