كيفية إضافة نموذج متعدد الخطوات في ووردبريس في 5 خطوات سهلة

هل تعلم أن تحويل نموذج WordPress ذو الخطوة الواحدة إلى نموذج متعدد الخطوات في WordPress يمكن أن يزيد من معدل التحويل بنسبة 60٪ تقريبًا ؟ في الواقع ، في بعض الحالات ، يمكن أن يصل معدل التحويل إلى 300٪ .

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

ومع ذلك ، يمكنك تغيير هذا السيناريو باستخدام نموذج متعدد الخطوات لموقع WordPress الخاص بك. ولكن السؤال هو كيف؟

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

استمر في القراءة لتكتشف كيف يمكنك بسهولة إنشاء نموذج متعدد الخطوات في موقع WordPress الإلكتروني في بضع دقائق فقط….

ما هو النموذج متعدد الخطوات؟

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

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

- Hubspot

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

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

لماذا استخدم نموذج متعدد الخطوات في ووردبريس؟

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

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

الآن بعد أن عرفت أنه يجب عليك استخدام نماذج متعددة الخطوات في موقع WordPress ، فقد حان الوقت لإنشاء الإعداد المثالي الذي تحتاجه لإنشاء نموذج متعدد الأجزاء.

قم بالإعداد لإنشاء نموذج WordPress متعدد الخطوات

إلى جانب WordPress ، ستحتاج إلى مكونين إضافيين آخرين لإنشاء نماذج متعددة الخطوات في WordPress بسهولة. إضافات WordPress هذه هي:

1. العنصر (نسخة مجانية)
2. MetForm (مجاني ومحترف)

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

بمجرد الانتهاء من التثبيت ، تحتاج إلى إنشاء صفحة باستخدام مُنشئ صفحة Elementor قبل أن تتمكن من استخدام Metform. لذلك ، انتقل إلى لوحة القيادة ⇒ الصفحة إضافة جديد .

الآن ، قم بتوفير عنوان مناسب ، حدد Elementor Full Width كقالب ، انقر فوق Publis h. بعد ذلك ، انقر فوق تحرير باستخدام Elementor.

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

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

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

في هذه المدونة ، ستتعلم إنشاء نموذج متعدد الخطوات بمظهر عصري من البداية في 5 خطوات سهلة فقط:

الخطوة 1: سحب وإسقاط MetForm

بمجرد أن تكون في وضع التحرير باستخدام Elementor ، ابحث عن MetForm واسحب وأسقط المكان الذي تريد أن يظهر فيه النموذج.

الخطوة 2: إنشاء نموذج جديد

انقر فوق قسم النموذج للانتقال إلى خيارات تحرير MetForm . انقر فوق زر تحرير النموذج .

مرة واحدة النوافذ المنبثقة نافذة جديدة

• حدد جديد (إنشاء نموذج جديد)
• قم بتوفير اسم النموذج للنموذج
• اختر القالب الفارغ ،
• وانقر على تعديل النموذج

الخطوة 3: إنشاء نموذج متعدد الخطوات من Scratch باستخدام MetForm و Elementor Page Builder

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

أضف قسم جديد تمامًا

قم بسحب وإفلات حقول الإدخال وفقًا للمتطلبات

قم بسحب وإسقاط زر السابق / التالي / إرسال بناءً على عبارة النموذج

أدخل اسمًا مناسبًا للقسم

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

نموذج الحجز الخطوة الأولى - المعلومات الشخصية:

• بالنسبة لقسم المعلومات الشخصية ، انقر فوق رمز Elementor + واختر هيكلًا به عمودين متساويين .

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

