المدونة

كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص

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

يتيح لك عنصر واجهة مستخدم القائمة القابلة للتخصيص من Jotform جمع أنواع متعددة من المعلومات في قسم واحد عن طريق إضافة صفوف تحتوي على قوائم منسدلة وحقول نصية ومحددات تاريخ وغيرها، ويساعدك هذا في الحفاظ على نموذجك أقصر وأكثر تنظيمًا مع الاستمرار في جمع مدخلات تفصيلية من المستخدمين.

إليك بضع طرق لاستخدامها:

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

إضافة وإعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص

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

  1. في مُنشئ النماذج، انقر على إضافة عنصر في الجانب الأيسر من الصفحة.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-1
  1. الآن، انقر فوق القائمة القابلة للتخصيص في علامة تبويب الأدوات في قائمة عناصر النموذج، أو اسحبها وأفلتها فحسب في المكان الذي تريده في قالب النموذج الخاص بك.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-2
  1. بعد ذلك، في قائمة إعدادات الأداة الذكية التي تفتح على الجانب الأيمن من الصفحة، وضمن علامة تبويب الحقول، انقر فوق إضافة حقل وحدد نوع الحقل الذي تريد إضافته:
    • حقل النصوص القصيرة — إضافة حقل نصي من سطر واحد للإجابات الموجزة.
    • حقل رقم — السماح للمستخدمين بإدخال قيم رقمية.
    • حقل قائمة منسدلة — توفير قائمة بالخيارات في قائمة منسدلة.
    • حقل التاريخ — السماح للمستخدمين بتحديد تاريخ.
    • حقل الخيار الواحد — السماح للمستخدمين بتحديد خيار واحد من القائمة.
    • حقل الخيارات المتعددة — السماح للمستخدمين بتحديد أكثر من خيار واحد.
    • حقل الفقرة — إضافة حقل نصي متعدد الأسطر للاستجابات الأطول.
    • حقل النص الطويل — مشابه للفقرة، ولكن للإدخال المطول.
    • حقل الوقت — السماح للمستخدمين بتحديد الوقت أو إدخاله.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-3

ملاحظة

بشكل افتراضي، تأتي أداة ”القائمة القابلة للتخصيص“ مزودة بحقول مضافة مسبقًا، وهي: ”نص قصير“ و”قائمة منسدلة“ و”التقويم“ و”الوقت“. يمكنك الاحتفاظ بهذه الحقول أو تعديلها أو حذفها حسب احتياجاتك.

  1. الآن، لإعادة تسمية حقل، انقر مباشرة على اسمه في الحقول واكتب التسمية المفضلة لديك.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-4
  1. ثم، لتكوين إعدادات الحقل، انقر فوق أيقونة الترس الموجودة بجانبه.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-5
  1. بعد ذلك، لإعادة ترتيب الحقول، قم بسحبها وإفلاتها باستخدام رمز النقاط الست الموجودة على الجانب الأيسر من كل حقل.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-6
  1. الآن، لإزالة حقل، انقر فوق أيقونة سلة المهملات الموجودة على الجانب الأيمن من الحقل.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-7
  1. بعد ذلك، انقر فوق علامة تبويب عام لتكوين الإعدادات التالية:
    • العدد الافتراضي للصفوف — عدد الصفوف المعروضة بشكل افتراضي.
    • الحد الأقصى لعدد الصفوف — الحد الأقصى المسموح به لعدد الصفوف. اضبطه على 0 للسماح بعدد غير محدود من الصفوف.
    • تسمية زر الإضافة — تخصيص اختياري للنص المعروض على زر إضافة.
    • سطر واحد — قم بتشغيل هذا الخيار لعرض جميع الحقول في سطر واحد لكل صف.
  1. أخيرًا، بمجرد ضبط كل شيء، انقر فوق تحديث لتصبح جاهزًا تمامًا.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-8

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

كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-9

هل تتساءل كيف يبدو ذلك في الواقع؟ اطلع على هذا النموذج التوضيحي.

جعل حقل القائمة القابلة للتخصيص مطلوبًا

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

  1. بينما تكون في قائمة إعدادات الأداة الذكية للقائمة القابلة للتخصيص، وضمن علامة تبويب الحقول، انقر فوق أيقونة الترس الموجودة بجانب الحقل الذي تريد جعله مطلوبًا. على سبيل المثال، حقل النصوص القصيرة.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-10
  1. الآن، قم بتشغيل خيار مطلوب.
  2. ثم، انقر فوق زر العودة للرجوع إلى قائمة الحقول.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-11
  1. أخيرًا، انقر فوق تحديث لحفظ التغييرات، وبذلك تكون قد انتهيت.
كيفية إعداد عنصر واجهة مستخدم القائمة القابلة للتخصيص Image-12

الآن، سيتم تحديد الحقل كمطلوب، ولن يتمكن المستخدمون من إرسال النموذج دون ملئه.

ملاحظات

  • للحصول على تنسيق متقدم للأداة الذكية للقائمة القابلة للتخصيص، يمكنك إضافة كود CSS الخاص بك ضمن علامة تبويب كود CSS المخصص في إعدادات الأداة الذكية. ويرشدك دليلنا حول كيفية إدخال أكواد CSS في الأدوات الذكية خلال كل الخطوات.

الكاتب

كتابة تعليق:

Jotform Avatar
هذا الموقع محمي بواسطة reCAPTCHA و Google سياسة الخصوصية و شروط الخدمة تطبيق

Podo Comment كن أول من يعلق.