كيفية إنشاء قوائم منسدلة في نماذج ووردبريس

تُعدّ القوائم المنسدلة أدوات أساسية في نماذج ووردبريس. فهي تُسهّل على المستخدمين اختيار البلد، أو الفئة، أو ترتيب الأولويات، وغيرها من الخيارات المُحددة مسبقًا. كما أنها تُوفّر المساحة، وتُوحّد البيانات، وتُرشد المستخدمين إلى الخيارات المُناسبة. إليك كيفية إنشاء قوائم منسدلة فعّالة في نماذج ووردبريس الخاصة بك.

لماذا نستخدم القوائم المنسدلة؟

مزايا مقارنة بحقول النصوص

• البيانات الموحدة: لا توجد أخطاء إملائية أو اختلافات
• الاختيار الموجه: يرى المستخدمون الخيارات المتاحة
• كفاءة المساحة: مُصغّر حتى يتم النقر عليه
• متوافق مع الجوال: أداة اختيار الصور الأصلية على الهواتف
• إنجاز أسرع: انقر مقابل الكتابة

مزايا مقارنة بأزرار الراديو

• أفضل للقوائم الطويلة: أكثر من 6 خيارات تناسب مساحة صغيرة
• مظهر أنظف: تقليل الفوضى البصرية
• قابل للتمرير: التعامل مع عشرات الخيارات

متى تستخدم القوائم المنسدلة

• 6 خيارات أو أكثر (أقل = ضع في اعتبارك أزرار الاختيار)
• خيارات محددة مسبقًا ومعروفة
• اختيار واحد مطلوب
• المساحة محدودة
• توحيد البيانات أمر مهم

إنشاء قائمة منسدلة أساسية

الخطوة 1: إضافة حقل القائمة المنسدلة

1. افتح النموذج الخاص بك في AFB
2. اسقاط أنواع الحقول
3. اسحب إلى النموذج الخاص بك

الخطوة الثانية: تهيئة الملصق

العنوان: "كيف سمعت عنا؟" النص التوضيحي: "اختر خيارًا..." مطلوب: نعم/لا

الخطوة 3: إضافة الخيارات

أدخل كل خيار في سطر جديد:

بحث جوجل، وسائل التواصل الاجتماعي، صديق أو زميل، إعلان، مدونة أو مقال، أخرى

الخطوة 4: المعاينة والاختبار

1. حفظ النموذج
2. معاينة على واجهة المستخدم
3. انقر على القائمة المنسدلة للتحقق من الخيارات
4. إرسال إدخال الاختبار

خيارات تكوين القائمة المنسدلة

الإعدادات الأساسية

• التسمية: سؤال أو موجه
• العنصر النائب: النص الافتراضي (مثلاً، "اختر...")
• مطلوب: يجب الاختيار للإرسال
• نص المساعدة: تعليمات إضافية

إعدادات الخيارات

• قائمة الخيارات: الخيارات المتاحة
• الخيار الافتراضي المحدد: خيار محدد مسبقًا
• : قابل للبحث اكتب للتصفية
• تحديد متعدد: اختر عدة

إضافة خيارات القائمة المنسدلة

قائمة بسيطة

الخيار 1 الخيار 2 الخيار 3 الخيار 4

بقيم مختلفة عن التصنيفات

اعرض شيئًا واحدًا، وخزّن شيئًا آخر:

العرض: "الولايات المتحدة" القيمة: "US" العرض: "المملكة المتحدة" القيمة: "UK"

الخيارات المجمعة (Optgroups)

--- أمريكا الشمالية --- الولايات المتحدة الأمريكية، كندا، المكسيك --- أوروبا --- المملكة المتحدة، ألمانيا، فرنسا

العديد من الخيارات

بالنسبة للقوائم الطويلة، ضع في اعتبارك ما يلي:

• ترتيب ابجدي
• الخيارات الأكثر شيوعاً أولاً
• تم تفعيل خاصية البحث
• التجمعات المنطقية

نص العنصر النائب

ما هو العنصر النائب؟

النص الذي يظهر قبل أن يختار المستخدم أحد الخيارات:

[اختر خيارًا... ▼] ← عنصر نائب

أمثلة جيدة على العناصر النائبة

"اختر بلدك..." "اختر فئة..." "اختر فترة زمنية..." "-- الرجاء الاختيار --" "اختر واحدًا"

أفضل الممارسات في وضع العناصر النائبة

• اختصر
• وضح أنها مجرد رسالة تذكيرية
• لا تستخدم كخيار صالح
• ضع في اعتبارك تنسيق "– حدد –"

قوائم منسدلة قابلة للبحث

ما الذي يمكن البحث عنه؟

يمكن للمستخدمين الكتابة لتصفية الخيارات:

[اكتب للبحث... ▼] يكتب المستخدم: "ger" يعرض: ألمانيا، الجزائر، النيجر

متى يتم تفعيل خاصية البحث؟