• الآن لتحرير سمة حقل الإدخال هذا ، انقر فوق علامة التحرير ، وانتقل إلى Content content وقم بتحرير الخيارات التالية:
  • إظهار التسمية: قم بتشغيل هذا الخيار لإظهار تسمية حقل الإدخال.
  • الموضع: يمكنك اختيار وضع الملصق أعلى أو اليسار.
  • التسمية: أدخل اسمًا للتسمية الخاصة بك. سأستخدم "الاسم الأول".
  • الاسم: حقل الاسم مطلوب ويجب أن يكون فريدًا. لذلك ، تأكد من إعطاء اسم مختلف لكل حقل واستبدال المسافة بشرطة سفلية / واصلة.
  • عنصر نائب: أدخل نصًا نائبًا.
  • نص المساعدة: في حالة رغبتك في تقديم نص تعليمات للمستخدمين ، يمكنك القيام بذلك هنا.

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

ملاحظة: سأستخدم ميزة المنطق الشرطي في الخطوة الثانية من هذا النموذج.

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

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

• الآن قسم للخطوة الأولى جاهز ، لإعطاء اسم مناسب للخطوة الأولى
  • انقر على أيقونة النقاط الست لفتح خيار الإعدادات وانتقل إلى التخطيط ⇒ متعدد الخطوات .
  • قم بتوفير اسم في خيار عنوان علامة التبويب متعدد الخطوات
  • اختر رمزًا من المكتبة أو قم بتحميل ملف SVG.
  • انقر فوق التحديث للحفظ.

الآن وقد أصبح القسم الأول جاهزًا ، فلنقم ببناء الخطوة الثانية.

نموذج الحجز الخطوة الثانية - معلومات الحجز:

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

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

• إلى جانب خيار الإعدادات المذكور لحقل النص ، ستحصل على الإعدادات التالية لحقل إدخال التاريخ ضمن Content Settings
  • تعيين التاريخ الحالي كحد أدنى للتاريخ: قم بتشغيل هذا الخيار لتعيين التاريخ الحالي كحد أدنى للتاريخ.
  • تعيين الحد الأدنى للتاريخ يدويًا: إذا كنت لا تريد تعيين التاريخ الحالي باعتباره الحد الأدنى للتاريخ ، فيمكنك تعيين الحد الأدنى للتاريخ يدويًا أيضًا.
  • قم بتعيين الحد الأقصى للتاريخ يدويًا: هنا يمكنك تعيين الحد الأقصى للتاريخ.
  • تعطيل قائمة التاريخ: يمكنك استخدام هذا الخيار لتعطيل بعض التواريخ. لتعطيل أي تاريخ ، انقر فوق الزر + إضافة عنصر وحدد التاريخ.
  • إدخال تاريخ النطاق: من خلال تشغيل هذا الخيار ، يمكنك تمكين المستخدمين من اختيار نطاق من التواريخ. لكن بالنسبة لهذا النموذج ، سأترك هذا الخيار مغلقًا.
  • إدخال السنة: قم بتشغيل هذا الخيار لأخذ سنة كجزء من إدخال التاريخ.
  • إدخال الشهر: لتمكين الشهر كجزء من إدخال التاريخ ، قم بتشغيل هذا الخيار.
  • إدخال التاريخ: قم بتشغيل هذا الخيار لأخذ تاريخ (يوم) كجزء من إدخال التاريخ
  • تنسيق التاريخ: اضبط تنسيق إدخال التاريخ هنا.
  • الترجمة: اختر الموقع من القائمة المنسدلة بناءً على تفضيلاتك.
  • تريد إدخال الوقت معها: قم بتشغيل هذا الخيار لتستغرق بعض الوقت مع البيانات كإدخال. إذا قمت بتشغيل هذا الخيار ، فستحصل على خيار آخر وهو تمكين الوقت 24 ساعة. باستخدام هذا الخيار ، يمكنك تمكين تنسيق 24 ساعة.

الآن ، أخيرًا ، سنستخدم ميزة النموذج الشرطي لحقل السحب. لجعل حقل الإعارة مرئيًا فقط عندما يكون حقل الإيداع فارغًا ،

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

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

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

