كيفية عمل نموذج باستخدام شريط التقدم

نشرت: 2022-04-22

هل ترغب في معرفة كيفية إضافة شريط تقدم إلى نموذج؟

يساعد وجود شريط تقدم في النموذج الخاص بك في تقليل التخلي عن النموذج من خلال إبقاء الزائر على اطلاع على تقدمه.

سنوضح لك كيفية إضافة واحد إلى النموذج الخاص بك أدناه.

ما هو شريط التقدم في النماذج؟

أشرطة التقدم هي ميزات مرئية تُظهر للمستخدمين عدد الصفحات الموجودة في النموذج والصفحة التي يتواجدون فيها حاليًا.

مؤشرات التقدم ، كما تُعرف أيضًا ، سوف تتبع وتشير إلى التقدم الإجمالي للمستخدم أثناء ملء النموذج.

كيفية عمل نموذج باستخدام شريط التقدم

فيما يلي الخطوات التي سنتخذها:

WPForms هو أفضل مكون إضافي لبرنامج WordPress Form Builder. احصل علية بدون مقابل!
    1. قم بتثبيت البرنامج المساعد WPForms
    2. قم بإنشاء نموذج جديد
    3. أضف فواصل الصفحات إلى النموذج الخاص بك
    4. حفظ ونشر النموذج الخاص بك
    5. تحقق من شريط تقدم النموذج الخاص بك

لنبدأ بتثبيت البرنامج المساعد للنموذج الذي سنحتاجه لشريط التقدم.

1. قم بتثبيت البرنامج المساعد WPForms

أولاً ، للحصول على شريط تقدم في النموذج الخاص بك ، ستحتاج إلى شراء ترخيص WPForms Pro ثم تسجيل الدخول إلى حساب WPForms الخاص بك. بمجرد تسجيل الدخول ، انقر فوق علامة التبويب التنزيلات .

علامة التبويب تنزيل في WPForms

سيُظهر لك هذا صفحة تحتوي على جميع التراخيص المتاحة لديك. لتنزيل البرنامج المساعد ، انقر فوق الزر تنزيل WPForms بجوار أحد تراخيصك. سيؤدي هذا إلى حفظ ملف مضغوط من المكون الإضافي WPForms على جهاز الكمبيوتر الخاص بك.

قم بتنزيل الزر WPForms

هام: ستحتاج إلى WPForms Pro لأنه يتضمن حقل فاصل الصفحة. تحتاج إلى حقل فاصل الصفحة إذا كانت لديك خطوات مختلفة في النموذج الخاص بك ولإظهار شريط التقدم.

تثبيت WPForms على موقعك

بمجرد تنزيل ملف zip ، توجه إلى موقع WordPress الخاص بك حيث ترغب في تثبيت WPForms. ثم ، داخل لوحة تحكم المسؤول ، انتقل إلى الإضافات » إضافة جديد وانقر على زر تحميل البرنامج المساعد .

زر تحميل البرنامج المساعد على WordPress

من هنا ، انقر فوق الزر اختيار ملف وحدد ملف WPForms المضغوط الذي قمت بتنزيله للتو.

يشير السهم الأحمر نحو الزر "اختيار ملف"

بعد تحميل الملف الخاص بك ، انقر فوق زر التثبيت الآن .

زر التثبيت الآن على WordPress

سيبدأ هذا عملية التثبيت نيابة عنك. بمجرد تثبيت المكون الإضافي ، انقر فوق الزر تنشيط البرنامج المساعد لتنشيط WPForms على موقعك.

يشير السهم الأحمر إلى زر تنشيط البرنامج المساعد

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

هذا هو! يمكننا الآن المضي قدمًا في إنشاء نموذج جديد.

2. قم بإنشاء نموذج جديد

للبدء ، ستحتاج إلى تسجيل الدخول إلى منطقة إدارة WordPress الخاصة بك. بمجرد الوصول إلى هناك ، انقر فوق WPForms في الشريط الجانبي للمسؤول للانتقال إلى صفحة نظرة عامة على النماذج.

بعد ذلك ، لإنشاء نموذج جديد ، انقر فوق الزر " إضافة جديد " لتشغيل منشئ النماذج WPForms.

إضافة نموذج جديد WPForms

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

تسليط الضوء على الحقل حيث يمكنك تسمية النموذج الخاص بك

إذا لم يتم اختيار أي اسم ، فسيتم تعيين اسم النموذج افتراضيًا على اسم القالب الذي تختاره.

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

ملاحظة: إذا كنت تريد إنشاء النموذج الخاص بك من البداية ، فاستخدم قالب النموذج الفارغ.

حدد قسم قالب في WPForms

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

تسليط الضوء على ميزة شريط بحث القالب

بمجرد العثور على النموذج الذي تريده ، مرر فوقه وانقر فوق الزر " استخدام النموذج".

يشير السهم إلى الزر البرتقالي الكبير "استخدام النموذج"

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

3. أضف فواصل الصفحات إلى النموذج الخاص بك