• أكثر من 20 خيار
• قوائم الدول/الولايات
• كتالوجات المنتجات
• أي قائمة طويلة

تمكين البحث

1. حدد حقل القائمة المنسدلة
2. ابحث عن خيار "قابل للبحث"
3. تبديل على

تجربة مستخدم قابلة للبحث

1. ينقر المستخدم على القائمة المنسدلة. 2. يظهر حقل إدخال النص. 3. يكتب المستخدم نصًا مطابقًا جزئيًا. 4. يتم تصفية الخيارات في الوقت الفعلي. 5. يختار المستخدم من القائمة المُصفّاة.

قوائم منسدلة متعددة الاختيار

الاختيار الفردي مقابل الاختيار المتعدد

اختيار واحد: يختار المستخدم خيارًا واحدًا. اختيار متعدد: يختار المستخدم عدة خيارات.

متى تستخدم خاصية التحديد المتعدد

• اختر جميع ما ينطبق
• اهتمامات/تفضيلات متعددة
• تحديد فئات متعددة
• عندما تشغل مربعات الاختيار مساحة كبيرة جدًا

تفعيل خاصية التحديد المتعدد

1. حدد حقل القائمة المنسدلة
2. ابحث عن "السماح بتحديدات متعددة"
3. تبديل على

مظهر التحديد المتعدد

[تصميم مواقع الويب، تحسين محركات البحث، التسويق ▼] العناصر المختارة معروضة كعلامات/شرائح

تحديد متعدد مع حدود

يمكن دمجه مع تحديد الحد الأدنى/الأقصى:

اختر من 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: الخدمات المجمعة

العنوان: "ما الخدمة التي تحتاجها؟" الخيارات: --- خدمات الويب --- - تصميم مواقع الويب - تطوير مواقع الويب - التجارة الإلكترونية --- التسويق --- - تحسين محركات البحث - التسويق عبر محركات البحث - وسائل التواصل الاجتماعي --- الدعم --- - الصيانة - الاستضافة - الاستشارات

الاختيار الافتراضي

لا يوجد خيار افتراضي (موصى به)

[اختر خيارًا... ▼]

يجب على المستخدم الاختيار بشكل فعلي. الأفضل للحقول المطلوبة.

الإعدادات الافتراضية المحددة مسبقًا

[الولايات المتحدة ▼] ← مُختار مسبقًا

استخدم عندما:

• أحد الخيارات شائع للغاية
• يُسرّع عملية إكمال النماذج
• يوجد الوضع الافتراضي المنطقي

ضبط الإعدادات الافتراضية

1. في قائمة الخيارات، حدد الخيار الافتراضي
2. أو قم بتعيين "القيمة الافتراضية" في الإعدادات

القائمة المنسدلة مقابل أزرار الاختيار

استخدم القائمة المنسدلة عند

• أكثر من 6 خيار
• قائمة طويلة (دول، ولايات)
• المساحة محدودة
• الخيارات متشابهة في طبيعتها

استخدم أزرار الاختيار عندما

• 2-5 خيارات
• يجب أن تكون جميع الخيارات مرئية
• الخيارات تتضمن أوصافًا
• المقارنة البصرية مهمة

مقارنة جنبًا إلى جنب

قائمة منسدلة (٦ خيارات أو أكثر، مخفية حتى يتم النقر عليها): [اختر باقة... ▼] أزرار اختيار (٢-٥ خيارات، جميعها ظاهرة): ○ مجاني ○ أساسي (٩ دولارات شهريًا) ○ احترافي (٢٩ دولارًا شهريًا) ○ مؤسسي (تواصل معنا)

قوائم التنسيق المنسدلة

المظهر الافتراضي

ترث القوائم المنسدلة تصميم النموذج:

• لون/نصف قطر الحدود
• لون الخلفية
• نوع الخط/حجمه
• حشوة

خيارات تصميم مخصصة

• أيقونة السهم المنسدل
• مظهر العنصر المحدد
• خيارات التمرير
• تنسيق العلامات متعددة التحديد

تصميم الهواتف المحمولة

قوائم منسدلة أصلية للهواتف المحمولة:

• نظام التشغيل iOS: أداة اختيار العجلات
• أندرويد: منتقي المواد
• متوافق مع نظام التشغيل

أفضل الممارسات

1. ترتيب الخيارات منطقياً

• أبجديًا: الدول والأسماء
• عددي: الكميات، النطاقات
• التكرار الأكثر شيوعاً أولاً
• مرتب زمنيًا: الفترات الزمنية والتواريخ

2. اجعل الخيارات موجزة

جيد: "الولايات المتحدة" تجنب: "الولايات المتحدة الأمريكية (USA)" جيد: "1,000 - 5,000 دولار" تجنب: "بين ألف وخمسة آلاف دولار"

3. أضف "أخرى" عند الاقتضاء

الخيارات: - جوجل - فيسبوك - لينكد إن - إحالة صديق - أخرى ← يغطي الحالات الاستثنائية

