كيفية إضافة نموذج اتصال منبثق في WordPress

نشرت: 2023-04-08

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

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

في هذه المقالة ، سنوضح لك كيفية إضافة نافذة منبثقة لنموذج الاتصال في WordPress.

How to add a contact form popup in WordPress

لماذا تستخدم نافذة منبثقة لنموذج الاتصال؟

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

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

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

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

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

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

  • كيفية إنشاء نموذج اتصال WordPress
  • أضف نموذج اتصال منبثق إلى موقع WordPress الخاص بك

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

أولاً ، ستحتاج إلى تحديد مكون إضافي لنموذج اتصال WordPress.

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

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

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

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

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

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

Add a new form

بعد ذلك ، سيطلب منك WPForms إدخال اسم للنموذج وتحديد قالب.

انطلق وحدد نموذج "نموذج الاتصال البسيط".

The WPForms Simple Contact template

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

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

A contact form template

يتيح لك WPForms أيضًا تخصيص كل حقل في نموذج الاتصال.

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

Edit each field in the contact form

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

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

Editing the WPForms settings

بعد ذلك ، يمكنك الانتقال إلى خيار إعدادات الإشعارات. بشكل افتراضي ، يتم إرسال الإشعارات إلى البريد الإلكتروني للمسؤول الذي تم إعداده على موقع WordPress الخاص بك.

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

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

Edit notification settings

بعد ذلك ، امض قدمًا وانقر على خيار التأكيدات.

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

Edit form confirmation settings

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

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

Embed your form

بعد ذلك ، انقر فوق الخيار "تضمين" في الزاوية العلوية بجوار الزر "حفظ".

عندما تظهر نافذة جديدة ، حدد خيار "استخدام رمز قصير".

Click the use a shortcode link

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

أضف نموذج اتصال منبثق إلى موقع WordPress الخاص بك

لإنشاء نموذج اتصال منبثق ، ستحتاج إلى مكون إضافي منبثق في WordPress.

نوصي باستخدام OptinMonster لأنه أفضل مكون إضافي لتوليد العملاء المحتملين وتحسين التحويل لـ WordPress. أكثر من 1.2 مليون موقع يستخدم الأداة القوية.

في هذا البرنامج التعليمي ، سنستخدم إصدار OptinMonster Pro ، والذي يتضمن نموذجًا خالٍ من الفوضى وقواعد عرض متقدمة لإظهار النافذة المنبثقة.

ستحتاج أولاً إلى التسجيل للحصول على حساب بالانتقال إلى موقع OptinMonster على الويب. ما عليك سوى زيارة موقع الويب والنقر فوق الزر "Get OptinMonster Now".

OptinMonster

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

بعد تنشيط المكون الإضافي ، سترى معالج الإعداد. انطلق وانقر على زر "ربط حسابك الحالي".

Connect your existing account

ستظهر الآن نافذة منبثقة ، وسيطلب OptinMonster الاتصال بحسابك.

ما عليك سوى النقر فوق الزر "الاتصال بـ WordPress".

Connect OptinMonster to WordPress

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

يمكنك البدء بالانتقال إلى OptinMonster »الحملات ثم النقر فوق الزر" إنشاء حملتك الأولى ".

Create first OptinMonster campaign

في الشاشة التالية ، سيتعين عليك تحديد نوع الحملة.

نظرًا لأننا سننشئ نافذة منبثقة لنموذج الاتصال ، حدد "منبثقة" كنوع حملتك.

Choose a campaign type and template

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

يمكنك اختيار أي قالب تريده. بعد ذلك ، أدخل اسمًا لحملتك وانقر فوق الزر "بدء البناء".

Enter a name for your campaign

الآن باستخدام أداة السحب والإفلات في OptinMonster ، يمكنك تحرير القالب المنبثق الخاص بك.

سترى الآن كتل مختلفة تظهر في القائمة على يسارك. ما عليك سوى التوجه إلى كتلة "WPForms" وسحبها وإفلاتها في القالب الخاص بك.

Add the WPForms block in popup

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

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

Enter contact form shortcode

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

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

See contact form shortcode

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

بشكل افتراضي ، سيقوم OptinMonster بتعيينه عندما يكون الوقت على الصفحة 5 ثوانٍ ، وستظهر النافذة المنبثقة على أي صفحة.

ومع ذلك ، يمكنك تغيير إعدادات قاعدة العرض وتحديد المشغلات وخيارات الاستهداف المختلفة.

نقترح استخدام استهداف MonsterLink (عند النقر). بهذه الطريقة ، ستظهر النافذة المنبثقة عندما ينقر الزائر على رابط أو زر.

Select MonsterLink display rule

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

لمزيد من التفاصيل ، يمكنك اتباع دليل المبتدئين الخاص بنا حول كيفية إضافة رابط في WordPress.

Copy the MonsterLink code

سيبدو كود MonsterLink كما يلي في HTML:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

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

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

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

Add a button block

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

أضف الآن عنوان URL الخاص بـ MonsterLink إلى الزر الخاص بك.

Enter the MonsterLink in the button

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

بعد ذلك ، عد إلى حملة OptinMonster لإكمال التكوين.

بعد تحديد MonsterLink كهدف لك وعرضه على أي صفحة ، يمكنك النقر فوق الزر "التالي" في الأسفل.

Complete display rules setup

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

انطلق وانقر على زر "التالي" عندما تكون راضيًا عن الإعدادات.

Setup additional display rule settings

بعد ذلك ، سيعرض OptinMonster ملخصًا لإعدادات قاعدة العرض الخاصة بك.

يساعد هذا في ضمان الإعداد الصحيح لوقت ظهور حملاتك على موقع الويب الخاص بك.

View display rules summary

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

بعد ذلك ، يمكنك النقر فوق الزر "معاينة" قبل نشر حملتك. سيُظهر لك هذا معاينة مباشرة لكيفية ظهور النافذة المنبثقة على موقع الويب الخاص بك.

عندما تكون راضيًا عن مظهر حملتك ، قم بتغيير "حالة النشر" من مسودة إلى نشر.

Change the publish status

يمكنك الخروج من مُنشئ حملة OptinMonster والتحقق من حالة حملتك من لوحة معلومات WordPress الخاصة بك أيضًا.

ما عليك سوى النقر فوق القائمة المنسدلة "الحالة" على يمينك وتغيير الحالة من معلق إلى منشور.

Change the campaign status

لا تنس حفظ التغييرات.

بعد ذلك ، انتقل إلى زر الاتصال بنا الذي أنشأته مسبقًا باستخدام MonsterLink وشاهد نموذج الاتصال المنبثق قيد التشغيل.

Contact form popup preview

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

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على YouTube لدروس فيديو WordPress. يمكنك أيضًا أن تجدنا على Twitter و Facebook.