Як стварыць выпадальныя меню ў формах WordPress

Выпадальныя меню — гэта рабочыя конікі формаў. Выбар краіны, выбар катэгорыі, рэйтынг пераваг — калі карыстальнікам трэба выбраць з загадзя вызначанага спісу, выпадальныя меню дапамагаюць. Яны эканомяць месца, стандартызуюць дадзеныя і накіроўваюць карыстальнікаў да правільных варыянтаў. Вось як стварыць эфектыўныя выпадальныя меню ў вашых формах WordPress.

Навошта выкарыстоўваць выпадальныя меню?

Перавагі перад тэкставымі палямі

• Стандартызаваныя дадзеныя: Няма памылак і варыяцый
• Кіраваны выбар: Карыстальнікі бачаць даступныя варыянты
• Эфектыўнае выкарыстанне прасторы: Згорнута да націскання
• Зручны для мабільных прылад: Убудаваны выбар на тэлефонах
• Хутчэйшае завяршэнне: Клік супраць тыпу

Перавагі перад радыёкнопкамі

• Лепш для доўгіх спісаў: 6+ варыянтаў змяшчаюцца ў невялікай прасторы
• Чысцейшы выгляд: Менш візуальнага беспарадку
• Пракручваецца: Апрацоўвайце дзясяткі варыянтаў

Калі выкарыстоўваць выпадальныя спісы

• 6+ варыянтаў (менш = разгледзьце радыёкнопкі)
• Загадзя вызначаныя, вядомыя параметры
• Патрабуецца адзін выбар
• Месца абмежавана
• Стандартызацыя дадзеных важная

Стварэнне базавага выпадальнага спісу

Крок 1: Дадаць выпадальнае поле

1. Адкрыйце форму ў АФБ
2. Знаходзіць Падаць у тыпах палёў
3. Перацягніце ў сваю форму

Крок 2: Наладзьце этыкетку

Пазнака: «Як вы даведаліся пра нас?» Запаўняльнік: «Выберыце варыянт...» Абавязкова: Так/Не

Крок 3: Дадайце параметры

Уводзьце кожны варыянт з новага радка:

Пошук Google Сацыяльныя сеткі Сябар або калега Рэклама Блог або артыкул Іншае

Крок 4: Папярэдні прагляд і тэставанне

1. Захаваць форму
2. Папярэдні прагляд на пярэднім плане
3. Націсніце выпадальны спіс, каб праверыць параметры
4. Адправіць тэставую працу

Параметры канфігурацыі выпадальнага спісу

Асноўныя налады

• Лэйбл: Пытанне або падказка
• Запаўняльнік: Тэкст па змаўчанні (напрыклад, «Выбраць…»)
• патрабуецца: Трэба выбраць, каб адправіць
• Даведка: Дадатковыя інструкцыі

Налады параметраў

• Спіс опцый: Даступныя варыянты
• Выбрана па змаўчанні: Папярэдне выбраны варыянт
• Пошук: Увядзіце тэкст для фільтрацыі
• Множны выбар: Выберыце некалькі

Даданне выпадальных параметраў

просты спіс

Варыянт 1 Варыянт 2 Варыянт 3 Варыянт 4

З значэннямі, якія адрозніваюцца ад метак

Адно паказваць, іншае захоўваць:

Дысплей: «Злучаныя Штаты» Значэнне: «ЗША» Дысплей: «Вялікабрытанія» Значэнне: «Вялікабрытанія»

Згрупаваныя параметры (Optgroups)

--- Паўночная Амерыка --- Злучаныя Штаты Амерыкі Канада Мексіка --- Еўропа --- Вялікабрытанія Германія Францыя

Шмат варыянтаў

Для доўгіх спісаў улічвайце наступнае:

• У алфавітным парадку
• Спачатку найбольш распаўсюджаныя варыянты
• Пошук уключаны
• Лагічныя групоўкі

Тэкст запаўняльніка

Што такое запаўняльнік?

Тэкст, які паказваецца перад тым, як карыстальнік выбірае опцыю:

[Выберыце варыянт... ▼] ← Запаўняльнік

Добрыя прыклады запаўняльнікаў

"Выберыце сваю краіну..." "Выберыце катэгорыю..." "Выберыце прамежак часу..." "-- Калі ласка, выберыце --" "Выберыце адзін варыянт"

Найлепшыя практыкі выкарыстання запаўняльнікаў

• Трымаеце яго кароткім
• Дайце зразумець, што гэта падказка
• Не выкарыстоўваць як дапушчальны варыянт
• Разгледзьце фармат «– Выберыце –»

Выпадальныя спісы з магчымасцю пошуку

Што можна шукаць?

Карыстальнікі могуць уводзіць тэкст, каб фільтраваць параметры:

[Увядзіце тэкст для пошуку... ▼] Тыпы карыстальнікаў: "ger" Паказвае: Германія, Алжыр, Нігер

Калі ўключаць пошук

• Больш за 20 XNUMX варыянтаў
• Спісы краін/штатаў
• Каталогі прадуктаў
• Любы доўгі спіс

Уключэнне пошуку

1. Выберыце выпадальнае поле
2. Знайсці опцыю «Даступна для пошуку»
3. Уключыце

Пошукавы карыстальніцкі досвед

1. Карыстальнік націскае на выпадальны спіс 2. З'яўляецца поле для ўводу тэксту 3. Карыстальнік уводзіць частковае супадзенне 4. Фільтр параметраў у рэжыме рэальнага часу 5. Карыстальнік выбірае з адфільтраванага спісу

Выпадальныя спісы з некалькімі варыянтамі выбару

Адзінарны супраць множнага выбару

Адзін выбар: карыстальнік выбірае АДЗІН варыянт. Множны выбар: карыстальнік выбірае НЕКАЛЬКІ варыянтаў.

Калі выкарыстоўваць множны выбар

• «Выберыце ўсё, што падыходзіць»
• Шматлікія інтарэсы/перавагі
• Выбар некалькіх катэгорый
• Калі сцяжкі займаюць занадта шмат месца

Уключэнне множнага выбару

1. Выберыце выпадальнае поле
2. Знайдзіце «Дазволіць некалькі варыянтаў»
3. Уключыце

Знешні выгляд з некалькімі варыянтамі выбару

[Вэб-дызайн, SEO, маркетынг ▼] Выбраныя элементы паказаны ў выглядзе тэгаў/чыпаў

Множны выбар з абмежаваннямі

Спалучыць з выбарам мінімуму/максімуму:

«Выберыце 2-4 тэмы» Мін.: 2 Макс.: 4

Прыклады канфігурацыі

Прыклад 1: Выбар краіны

Пазнака: «Краіна» Запаўняльнік: «Выберыце сваю краіну...» Пошук: Так Абавязкова: Так Варыянты: [больш за 195 краін у алфавітным парадку]

Прыклад 2: Тып запыту

Пазнака: «Пра што ваш запыт?» Запаўняльнік: «Выберыце катэгорыю...» Абавязкова: Так Варыянты: - Продажы - Падтрымка - Выстаўленне рахункаў - Партнёрства - Прэса/СМІ - Іншае

Прыклад 3: Дыяпазон бюджэту

Пазнака: «Які ваш бюджэт?» Запаўняльнік: «Выберыце дыяпазон...» Абавязкова: Не Варыянты: - Менш за 1,000 долараў - 1,000 долараў - 5,000 долараў - 5,000 долараў - 10 000 долараў - 10 000 долараў - 25 000 долараў - больш за 25 000 долараў - Пакуль не ведаю

Прыклад 4: Часавы інтэрвал

Пазнака: «Пажаданы час сустрэчы» Запаўняльнік: «Выберыце час...» Абавязкова: Так Варыянты: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Прыклад 5: Выбар некалькіх інтарэсаў

Пазнака: «Тэмы, якія цікавяць» Запаўняльнік: «Выберыце тэмы...» Множны выбар: Так Пошук: Так Варыянты: - Тэхналогіі - Бізнес - Маркетынг - Дызайн - Распрацоўка - Аналітыка - Бяспека - Штучны інтэлект/машыннае навучанне

