كيفية إنشاء نموذج اتصال Divi في WordPress

نشرت: 2022-01-20
how to create a divi contact form

هل تبحث عن طريقة سهلة لإنشاء نموذج اتصال Divi لموقع WordPress الخاص بك؟

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

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

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

هذا هو السبب في أن Divi Builder يأتي أيضًا مع وحدة WPForms بحيث يمكنك بسهولة إضافة نماذج اتصال احترافية ببضع نقرات.

في هذا المنشور ، سنعرض لك هاتين الطريقتين لإنشاء نموذج اتصال Divi في WordPress:

  • قم بإنشاء نموذج اتصال مع Divi Builder
  • قم بإنشاء جهة اتصال Divi مع WPForms

إنشاء نموذج اتصال مع Divi Builder

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

Divi

بعد تثبيت وتفعيل Divi Theme على لوحة معلومات WordPress الخاصة بك ، افتح أي صفحة أو منشور حيث تريد إضافة نموذج اتصال Divi الخاص بك.

في محرر المنشورات ، سترى زر استخدام Divi Builder . انقر فوق الزر لتشغيل المنشئ في الواجهة الأمامية لموقعك.

divi builder post editor

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

في هذا البرنامج التعليمي ، سنبدأ بالصفحة الجديدة ونضيف نموذج الاتصال.

build from scratch divi

ثم سترى Divi builder حيث يمكنك اختيار قالب صف يتوافق مع احتياجاتك.

add row divi builder

بعد إضافة الصف ، يمكنك رؤية لوحة Insert Module التي تتيح لك إضافة أنواع مختلفة من وحدات المحتوى.

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

divi contact form module

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

divi contact form editor

بالإضافة إلى ذلك ، ستجد خيارات لتحرير العنوان وإرسال رسالة ناجحة وإرسال نص الزر في إعدادات النص .

divi form name and settings

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

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

divi contact form settings

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

إذا كنت ترغب في إضافة المزيد من الميزات المتقدمة إلى نموذج اتصال Divi الخاص بك ، فستحتاج إلى استخدام مكون إضافي جيد منشئ النماذج.

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

قم بإنشاء نموذج اتصال Divi باستخدام WPForms

WPForms

WPForms هو أفضل مكون إضافي لمنشئ نماذج السحب والإفلات لـ WordPress. يتيح لك إنشاء أي نوع من النماذج مثل نماذج الاتصال ونماذج التسجيل وتنزيل النماذج والمزيد بنقرات قليلة.

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

ستكون جميع نماذج جهات الاتصال التي تقوم بإنشائها باستخدام WPForms مستجيبة بنسبة 100٪ بحيث يتم عرضها بشكل جميل على أي حجم شاشة. حتى أن هناك خيارًا مدمجًا للحماية من البريد العشوائي حتى تتمكن من منع عمليات إرسال البريد العشوائي ونماذج الاحتيال على موقعك.

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

فيما يلي بعض الأسباب التي تجعلك تبني نموذج اتصال Divi الخاص بك مع WPForms:

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

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

أيضًا ، يمكنك استخدام WPForms على أي موقع WordPress ، مع أو بدون Divi. إذا قررت التوقف عن الدفع مقابل Divi ، فستظل النماذج التي تنشئها باستخدام WPForms كما هي على موقعك.

مع ذلك ، دعنا نتعلم كيفية إنشاء نموذج اتصال مع WPForms + Divi.

الخطوة 1: تثبيت البرنامج المساعد WPFroms وتنشيطه

أولاً ، ستحتاج إلى التسجيل للحصول على حساب WPForms.

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

بعد التسجيل ، ستتمكن من الوصول إلى لوحة معلومات WPForms. ستجد ملف البرنامج المساعد جنبًا إلى جنب مع ترخيصك في علامة التبويب التنزيلات .

WPForms license key

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

بمجرد تثبيت وتنشيط WPForms على موقعك ، انتقل إلى WPForms »علامة التبويب الإعدادات في لوحة تحكم المسؤول.

هنا ، ستحتاج إلى إدخال مفتاح الترخيص والنقر فوق زر التحقق .

verify wpforms license

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

الخطوة 2: إنشاء نموذج الاتصال

لإنشاء نموذج جديد ، توجه إلى علامة التبويب Add New في لوحة معلومات WordPress الخاصة بك. سيؤدي هذا إلى تشغيل مكتبة القوالب حيث يمكنك البحث عن قالب نموذج اتصال مناسب لموقعك.

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

