هل تبحث عن دليل لإنشاء نموذج ووردبريس متعدد الخطوات؟
يقسم النموذج متعدد الخطوات النماذج الكبيرة إلى أجزاء أصغر. تقلل النماذج متعددة الخطوات من الفوضى وتجعل عملية التسجيل أسهل لزوارك. إنها طريقة رائعة لزيادة التحويلات وتحسين تجربة المستخدم الإجمالية.
لكن إنشاء واحد من الصفر أمر مرهق حقًا وإذا كان عليك توظيف مطور لإنشاء واحد، فسيكون مكلفًا أيضًا.
في هذه المقالة، سنوضح لك كيفية إنشاء نموذج ووردبريس متعدد الخطوات بالطريقة السهلة دون الحاجة إلى البرمجة.
دعنا نتعمق.
الخطوة 1: إنشاء نموذج جديد باستخدام WPForms
أول شيء ستحتاج إلى القيام به هو تثبيت وتفعيل WPForms.
WPForms هو المكون الإضافي الأول لبناء النماذج في ووردبريس في العالم. إذا لم تكن متأكدًا من كيفية تثبيت WPForms، فيجب عليك الاطلاع على هذا الدليل خطوة بخطوة حول كيفية تثبيت مكون إضافي في ووردبريس.
بعد ذلك، توجه إلى لوحة تحكم WPForms وانتقل إلى التنزيلات للحصول على المكون الإضافي الخاص بك:
بعد ذلك، قم بتثبيت وتفعيل المكون الإضافي على موقعك. وانسخ مفتاح الترخيص الخاص بك في نفس علامة التبويب.
أخيرًا، انتقل إلى لوحة تحكم ووردبريس الخاصة بك وتوجه إلى WPForms » الإعدادات والصق مفتاح الترخيص الخاص بك:
عند الانتهاء، انقر فوق اتصال.
الآن بعد تثبيت وتفعيل WPForms، حان الوقت لإنشاء نموذجك الأول. توجه إلى WPForms » إضافة جديد:
سيؤدي هذا إلى فتح أداة بناء النماذج بالسحب والإفلات من WPForms.
لإنشاء نموذج جديد، قم بتسميته وحدد قالب النموذج الخاص بك:
وهذا كل شيء! إذا كنت ترغب في إضافة أو تعديل الحقول في نموذج الاتصال الخاص بك، يمكنك القيام بذلك من الشريط الجانبي. اسحب وأفلت حقول النموذج لإضافة حقول جديدة وانقر على الحقول الموجودة لتعديلها:
عند الانتهاء، اضغط على حفظ.
الخطوة 2: إدراج حقل فاصل الصفحات في نموذجك
تقسيم نموذجك إلى صفحات متعددة بسيط وسهل للغاية مع WPForms.
بمجرد إضافة وتخصيص جميع حقول النموذج في نموذجك، تحتاج إلى إضافة حقل نموذج فاصل الصفحات إلى موقعك لتقسيمه إلى صفحات مختلفة.
للقيام بذلك، اسحب حقل نموذج فاصل الصفحات، الموجود ضمن الحقول الرائعة، من اللوحة اليسرى إلى اللوحة اليمنى.
ضع الحقل حيث تريد تقسيم النموذج. إذا كنت تريد فواصل متعددة، فما عليك سوى استخدام وحدات فاصل صفحات متعددة.
الخطوة 3: تخصيص شريط تقدم النموذج متعدد الصفحات
تم الانتهاء من معظم عملك في تصميم النموذج في هذه المرحلة. ولكن لأي نموذج متعدد الصفحات، نوصي باستخدام شريط تقدم للسماح لزوارك بمعرفة مدى تقدمهم في عملية التسجيل. يمكنك بذل جهد إضافي لإعطاء صفحاتك عناوين أيضًا.
لتخصيص شريط التقدم وعنوان الصفحة الأولى لنموذجك متعدد الخطوات، انقر فوق قسم فاصل الصفحة الأولى.
في الشريط الجانبي، يمكنك تعيين نوع مؤشر التقدم إما دوائر أو موصلات. يمكنك أيضًا تعيين عنوان للصفحة.
The epic thing is that you can also set a custom Page Indicator Color. When you’re happy, you can also customize the other page breaks in the exact same way.
You can also toggle on the feature that lets you show site visitors a Previous page button. This way they can return to the previous page of your form if they need to.
When you’re done, just hit the Save button.
Step 4: Configure Your Multi-Step Form Settings
Next, you’ll want to set up notifications and confirmations.
Notifications are emails that you get when someone fills out the form. Confirmations are meant to alert the user that they’ve successfully filled up the form. Usually, this is a “Thank You” message, but you can also redirect your users to a dedicated page.
Head over to Settings » Confirmations to configure confirmation settings:
And then in the same menu, go to Notifications to configure your notification messages:
By default, the notifications are sent to the WordPress admin email. So, if you’d like the emails to be sent somewhere else, such as the email ID of your Head of Sales, you can do that right here.
Step 5: Add Your Multi-Step Form to Your WordPress Website
You’re done configuring your WordPress contact form at this point. So, let’s go ahead and add it to a page. There are 3 basic methods to add a WPForms contact form to your WordPress site. We’re going to take a look at each.
Method#1: Add the Form Using the Block Editor
Head over to whichever page you want to add your contact form and add a new WPForms block:
Then, select your newly created form using the dropdown menu:
And you should see your contact form get inserted automatically into your page.
Just hit Save and Publish to see your WordPress form in action.
Method #2: Add Your Contact Form Using WPForms Shortcodes
WPForms also generates a shortcode for each WordPress contact form. You can copy the contact form shortcode by visiting WPForms » All Forms:
And then, paste the shortcode into any post or page you want. It’s that simple.
If you’re new to shortcodes, you should check out this article on how to add a shortcode on WordPress sites.
Method #3: Add Your Contact Form to the Sidebars
The sidebar is one of the most underused features in most WordPress sites. We highly recommend inserting a contact form in your site’s sidebars. Head over to Appearance » Widgets in your WordPress dashboard and add the WPForms widget to your sidebar:
وأنت انتهيت!
How to Promote Your WordPress Multi-Step Form
هذا كل شيء لهذا اليوم أيها الأصدقاء!
By now, you’ve created a WordPress multi-step form. Next, you should set up form abandonment tracking to reduce your form abandonment rates.
بعد ذلك، كل ما تبقى هو جذب الزيارات إلى موقعك حتى تتمكن نماذج الاتصال الخاصة بك من العمل. طريقة بسيطة للقيام بذلك هي البدء في استخدام إشعارات الدفع. يعد إرسال إشعارات الدفع طريقة رائعة لجذب الزيارات المتكررة إلى موقعك. إذا كان هذا شيئًا تهتم به، فيجب عليك أيضًا الاطلاع على هذه المقالات:
- تكلفة إشعارات الدفع: هل هي مجانية حقًا؟ (تحليل الأسعار)
- كيفية الحصول على المزيد من حركة المرور إلى مدونة ووردبريس الخاصة بك (9 طرق سهلة)
- كيفية زيادة معدل الاشتراك في إشعارات الدفع على الويب (7 طرق)
- كيفية إضافة إضافة إشعارات الويب لـ WordPress إلى موقعك
We recommend using PushEngage to send your push notifications. PushEngage is the #1 push notification software in the world. So, if you haven’t already, get started with PushEngage today.