Прыклад 6: Групаваныя паслугі

Пазнака: «Якая паслуга вам патрэбна?» Варыянты: --- Вэб-паслугі --- - Дызайн вэб-сайтаў - Распрацоўка вэб-сайтаў - Электронная камерцыя --- Маркетынг --- - SEO - PPC - Сацыяльныя сеткі --- Падтрымка --- - Абслугоўванне - Хостынг - Кансалтынг

Выбар па змаўчанні

Няма значэння па змаўчанні (рэкамендуецца)

[Выберыце варыянт... ▼]

Карыстальнік павінен актыўна выбіраць. Лепш за ўсё падыходзіць для абавязковых палёў.

Папярэдне выбранае па змаўчанні

[Злучаныя Штаты ▼] ← Папярэдне адабрана

Выкарыстоўвайце, калі:

• Адзін з варыянтаў надзвычай распаўсюджаны
• Паскарае запаўненне формы
• Існуе лагічнае па змаўчанні

Налада па змаўчанні

1. У спісе опцый адзначце опцыю па змаўчанні
2. Або ўсталюйце «Значэнне па змаўчанні» ў наладах

Выпадальны спіс супраць радыёкнопак

Выкарыстоўвайце выпадальны спіс, калі

• Больш за 6 XNUMX варыянтаў
• Доўгі спіс (краіны, штаты)
• Месца абмежавана
• Варыянты падобныя па сваёй прыродзе

Выкарыстоўвайце радыёкнопкі, калі

• 2-5 варыянты
• Усе варыянты павінны быць бачныя
• Варыянты маюць апісанні
• Важна візуальнае параўнанне

Параўнанне бок аб бок

ВЫПАДНЫ СПІС (6+ варыянтаў, схаваны да націскання): [Выберыце план... ▼] ПЕРАКЛЮЧНЫЯ КНОПКІ (2-5 варыянтаў, усе бачныя): ○ Бясплатна ○ Базавы ($9/мес) ○ Прафесійны ($29/мес) ○ Карпаратыўны (Звяжыцеся з намі)

Выпадальныя спісы стыляў

Знешні выгляд па змаўчанні

Выпадальныя спісы наследуюць стыль формы:

• Колер/радыус мяжы
• Колер фону
• Сямейства/памер шрыфтоў
• набіванне

Варыянты карыстальніцкага стылю

• Значок стрэлкі выпадальнага спісу
• Знешні выгляд выбранага элемента
• Станы навядзення на опцыю
• Стылізацыя тэгаў з множным выбарам

Мабільны стыль

Выпадальныя спісы для мабільных прылад:

• iOS: кола выбару
• Android: Выбар матэрыялаў
• Адпавядае АС

Best Practices

1. Лагічна ўпарадкуйце параметры

• Па алфавіце: Краіны, назвы
• Лічбавы: Колькасці, дыяпазоны
• частата: Спачатку найбольш распаўсюджаныя
• Храналагічна: Часавыя інтэрвалы, даты

2. Захоўвайце лаканічныя варыянты

Добра: «Злучаныя Штаты». Пазбягайце: «Злучаныя Штаты Амерыкі (ЗША)». Добра: «$1 000 - $5 000». Пазбягайце: «Ад тысячы да пяці тысяч долараў».

3. Уключыце «Іншае», калі гэта дарэчы

Варыянты: - Google - Facebook - LinkedIn - Рэкамендацыя сябра - Іншае ← Выяўляе памежныя выпадкі

4. Выкарыстоўвайце запаўняльнік, а не першы варыянт

Добра: Запаўняльнік: "Выбраць..." Варыянты: Варыянт 1, Варыянт 2, Варыянт 3 Пазбягаць: Варыянты: "Выбраць...", Варыянт 1, Варыянт 2 (Першы варыянт не павінен быць падказкай)

5. Уключыце пошук па доўгіх спісах

Любы выпадальны спіс з 15-20+ варыянтамі павінен быць даступны для пошуку.