4. استخدم العنصر النائب، وليس الخيار الأول

جيد: عنصر نائب: "اختر..." الخيارات: الخيار 1، الخيار 2، الخيار 3 تجنب: الخيارات: "اختر..."، الخيار 1، الخيار 2 (يجب ألا يكون الخيار الأول موجهاً)

5. تفعيل البحث في القوائم الطويلة

أي قائمة منسدلة تحتوي على 15-20 خيارًا أو أكثر يجب أن تكون قابلة للبحث.

6. مراعاة أداء التحميل

قد تحتاج القوائم الطويلة للغاية (أكثر من 1000 عنصر) إلى ما يلي:

• Lazy Loading
• البحث من جانب الخادم
• تقسيمها إلى فئات فرعية

حالات استخدام القوائم المنسدلة الشائعة

أشكال الاتصال

- القسم (المبيعات، الدعم، الفواتير) - نوع الاستفسار (سؤال، ملاحظات، شكوى) - كيف عرفت عنا

استمارات التسجيل

- الدولة - الولاية/المقاطعة - القطاع - حجم الشركة - المسمى الوظيفي/الدور

نماذج الطلبات

- اختيار المنتج - الكمية - خيارات المقاس/اللون - طريقة الشحن

نماذج المسح

- مقاييس التقييم (من 1 إلى 10) - التكرار (من أبداً إلى دائماً) - الموافقة (من أرفض بشدة إلى أوافق بشدة)

نماذج الحجز

- نوع الخدمة - التاريخ المفضل - الفترة الزمنية - المدة

[FAQ] الأسئلة الشائعة

خيارات القائمة المنسدلة غير ظاهرة

• تأكد من حفظ الخيارات
• تحقق من وجود قائمة خيارات فارغة
• قم بمسح ذاكرة التخزين المؤقت وتحديث الصفحة.

البحث لا يعمل

• تم تفعيل خاصية البحث عن طريق التأكيد
• تحقق من أخطاء جافا سكريبت
• اختبر في متصفح مختلف

خاصية التحديد المتعدد لا تحفظ جميع التحديدات

• تأكد من تفعيل خاصية التحديد المتعدد
• معالجة عمليات إرسال نماذج التحقق
• اختبر باستخدام عدد أقل من الاختيارات

لا يظهر منتقي التطبيقات على الهاتف المحمول

• قد تتجاوز الأنماط المخصصة الأنماط الأصلية
• اختبار على جهاز محمول فعلي
• تحقق من وجود تعارضات في جافا سكريبت

سهولة الوصول والشمولية

التنقل باستخدام لوحة المفاتيح

• اضغط على زر Tab للتركيز على القائمة المنسدلة
• استخدم مفاتيح الأسهم للتنقل
• اضغط على مفتاح الإدخال/المسافة للاختيار
• اكتب الحرف الأول للانتقال إلى الخطوة التالية

قارئات الشاشة

• تم ربط الملصق بشكل صحيح
• تم الإعلان عن الخيارات
• تم تأكيد الاختيار

أفضل الممارسات

• ملصقات واضحة وواضحة
• ترتيب الخيارات المنطقية
• تجنب استخدام العنصر النائب كتعليمات وحيدة

ملخص

إنشاء قوائم منسدلة:

1. إضافة حقل القائمة المنسدلة – اسحب لتشكيل
2. تعيين التسمية – سؤال/مطالبة واضحة
3. أضف عنصر نائب – نص "اختر..."
4. أدخل الخيارات – واحد لكل سطر
5. تفعيل خاصية البحث – للقوائم الطويلة
6. تفعيل خاصية التحديد المتعدد – في حال الحاجة إلى خيارات متعددة
7. المجموعة المطلوبة – بناءً على النموذج 1
8. اختبار شامل – جميع الخيارات، جميع الأجهزة

خاتمة

تُسهّل القوائم المنسدلة عملية اختيار الخيارات في النماذج بكفاءة عالية. فهي توفر المساحة، وتُوحّد البيانات، وتعمل بسلاسة على مختلف الأجهزة. بالنسبة للقوائم القصيرة، يُنصح باستخدام أزرار الاختيار. أما بالنسبة للقوائم الطويلة، فيُفضّل تفعيل خاصية البحث. ولتحديد خيارات متعددة، يُنصح باستخدام وضع التحديد المتعدد. يُتيح الإعداد الصحيح للقوائم المنسدلة إمكانية تحويلها إلى حقول إدخال قوية تُحسّن تجربة المستخدم وجودة البيانات.

منشئ النماذج التلقائي يتضمن حقول قوائم منسدلة كاملة الميزات مع وضع البحث، وخيار التحديد المتعدد، وإمكانية تخصيص التصميم. أنشئ قوائم اختيار احترافية في دقائق.

هل أنت مستعد لإضافة قوائم منسدلة؟ قم بتنزيل أداة إنشاء النماذج التلقائية وابدأ في إنشاء نماذج باستخدام قوائم منسدلة اليوم.