نحوه ایجاد منوهای کشویی در فرمهای وردپرس
منوی کشویی (Dropdown) ابزار قدرتمند فرمها هستند. انتخاب کشور، انتخاب دسته، رتبهبندی ترجیحات - هر زمان که کاربران نیاز به انتخاب از یک لیست از پیش تعریف شده داشته باشند، منوی کشویی به کار میآید. آنها در فضا صرفهجویی میکنند، دادهها را استاندارد میکنند و کاربران را به گزینههای معتبر هدایت میکنند. در اینجا نحوه ایجاد منوهای کشویی مؤثر در فرمهای وردپرس شما آورده شده است.
چرا از منوهای کشویی استفاده کنیم؟
مزایای استفاده از فیلدهای متنی
- دادههای استاندارد شده: بدون غلط املایی یا تغییر شکل
- انتخاب هدایتشده: کاربران گزینههای موجود را مشاهده میکنند
- فضای کارآمد: تا زمانی که کلیک نشود، جمع میشود
- سازگار با موبایل: انتخابگر بومی در تلفنها
- تکمیل سریعتر: کلیک در مقابل تایپ
مزایای استفاده از دکمههای رادیویی
- برای لیستهای طولانی بهتر است: ۶+ گزینه در فضای کوچک جا میشوند
- ظاهر تمیزتر: آشفتگی بصری کمتر
- قابل پیمایش: دهها گزینه را مدیریت کنید
چه زمانی از منوهای کشویی استفاده کنیم
- ۶+ گزینه (کمتر = دکمههای رادیویی را در نظر بگیرید)
- گزینههای از پیش تعریفشده و شناختهشده
- انتخاب واحد مورد نیاز است
- فضا محدود است
- استانداردسازی دادهها مهم است
ایجاد یک منوی کشویی ساده
مرحله ۱: اضافه کردن فیلد کشویی
- فرم خود را در A.F.B.
- پیدا کردن رها کردن در انواع فیلد
- به فرم خود بکشید
مرحله 2: پیکربندی برچسب
برچسب: «از چه طریقی با ما آشنا شدید؟» جایگزین: «یک گزینه را انتخاب کنید...» الزامی: بله/خیر
مرحله ۳: اضافه کردن گزینهها
هر گزینه را در یک خط جدید وارد کنید:
جستجوی گوگل، رسانههای اجتماعی، دوست یا همکار، تبلیغات، وبلاگ یا مقاله، موارد دیگر
مرحله ۵: پیشنمایش و آزمایش
- ذخیره فرم
- پیشنمایش در فرانتاند
- برای تأیید گزینهها، روی منوی کشویی کلیک کنید
- ارسال ورودی آزمون
گزینههای پیکربندی کشویی
تنظیمات اولیه
- برچسب: سوال یا نکته
- نگهدارنده مکان: متن پیشفرض (مثلاً «انتخاب کنید…»)
- ضروری: برای ارسال باید انتخاب کنید
- متن راهنما: دستورالعملهای اضافی
تنظیمات گزینهها
- لیست گزینهها: گزینههای موجود
- پیشفرض انتخاب شده: گزینه از پیش انتخاب شده
- قابل جستجو: برای فیلتر کردن تایپ کنید
- انتخاب چندگانه: چندتایی را انتخاب کنید
افزودن گزینههای کشویی
لیست ساده
گزینه ۱ گزینه ۲ گزینه ۳ گزینه ۴
با مقادیری متفاوت از برچسبها
نمایش یک چیز، ذخیره چیز دیگر:
نمایش: "ایالات متحده" مقدار: "ایالات متحده" نمایش: "بریتانیا" مقدار: "بریتانیا"
گزینههای گروهبندیشده (Optgroups)
--- آمریکای شمالی --- ایالات متحده کانادا مکزیک --- اروپا --- بریتانیا آلمان فرانسه
بسیاری از گزینه ها
برای لیستهای طولانی، موارد زیر را در نظر بگیرید:
- به ترتیب حروف الفبا
- رایجترین گزینهها ابتدا
- قابلیت جستجو فعال است
- گروهبندیهای منطقی
متن جای جای
جایگذار (placeholder) چیست؟
متنی که قبل از انتخاب گزینه توسط کاربر نمایش داده میشود:
[یک گزینه را انتخاب کنید... ▼] ← جایگذاری
مثالهای خوب برای جایگذاری
«کشور خود را انتخاب کنید...» «یک دسته بندی انتخاب کنید...» «یک بازه زمانی انتخاب کنید...» «-- لطفاً انتخاب کنید --» «یکی را انتخاب کنید»
بهترین شیوههای جایگذاری
- کوتاهش کن
- واضح بگویید که این یک درخواست است
- به عنوان یک گزینه معتبر استفاده نکنید
- قالب «– انتخاب –» را در نظر بگیرید
منوی کشویی قابل جستجو
چه چیزی قابل جستجو است؟
کاربران میتوانند برای فیلتر کردن گزینهها تایپ کنند:
[برای جستجو تایپ کنید... ▼] نوع کاربر: "ger" نمایشها: آلمان، الجزایر، نیجر
چه زمانی قابلیت جستجو را فعال کنیم
- ۱۲+ گزینه
- فهرستهای کشور/ایالت
- کاتالوگ محصولات
- هر لیست طولانی
فعال کردن قابلیت جستجو
- انتخاب فیلد کشویی
- گزینه «قابل جستجو» را پیدا کنید
- ON را روشن کنید
تجربه کاربری قابل جستجو
۱. کاربر روی منوی کشویی کلیک میکند ۲. ورودی متن ظاهر میشود ۳. کاربر تطابق جزئی تایپ میکند ۴. فیلتر گزینهها در لحظه ۵. کاربر از لیست فیلتر شده انتخاب میکند
منوی کشویی چند انتخابی
تک انتخابی در مقابل چند انتخابی
انتخاب تکی: کاربر یک گزینه را انتخاب میکند انتخاب چندگانه: کاربر چندین گزینه را انتخاب میکند
چه زمانی از انتخاب چندگانه استفاده کنیم
- «تمام موارد مربوطه را انتخاب کنید»
- علایق/ترجیحات چندگانه
- انتخاب چندین دسته
- وقتی چکباکسها فضای زیادی را اشغال میکنند
فعال کردن انتخاب چندگانه
- انتخاب فیلد کشویی
- «اجازه انتخاب چندگانه» را پیدا کنید
- ON را روشن کنید
ظاهر چند انتخابی
[طراحی وب، سئو، بازاریابی ▼] موارد انتخاب شده به صورت برچسب/تراشه نمایش داده میشوند
انتخاب چندگانه با محدودیت
با انتخاب حداقل/حداکثر ترکیب کنید:
«۲ تا ۴ موضوع انتخاب کنید» حداقل: ۲ حداکثر: ۴
مثالهای پیکربندی
مثال ۱: انتخاب کشور
برچسب: "کشور" جایگذاری: "کشور خود را انتخاب کنید..." قابل جستجو: بله الزامی: بله گزینهها: [۱۹۵+ کشور به ترتیب حروف الفبا]
مثال ۲: نوع استعلام
برچسب: "درخواست شما در مورد چیست؟" جای خالی: "دسته بندی را انتخاب کنید..." الزامی: بله گزینه ها: - فروش - پشتیبانی - صدور صورتحساب - مشارکت - مطبوعات/رسانه - سایر
مثال ۳: محدوده بودجه
برچسب: "بودجه شما چقدر است؟" جایگزین: "محدوده را انتخاب کنید..." الزامی: خیر گزینهها: - زیر ۱۰۰۰ دلار - ۱۰۰۰ دلار - ۵۰۰۰ دلار - ۵۰۰۰ دلار - ۱۰۰۰۰ دلار - ۱۰۰۰۰ دلار - ۲۵۰۰۰ دلار - ۲۵۰۰۰ دلار+ - هنوز مطمئن نیستم
مثال ۴: بازه زمانی
برچسب: "زمان قرار ملاقات ترجیحی" جایگزین: "یک زمان انتخاب کنید..." الزامی: بله گزینهها: - ۹:۰۰ صبح - ۱۰:۰۰ صبح - ۱۱:۰۰ صبح - ۱:۰۰ بعد از ظهر - ۲:۰۰ بعد از ظهر - ۳:۰۰ بعد از ظهر - ۴:۰۰ بعد از ظهر
مثال ۵: علایق چندگزینهای
برچسب: "موضوعات مورد علاقه" جایگذار: "موضوعات را انتخاب کنید..." چند انتخابی: بله قابل جستجو: بله گزینهها: - فناوری - کسب و کار - بازاریابی - طراحی - توسعه - تجزیه و تحلیل - امنیت - هوش مصنوعی/یادگیری ماشین
مثال ۶: سرویسهای گروهبندیشده
برچسب: «به کدام سرویس نیاز دارید؟» گزینهها: --- خدمات وب --- - طراحی وبسایت - توسعه وبسایت - تجارت الکترونیک --- بازاریابی --- - سئو - تبلیغات کلیکی - رسانههای اجتماعی --- پشتیبانی --- - نگهداری - میزبانی وب - مشاوره
انتخاب پیشفرض
بدون پیشفرض (توصیه میشود)
[یک گزینه را انتخاب کنید... ▼]
کاربر باید به طور فعال انتخاب کند. بهترین حالت برای فیلدهای الزامی است.
پیشفرض از پیش انتخابشده
[ایالات متحده ▼] ← از پیش انتخاب شده
زمانی استفاده کنید که:
- یک گزینه به شدت رایج است
- سرعت تکمیل فرم را افزایش میدهد
- پیشفرض منطقی وجود دارد
تنظیم پیشفرض
- در لیست گزینهها، گزینه پیشفرض را علامت بزنید
- یا در تنظیمات، «مقدار پیشفرض» را تنظیم کنید
دکمههای کشویی در مقابل دکمههای رادیویی
از منوی کشویی استفاده کنید چه زمانی
- ۱۲+ گزینه
- فهرست طولانی (کشورها، ایالتها)
- فضا محدود است
- گزینهها از نظر ماهیت مشابه هستند
از دکمههای رادیویی در چه مواقعی استفاده کنید
- 2-5 گزینه
- همه گزینهها باید قابل مشاهده باشند
- گزینهها توضیحات دارند
- مقایسه بصری مهم است
مقایسه کنار هم
منوی کشویی (۶+ گزینه، تا زمانی که کلیک نشود، پنهان است): [یک طرح را انتخاب کنید... ▼] دکمههای رادیویی (۲-۵ گزینه، همه قابل مشاهده): ○ رایگان ○ پایه (۹ دلار در ماه) ○ حرفهای (۲۹ دلار در ماه) ○ سازمانی (با ما تماس بگیرید)
استایلدهی به منوهای کشویی
ظاهر پیشفرض
منوی کشویی از استایل فرم ارثبری میکند:
- رنگ/شعاع حاشیه
- رنگ پس زمینه
- خانواده/اندازه فونت
- لایه
گزینههای استایل سفارشی
- آیکون فلش کشویی
- ظاهر آیتم انتخاب شده
- حالتهای شناور گزینه
- استایلدهی تگهای چندگزینهای
استایل موبایل
منوی کشویی بومی موبایل:
- iOS: انتخابگر چرخ
- اندروید: انتخابگر مواد
- سازگار با سیستم عامل
بهترین روش
۱. گزینهها را به صورت منطقی سفارش دهید
- الفبایی: کشورها، نامها
- عددی: مقادیر، محدودهها
- فرکانس: رایجترینها اول
- زمانی: بازههای زمانی، تاریخها
۲. گزینهها را مختصر نگه دارید
خوب: «ایالات متحده» اجتناب: «ایالات متحده آمریکا (USA)» خوب: «۱۰۰۰ تا ۵۰۰۰ دلار» اجتناب: «بین هزار تا پنج هزار دلار»
۶. در صورت لزوم، از «سایر» استفاده کنید
گزینهها: - گوگل - فیسبوک - لینکدین - معرفی به دوستان - سایر ← موارد خاص را پوشش میدهد
۴. از Placeholder استفاده کنید، نه گزینه اول
خوب: جای خالی: "انتخاب کنید..." گزینهها: گزینه ۱، گزینه ۲، گزینه ۳ اجتناب: گزینهها: "انتخاب کنید..."، گزینه ۱، گزینه ۲ (اولین گزینه نباید یک اعلان باشد)
۵. جستجوی لیستهای طولانی را فعال کنید
هر منوی کشویی با بیش از ۱۵ تا ۲۰ گزینه باید قابل جستجو باشد.
۶. عملکرد بارگذاری را در نظر بگیرید
لیستهای بسیار طولانی (بیش از ۱۰۰۰ مورد) ممکن است به موارد زیر نیاز داشته باشند:
- بارگذاری تند و زننده
- جستجوی سمت سرور
- تقسیمبندی به زیرشاخهها
موارد استفاده رایج از منوی کشویی
تماس با فرم
- دپارتمان (فروش، پشتیبانی، صدور صورتحساب) - نوع درخواست (سوال، بازخورد، شکایت) - چگونه با ما آشنا شدید؟
فرم های ثبت نام
- کشور - ایالت/استان - صنعت - اندازه شرکت - عنوان/نقش شغلی
فرم های سفارش
- انتخاب محصول - تعداد - انواع اندازه/رنگ - روش ارسال
فرمهای نظرسنجی
- مقیاسهای رتبهبندی (۱-۱۰) - فراوانی (هرگز تا همیشه) - موافقت (کاملاً مخالفم تا کاملاً موافقم)
فرمهای رزرو
- نوع خدمات - تاریخ ترجیحی - بازه زمانی - مدت زمان
عیب یابی
منوی کشویی گزینهها را نشان نمیدهد
- تأیید کنید که گزینهها ذخیره شدهاند
- بررسی لیست گزینههای خالی
- حافظه پنهان را پاک کنید و رفرش کنید
جستجو کار نمی کند
- تأیید کنید که قابلیت جستجو فعال است
- بررسی خطاهای جاوا اسکریپت
- در مرورگرهای مختلف تست کنید
ذخیره نشدن همه انتخابها با چند انتخاب
- تأیید کنید که انتخاب چندگانه فعال است
- بررسی نحوه ارسال فرم
- با انتخابهای کمتر آزمایش کنید
انتخابگر موبایل نمایش داده نمیشود
- سبک سفارشی ممکن است بر سبک بومی غلبه کند
- روی دستگاه موبایل واقعی تست کنید
- بررسی تداخلهای جاوا اسکریپت
دسترسی
پیمایش صفحه کلید
- منوی کشویی Tab to Focus
- کلیدهای جهتنما برای پیمایش
- برای انتخاب، اینتر/فاصله بزنید
- برای پرش، حرف اول را تایپ کنید
صفحه خوان ها
- برچسب به درستی مرتبط شده است
- گزینههای اعلام شده
- انتخاب تایید شد
بهترین روش
- برچسبهای واضح و توصیفی
- ترتیب منطقی گزینهها
- از قرار دادن placeholder به عنوان تنها دستورالعمل خودداری کنید.
خلاصه
ایجاد منوهای کشویی:
- اضافه کردن فیلد کشویی - کشیدن برای شکل دادن
- برچسب را تنظیم کنید - سوال/درخواست واضح
- اضافه کردن مکاننما – متن «انتخاب…»
- گزینهها را وارد کنید - یکی در هر خط
- فعال کردن قابلیت جستجو - برای لیستهای طولانی
- فعال کردن انتخاب چندگانه – در صورت نیاز به چندین انتخاب
- مجموعه مورد نیاز – بر اساس نیازهای فرم
- به طور کامل تست کنید - همه گزینهها، همه دستگاهها
نتیجه
منوی کشویی به طور موثر انتخاب گزینه در فرمها را مدیریت میکند. آنها در فضا صرفهجویی میکنند، دادهها را استاندارد میکنند و در دستگاههای مختلف به خوبی کار میکنند. برای لیستهای کوتاه، دکمههای رادیویی را در نظر بگیرید. برای لیستهای طولانی، جستجو را فعال کنید. برای انتخابهای چندگانه، از حالت چند انتخابی استفاده کنید. پیکربندی مناسب، منوی کشویی را به فیلدهای ورودی قدرتمندی تبدیل میکند که هم تجربه کاربری و هم کیفیت دادهها را بهبود میبخشد.
سازنده فرم خودکار شامل فیلدهای کشویی کاملاً کاربردی با حالت جستجو، گزینه چند انتخابی و سبک سفارشی. منوهای انتخابی حرفهای را در عرض چند دقیقه ایجاد کنید.
آمادهی اضافه کردن منوهای کشویی هستید؟ دانلود فرم ساز خودکار و همین امروز شروع به ساخت فرمها با منوهای کشویی کنید.