ونظرًا لأن هذه هي الخطوة الوسطى ، فنحن بحاجة إلى تضمين كل من الزرين السابق والتالي .

بمجرد الانتهاء من تحرير الإعدادات لجميع الحقول المضافة لهذا القسم ، قم بتغيير اسم القسم / الخطوة من التخطيط - متعدد الخطوات تمامًا كما فعلت مع القسم الأول. أقوم بتسميته معلومات الحجز.

الآن الخطوة الثانية جاهزة ، دعنا ننتقل إلى الخطوة الثالثة

نموذج الحجز الخطوة الثالثة - معلومات إضافية

للخطوة الثالثة ، دعنا نضيف قسمًا جديدًا بعمود واحد. وقم بإضافة حقل نصي وقم بتسميته "معلومات إضافية".

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

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

لإعطاء اسم للقسم الثالث ، انتقل إلى التخطيط ⇒ متعدد الخطوات وأضف العنوان " معلومات إضافية " وأضف رمزًا.

أخيرًا ، انتهينا من بناء نموذج WordPress متعدد الخطوات الخاص بنا بثلاث خطوات. انقر الآن على تحديث لحفظ وإغلاق النافذة للانتقال إلى الإعدادات متعددة الخطوات.

الخطوة 4: تمكين خيار النموذج متعدد الخطوات في MetForm

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

• انتقل إلى المحتوى ⇒ إعدادات الخطوات المتعددة
• قم بتشغيل خيار تمكين الخطوات المتعددة لتنشيط الخيارات متعددة الخطوات
• قم بتمكين Display Multistep Nav حتى تظهر قائمة القسم في الأعلى. يمكنك أيضًا تعديل الإعدادات المختلفة مثل Adaptive Form Container Height ، تمكين التمرير إلى الأعلى ، إلخ.
• بعد إجراء جميع التغييرات ، انقر فوق "تحديث" للحفظ

الخطوة 5: تكوين التأكيد والإخطار والإعدادات الأخرى للإكمال

الآن بعد أن صممت نموذجك متعدد الخطوات. لنقم بتهيئة جميع إعدادات النموذج التي يجب أن يقدمها MetForm. لتعديل إعدادات MetForm من لوحة معلومات WordPress ، انتقل إلى MetForm ⇒ Forms انقر فوق خيار تحرير للنموذج الذي أنشأته للتو.

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

ستجد هنا الإعدادات التالية:

عام:

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

تأكيد:

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

إعدادات الإشعار:

يمكنك إرسال رسائل بريد إلكتروني لإشعار النموذج إلى المسؤول أيضًا باستخدام MetForm. قم بتمكين خيار إعلام البريد إلى المسؤول. ثم قم بتعيين موضوع البريد الإلكتروني ، والبريد الإلكتروني إلى ، والبريد الإلكتروني من ، وملاحظة المسؤول ، وما إلى ذلك.

بعد إجراء جميع التعديلات ، قم بالتمرير لأسفل وانقر فوق حفظ التغييرات لتحديث الإعدادات.

بصرف النظر عن الإعدادات التي غطتها في هذه المدونة ، يمكنك أيضًا الحصول على تكامل مثل REST API و Mail Chimp و Google Sheet وما إلى ذلك أيضًا ، تكامل بوابة الدفع مثل PayPal و Stripe. تكامل CRM الذي يتضمن HubSpot و Zoho وما إلى ذلك. يمكنك أيضًا الحصول على خيارات المصادقة مثل تسجيل الدخول والتسجيل . لمزيد من التفاصيل حول هذه الإعدادات ، تحقق من وثائق MetForm الخاصة بنا.

إذا اتبعت الخطوات المذكورة بشكل صحيح ، فيجب أن تحصل على نموذج حجز متعدد الخطوات مثل النموذج أدناه:

يتم إحتوائه

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

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

لا تنس التحقق من جميع الميزات الرائعة التي يقدمها MetForm.