أدخل اسمًا لنموذج الاتصال الخاص بك وانقر فوق الزر " استخدام القالب " في قالب النموذج الذي تختاره.

create divi contact form in wpforms

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

ستجد مجموعة كبيرة من حقول النماذج المفيدة مثل الأرقام والقائمة المنسدلة والاختيار من متعدد وتحميل الملفات والتصنيف والنص المنسق وغير ذلك الكثير.

wpforms form fields

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

wpforms drag and drop

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

add file upload to divi contact form

بمجرد إضافة جميع الحقول المطلوبة إلى نموذج الاتصال Divi الخاص بك ، انقر فوق الزر حفظ في الجزء العلوي من منشئ النموذج.

بعد ذلك ، ستحتاج إلى إعداد إعدادات النموذج والإشعارات والتأكيدات.

الخطوة 3: تكوين إعدادات النموذج

لتغيير إعدادات النموذج ، افتح الإعدادات »علامة التبويب عام من لوحة القائمة اليسرى في منشئ النموذج. هنا ، يمكنك تغيير اسم النموذج ووصف النموذج ونص زر الإرسال والمزيد.

هناك أيضًا خيار لتمكين الحماية من البريد العشوائي على موقعك. سيؤدي هذا إلى إعداد Google reCAPTCHA لنموذج الاتصال الخاص بك.

general settings wpforms

للتوجه إلى الإعدادات »علامة تبويب الإخطارات لإعداد إشعارات البريد الإلكتروني لنموذج اتصال Divi الخاص بك. سترى أن هناك إشعارًا افتراضيًا يتم إرساله إلى عنوان البريد الإلكتروني للمسؤول.

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

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

form notificaitons wpforms

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

وبالمثل ، يتيح لك WPForms تحديد ما يحدث بعد قيام المستخدم بإرسال معلومات الاتصال الخاصة به على موقعك. انتقل إلى الإعدادات »علامة التبويب التأكيدات وسترى خيار اختيار إجراء التأكيد.

wpforms-confirmations

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

بمجرد الانتهاء من إعدادات النموذج ، تأكد من النقر فوق الزر حفظ .

الآن وقد أصبح نموذج الاتصال الخاص بك جاهزًا ، يمكنك إدراجه على موقع الويب الخاص بك باستخدام Divi Builder.

الخطوة 4: أضف وحدة WPForms في Divi

لإضافة نموذج الاتصال هذا على أي صفحة أو منشور ، افتح Divi Builder واختر تخطيط الصف كما فعلنا لوحدة نموذج الاتصال Divi.

الاختلاف الوحيد هنا هو أنك ستحتاج إلى البحث عن وحدة WPForms .

divi wpforms contact form

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

choose wpforms contact form

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

الخطوة 5: انشر نموذج الاتصال Divi الخاص بك

الخطوة الأخيرة هي نشر نموذج الاتصال الخاص بك. لهذا ، انقر فوق الزر 3 نقاط في الجزء السفلي من Divi Builder.

publish divi contact form

بعد ذلك ، سترى الخيارات المختلفة مثل التكبير / التصغير والمعاينة سريعة الاستجابة والمزيد. على الجانب الأيمن ، هناك زرين: حفظ المسودة والنشر.

انقر فوق الزر " نشر " لنشر صفحتك ونموذج الاتصال على موقع WordPress الخاص بك.

publish your divi contact form

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

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

يتيح لك WPForms أيضًا إنشاء نماذج WordPress لأي غرض وفقًا لمتطلباتك. يمكنك إنشاء نماذج الطلبات ونماذج تسجيل الأحداث ونماذج الاشتراك وغير ذلك الكثير.

وهذا كل شيء لهذا اليوم! نأمل أن يساعدك هذا البرنامج التعليمي في تعلم كيفية إنشاء نموذج اتصال Divi في WordPress بسهولة.

إذا كنت تريد المزيد من المساعدة بشأن نماذج WordPress ، فيمكنك التحقق من هذه الموارد:

  • كيفية إنشاء نموذج تسجيل حدث في WordPress
  • 8 من أفضل أدوات التقاط البريد الإلكتروني ومنشئ النماذج لـ WordPress
  • كيفية تقليل التخلي عن النموذج بسهولة

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