أنت الآن جاهز لإضافة فواصل الصفحات وشريط التقدم. من خلال إضافة فاصل صفحة ، سيتضمن النموذج تلقائيًا شريط التقدم.

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

صورة متحركة لسحب حقل فاصل الصفحة إلى منشئ النموذج

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

تخصيص شريط التقدم الخاص بك

بمجرد إضافة فاصل الصفحة ، قد تلاحظ ظهور منطقة الصفحة الأولى في منطقة المعاينة أعلى النموذج. انقر فوق الصفحة الأولى / مؤشر التقدم للوصول إلى خيارات النموذج متعدد الصفحات الخاص بك.

سهم يشير إلى الصفحة الأولى / مؤشر التقدم

يمكنك تخصيص شريط التقدم في القائمة المنسدلة لمؤشر التقدم .

سهم يشير إلى خيارات تخصيص شريط التقدم

يمكنك بعد ذلك الاختيار من بين أنماط مؤشر التقدم الثلاثة: شريط التقدم أو الدوائر أو الموصل .

شريط التقدم:

صورة لشريط مؤشر التقدم في WPForms

الدوائر:

نمط دائرة شريط التقدم في WPForms

الموصل:

نمط الموصل لشريط تقدم WPForms

لتغيير لون مؤشر التقدم ، استخدم منتقي الألوان أو أدخل رمز HEX.

محدد اللون لميزة شريط التقدم في WPForms

أخيرًا ، أدخل اسمًا للصفحة الأولى للنموذج في حقل عنوان الصفحة .

سهم يشير إلى حقل عنوان النموذج لإعادة تسمية النموذج الخاص بك

ومع ذلك ، إذا كنت راضيًا عن الشكل الذي يظهر به النموذج الخاص بك كما هو ، فيمكنك إخفاء شريط التقدم عن طريق تحديد لا شيء .

سهم يشير إلى زر نمط مؤشر التقدم

تريد معرفة المزيد؟ اقرأ كامل كيفية إنشاء إرشادات نموذج متعدد الصفحات وتخصيص التفاصيل للاستفادة الكاملة من ميزة النموذج هذه.

4. حفظ ونشر النموذج الخاص بك

بمجرد الانتهاء من تخصيص النموذج الخاص بك ، يمكنك الآن نشره. أولاً ، انقر فوق الزر "حفظ" البرتقالي الكبير في الزاوية اليمنى العليا من أداة إنشاء النماذج.

زر الحفظ البرتقالي الكبير لحفظ النموذج الخاص بك

يمكنك بعد ذلك استخدام معالج التضمين لدمج النموذج الخاص بك في موقع الويب الخاص بك عن طريق النقر فوق الزر " تضمين ".

زر "تضمين النموذج"

من هنا ، سيكون لديك خيار إما إنشاء صفحة جديدة لتضمين النموذج الخاص بك ، أو لتحديد صفحة موجودة لإضافة النموذج الخاص بك إليها.

خيارات التضمين في WPForms

إذا حددت خيار إنشاء صفحة جديدة ، فسيُطلب منك إدخال اسم للصفحة. ثم انقر فوق الزر Let's Go لتضمين النموذج الخاص بك ونشر صفحتك.

اسم صفحة جديدة لتضمين النموذج

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

حدد خيار الصفحة الحالية باستخدام زر Let's Go كبير

ثم انقر فوق الزر Let's Go لتضمين النموذج الخاص بك.

يمكنك الآن عرض النموذج الخاص بك على الصفحة المحددة. إما أن تذهب إلى الصفحة التي قمت بتضمينها فيها أو انتقل إلى WPForms »جميع النماذج . مرر مؤشر الماوس فوق عنوان النموذج لعرض قائمة إضافية من الخيارات. بمجرد ظهور الخيارات ، انقر فوق معاينة .

معاينة خيار النموذج على WPForms

5. تحقق من شريط تقدم النموذج

سيكون لديك الآن نموذج يحتوي على مؤشر تقدم مشابه لهذا:

مثال على كيفية ظهور شريط التقدم في WPForm

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

ملاحظة : يمكن نقل حقول فاصل الصفحة لأعلى أو لأسفل في النموذج إذا كنت ترغب في ضبط التخطيط.

بعد ذلك ، كن خبيرًا في بناء النماذج

هل ترغب في زيادة معرفتك ببناء WPForm؟ تأكد من مراجعة دليلنا الكامل لحقول النموذج وكيفية تخصيص الحقول في النماذج الخاصة بك.

هل أنت مستعد لبناء استمارتك الآن؟ تذكر التسجيل في WPForms Pro لأنه يتضمن حقل Page Break وشريط التقدم ، ومئات من القوالب المجانية ، ونقدم أيضًا ضمانًا لاسترداد الأموال لمدة 14 يومًا.

قم بإنشاء نموذج WordPress الخاص بك الآن

إذا ساعدتك هذه المقالة ، فيرجى متابعتنا على Facebook و Twitter للحصول على المزيد من البرامج التعليمية والأدلة المجانية لـ WordPress.