6. Улічвайце прадукцыйнасць загрузкі

Для вельмі доўгіх спісаў (больш за 1000) можа спатрэбіцца:

• гультаяватая загрузка
• Пошук на баку сервера
• Падзел на падкатэгорыі

Распаўсюджаныя выпадальныя спісы

кантактныя формы

- Аддзел (продажы, падтрымка, выстаўленне рахункаў) - Тып запыту (пытанне, водгук, скарга) - Як вы даведаліся пра нас

Рэгістрацыйныя формы

- Краіна - Штат/Правінцыя - Галіна - Памер кампаніі - Пасада/пасада

Формы замовы

- Выбар тавару - Колькасць - Варыянты памеру/колеру - Спосаб дастаўкі

Формы апытання

- Шкалы ацэнак (1-10) - Частата (ніколі - заўсёды) - Згода (катэгарычна не згодны - цалкам згодны)

Формы браніравання

- Тып паслугі - Пажаданая дата - Часавы інтэрвал - Працягласць

пошук няспраўнасцяў

Выпадальны спіс не паказвае параметры

• Праверце захаванасць параметраў
• Праверце, ці ёсць пусты спіс опцый
• Ачысціць кэш і абнавіць

Пошук не працуе

• Пацвердзіце, што пошук уключаны
• Праверце памылкі JavaScript
• Тэставанне ў іншым браўзеры

Множны выбар не захоўвае ўсе выбраныя элементы

• Праверце, ці ўключаны множны выбар
• Праверце апрацоўку адпраўкі формы
• Тэст з меншай колькасцю варыянтаў

Мабільны выбаршчык не адлюстроўваецца

• Карыстальніцкі стыль можа перавызначыць натыўны стыль
• Тэставанне на рэальнай мабільнай прыладзе
• Праверка канфліктаў JavaScript

Даступнасць

Навігацыя па клавіятуры

• Tab для факусавання выпадальнага меню
• Клавішы са стрэлкамі для навігацыі
• Enter/Прабел для выбару
• Увядзіце першую літару, каб перайсці

Праграмы для чытання з экрана

• Пазнака правільна звязана
• Абвешчаныя опцыі
• Выбар пацверджаны

Best Practices

• Зразумелыя, падрабязныя этыкеткі
• Лагічны парадак опцый
• Пазбягайце запаўняльніка ў якасці адзінай інструкцыі

Рэзюмэ

Стварэнне выпадальных меню:

1. Дадаць выпадальнае поле – Перацягнуць у форму
2. Устанавіць метку – Зразумелае пытанне/падказка
3. Дадаць запаўняльнік – Тэкст «Выбраць…»
4. Увядзіце параметры – Па адным на радок
5. Уключыць пошук – Для доўгіх спісаў
6. Уключыць множны выбар – Калі патрэбны некалькі варыянтаў
7. Патрабуецца ўсталяваць – У залежнасці ад патрэбаў формы
8. Старанна праверце – Усе варыянты, усе прылады

Conclusion

Выпадальныя спісы эфектыўна апрацоўваюць выбар опцый у формах. Яны эканомяць месца, стандартызуюць дадзеныя і добра працуюць на розных прыладах. Для кароткіх спісаў разгледзьце магчымасць выкарыстання радыёкнопак. Для доўгіх спісаў уключыце пошук. Для некалькіх варыянтаў выкарыстоўвайце рэжым множнага выбару. Правільная канфігурацыя робіць выпадальныя спісы магутнымі палямі ўводу, якія паляпшаюць як зручнасць карыстальніка, так і якасць дадзеных.

Аўтаматычны канструктар формаў Уключае паўнафункцыянальныя выпадальныя палі з рэжымам пошуку, опцыяй множнага выбару і наладжвальным стылем. Стварайце прафесійныя меню выбару за лічаныя хвіліны.

Гатовыя дадаць выпадальныя спісы? Спампаваць аўтаматычны канструктар формаў і пачніце ствараць формы з выпадальнымі меню ўжо сёння.