كيفية عمل نموذج باستخدام شريط التقدم
نشرت: 2022-04-22هل ترغب في معرفة كيفية إضافة شريط تقدم إلى نموذج؟
يساعد وجود شريط تقدم في النموذج الخاص بك في تقليل التخلي عن النموذج من خلال إبقاء الزائر على اطلاع على تقدمه.
سنوضح لك كيفية إضافة واحد إلى النموذج الخاص بك أدناه.
ما هو شريط التقدم في النماذج؟
أشرطة التقدم هي ميزات مرئية تُظهر للمستخدمين عدد الصفحات الموجودة في النموذج والصفحة التي يتواجدون فيها حاليًا.
مؤشرات التقدم ، كما تُعرف أيضًا ، سوف تتبع وتشير إلى التقدم الإجمالي للمستخدم أثناء ملء النموذج.
كيفية عمل نموذج باستخدام شريط التقدم
فيما يلي الخطوات التي سنتخذها:
- قم بتثبيت البرنامج المساعد WPForms
- قم بإنشاء نموذج جديد
- أضف فواصل الصفحات إلى النموذج الخاص بك
- حفظ ونشر النموذج الخاص بك
- تحقق من شريط تقدم النموذج الخاص بك
لنبدأ بتثبيت البرنامج المساعد للنموذج الذي سنحتاجه لشريط التقدم.
1. قم بتثبيت البرنامج المساعد WPForms
أولاً ، للحصول على شريط تقدم في النموذج الخاص بك ، ستحتاج إلى شراء ترخيص WPForms Pro ثم تسجيل الدخول إلى حساب WPForms الخاص بك. بمجرد تسجيل الدخول ، انقر فوق علامة التبويب التنزيلات .
سيُظهر لك هذا صفحة تحتوي على جميع التراخيص المتاحة لديك. لتنزيل البرنامج المساعد ، انقر فوق الزر تنزيل WPForms بجوار أحد تراخيصك. سيؤدي هذا إلى حفظ ملف مضغوط من المكون الإضافي WPForms على جهاز الكمبيوتر الخاص بك.
هام: ستحتاج إلى WPForms Pro لأنه يتضمن حقل فاصل الصفحة. تحتاج إلى حقل فاصل الصفحة إذا كانت لديك خطوات مختلفة في النموذج الخاص بك ولإظهار شريط التقدم.
تثبيت WPForms على موقعك
بمجرد تنزيل ملف zip ، توجه إلى موقع WordPress الخاص بك حيث ترغب في تثبيت WPForms. ثم ، داخل لوحة تحكم المسؤول ، انتقل إلى الإضافات » إضافة جديد وانقر على زر تحميل البرنامج المساعد .
من هنا ، انقر فوق الزر اختيار ملف وحدد ملف WPForms المضغوط الذي قمت بتنزيله للتو.
بعد تحميل الملف الخاص بك ، انقر فوق زر التثبيت الآن .
سيبدأ هذا عملية التثبيت نيابة عنك. بمجرد تثبيت المكون الإضافي ، انقر فوق الزر تنشيط البرنامج المساعد لتنشيط WPForms على موقعك.
بعد تنشيط المكون الإضافي ، تحقق من مفتاح ترخيص WPForms لتلقي التحديثات التلقائية ودعم البرنامج المساعد. ستسمح لك إضافة مفتاح الترخيص أيضًا بتثبيت وتفعيل إضافات WPForms بسهولة من داخل لوحة معلومات WordPress الخاصة بك.
هذا هو! يمكننا الآن المضي قدمًا في إنشاء نموذج جديد.
2. قم بإنشاء نموذج جديد
للبدء ، ستحتاج إلى تسجيل الدخول إلى منطقة إدارة WordPress الخاصة بك. بمجرد الوصول إلى هناك ، انقر فوق WPForms في الشريط الجانبي للمسؤول للانتقال إلى صفحة نظرة عامة على النماذج.
بعد ذلك ، لإنشاء نموذج جديد ، انقر فوق الزر " إضافة جديد " لتشغيل منشئ النماذج WPForms.
في صفحة الإعداد لمنشئ النموذج ، يمكنك تسمية النموذج الخاص بك في حقل إدخال اسم النموذج .
إذا لم يتم اختيار أي اسم ، فسيتم تعيين اسم النموذج افتراضيًا على اسم القالب الذي تختاره.
أسفل حقل اسم النموذج ، ستجد المئات من قوالب النماذج في قسم تحديد قالب . هذه قوالب مسبقة الصنع للنماذج شائعة الاستخدام لمساعدتك على البدء بسرعة.
ملاحظة: إذا كنت تريد إنشاء النموذج الخاص بك من البداية ، فاستخدم قالب النموذج الفارغ.
لتحديد قالب ، يمكنك استخدام الفئات الموجودة في القائمة الموجودة على اليسار. يمكنك أيضًا استخدام شريط البحث في الزاوية اليسرى العلوية من مكتبة القوالب للبحث في الخيارات المتاحة.
بمجرد العثور على النموذج الذي تريده ، مرر فوقه وانقر فوق الزر " استخدام النموذج".
إذا كنت تواجه صعوبة في إنشاء النموذج الخاص بك ، فاقرأ إرشاداتنا التفصيلية حول كيفية إنشاء النموذج الخاص بك وتخصيصه بالكامل.
3. أضف فواصل الصفحات إلى النموذج الخاص بك
أنت الآن جاهز لإضافة فواصل الصفحات وشريط التقدم. من خلال إضافة فاصل صفحة ، سيتضمن النموذج تلقائيًا شريط التقدم.
بمجرد فتح منشئ النموذج ، امض قدمًا وأضف أي حقول ترغب في تضمينها في النموذج الخاص بك. ثم اسحب حقل فاصل الصفحة إلى منطقة المعاينة وقم بإفلاته أينما تريد إنشاء صفحة نموذج جديدة.
سيؤدي كل حقل فاصل صفحة تضيفه إلى تقسيم النموذج إلى صفحات إضافية ، ويمكنك إضافة العديد من الصفحات حسب الحاجة. لنقل فاصل الصفحة إلى قسم مختلف من النموذج الخاص بك ، ما عليك سوى النقر فوقه في منطقة المعاينة واسحبه أينما تريد.
تخصيص شريط التقدم الخاص بك
بمجرد إضافة فاصل الصفحة ، قد تلاحظ ظهور منطقة الصفحة الأولى في منطقة المعاينة أعلى النموذج. انقر فوق الصفحة الأولى / مؤشر التقدم للوصول إلى خيارات النموذج متعدد الصفحات الخاص بك.
يمكنك تخصيص شريط التقدم في القائمة المنسدلة لمؤشر التقدم .
يمكنك بعد ذلك الاختيار من بين أنماط مؤشر التقدم الثلاثة: شريط التقدم أو الدوائر أو الموصل .
شريط التقدم:
الدوائر:
الموصل:
لتغيير لون مؤشر التقدم ، استخدم منتقي الألوان أو أدخل رمز HEX.
أخيرًا ، أدخل اسمًا للصفحة الأولى للنموذج في حقل عنوان الصفحة .
ومع ذلك ، إذا كنت راضيًا عن الشكل الذي يظهر به النموذج الخاص بك كما هو ، فيمكنك إخفاء شريط التقدم عن طريق تحديد لا شيء .
تريد معرفة المزيد؟ اقرأ كامل كيفية إنشاء إرشادات نموذج متعدد الصفحات وتخصيص التفاصيل للاستفادة الكاملة من ميزة النموذج هذه.
4. حفظ ونشر النموذج الخاص بك
بمجرد الانتهاء من تخصيص النموذج الخاص بك ، يمكنك الآن نشره. أولاً ، انقر فوق الزر "حفظ" البرتقالي الكبير في الزاوية اليمنى العليا من أداة إنشاء النماذج.
يمكنك بعد ذلك استخدام معالج التضمين لدمج النموذج الخاص بك في موقع الويب الخاص بك عن طريق النقر فوق الزر " تضمين ".
من هنا ، سيكون لديك خيار إما إنشاء صفحة جديدة لتضمين النموذج الخاص بك ، أو لتحديد صفحة موجودة لإضافة النموذج الخاص بك إليها.
إذا حددت خيار إنشاء صفحة جديدة ، فسيُطلب منك إدخال اسم للصفحة. ثم انقر فوق الزر Let's Go لتضمين النموذج الخاص بك ونشر صفحتك.
إذا اخترت خيار تحديد صفحة موجودة ، فسيُطلب منك اختيار الصفحة التي تريد تضمين النموذج فيها من القائمة المنسدلة.
ثم انقر فوق الزر Let's Go لتضمين النموذج الخاص بك.
يمكنك الآن عرض النموذج الخاص بك على الصفحة المحددة. إما أن تذهب إلى الصفحة التي قمت بتضمينها فيها أو انتقل إلى WPForms »جميع النماذج . مرر مؤشر الماوس فوق عنوان النموذج لعرض قائمة إضافية من الخيارات. بمجرد ظهور الخيارات ، انقر فوق معاينة .
5. تحقق من شريط تقدم النموذج
سيكون لديك الآن نموذج يحتوي على مؤشر تقدم مشابه لهذا:
نوصي باختبار النموذج الخاص بك عن طريق ملء الحقول وإرساله ، للتأكد من أن كل شيء يبدو جيدًا ويعمل بالطريقة التي تريدها.
ملاحظة : يمكن نقل حقول فاصل الصفحة لأعلى أو لأسفل في النموذج إذا كنت ترغب في ضبط التخطيط.
بعد ذلك ، كن خبيرًا في بناء النماذج
هل ترغب في زيادة معرفتك ببناء WPForm؟ تأكد من مراجعة دليلنا الكامل لحقول النموذج وكيفية تخصيص الحقول في النماذج الخاصة بك.
هل أنت مستعد لبناء استمارتك الآن؟ تذكر التسجيل في WPForms Pro لأنه يتضمن حقل Page Break وشريط التقدم ، ومئات من القوالب المجانية ، ونقدم أيضًا ضمانًا لاسترداد الأموال لمدة 14 يومًا.
قم بإنشاء نموذج WordPress الخاص بك الآن
إذا ساعدتك هذه المقالة ، فيرجى متابعتنا على Facebook و Twitter للحصول على المزيد من البرامج التعليمية والأدلة المجانية لـ WordPress.