ووردبريس

كيفية إنشاء نموذج المراسلة بنافذة منبثقة على مواقع ووردبريس

هل ترغب في عرض نموذج المراسلة او الاتصال الخاص بموقعك عندما ينقر المستخدم على زر الاتصال أو الارتباط؟

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

إنشاء نموذج المراسلة بنافذة منبثقة بسهولة في ووردبريس

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

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

wpforms

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

optinmonster

الخطوة الاولى : تثبيت اضافة  WPForms و OptinMonster

add-wordpress-plugins

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

الخطوة الثانية : إنشاء نموذج جهة اتصال باستخدام WPForms لـ Popup

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

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

wpforms-dashboard

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

WPForms-Lite-Templates

 

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

 

WPForms-builder

 

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

الآن اضغط على علامة التبويب ” تضمين” بجوار زر “حفظ” وانسخ الرمز القصير.

WPForms-Builder-shortcode

 

الخطوة الثالثة : إنشاء نافذة منبثقة باستخدام OptinMonster

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

optinmonster-popups

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

OptinMonster-Campaign-1-1

بالنسبة للقالب ، دعنا نختار  Canvas . حيث  يدعم جميع أشكال الرموز المختصرة. حتى تتمكن من إدراج أي رموز HTML و CSS وجافا سكريبت .

template-optinmonster

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

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

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

Add-blocks

هنا يمكنك إدخال رمز قصير لنموذج جهة الاتصال مع أي HTML مخصص آخر قد ترغب في إضافته. لذلك دعونا نضيف الرمز المختصر الخاص بنا كما يلي:

<h3>هل لديك اي سؤال ?</h3>
<p class=”tagline”>هل لديك اي سؤال حول خدمتنا؟ ما عليك سوى ملء النموذج وسنعاود الاتصال بك في أقرب وقت ممكن
.
<!– WPForms: no fields, form hidden –>

إليك معاينة لكيفية القيام بذلك.

 

HTML-code

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

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

 

الخطوة الرابعة : نشر نموذج الاتصال المنبثق

بمجرد الانتهاء من العمل على التغييرات ، انقر فوق الخيار ” نعم / لا” في الأعلى وانقر فوق علامة التبويب ” تنشيط” .

Editing-popup-form-OptinMonster-App

 

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

publish-full-screen-campaign

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

enable-optin-

 

أخيرًا انقر فوق خيار حفظ الإعدادات في نهاية الصفحة.

 

الخطوة الخامسة : تفعيل نموذج الاتصال بنافذة المنبثق

قم أولاً بنسخ حملة OptinMonster. يمكنك العثور عليه بجوار اسم حملتك مباشرةً.

 

enable-optin-2

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

<a href=”#” class=”manual-optin-trigger” data-optin-slug=”your slug goes here”>Contact us</a>
text-editor

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

أمل أن تكون قد وجدت هذا المقال مفيدًا.

الوسوم

أيسر موفق

متخصص في كتابة المقالات التحليلية والسيو، مهتم بتطوير محركات البحث وتحسين جودة المحتوى العربي على الإنترنت، خبرة أكثر من 15 سنة في مجال الكتابة والتسويق بالمحتوى ووضع استراتيجات المحتوى وخُطط التسويق بشكل عام.
الإشتراك
نبّهني عن
guest
0 تعليقات
التقيمات المضمنة
عرض جميع التعليقات

مقالات ذات صلة

زر الذهاب إلى الأعلى
0
التعليق عى المقال , شاركنا رأيك.x
()
x
إغلاق