هل ترغب في عرض نموذج المراسلة او الاتصال الخاص بموقعك عندما ينقر المستخدم على زر الاتصال أو الارتباط؟
الميزة هي أنه في كل مرة ينقر فيها المستخدم على زر الاتصال أو الرابط ، بدلاً من الانتقال إلى صفحة جديدة ، يتم فتح نموذج الاتصال في شكل نافذة منبثقة ، مما سيزيد من عمليات إرسال الرسائل . في هذه المقالة ، اعرض لك كيفية إنشاء نافذة منبثقة لنموذج الاتصال في موقع ووردبريس دون التأثير على تجربة المستخدم الخاصة بك خطوة بخطوة.
إنشاء نموذج المراسلة بنافذة منبثقة بسهولة في ووردبريس
باستخدام ووردبريس ، يعد إنشاء نافذة منبثقة لنموذج الاتصال أمرًا سهلاً.
لتحقيق أفضل النتائج ، اوصي باستخدام WPForms لإنشاء نموذج الاتصال الخاص بك. إنها اضافة قوية لبناء النماذج تتيح لك إنشاء أي نوع من النماذج تقريبًا في أقل من 5 دقائق. قراءة المزيد عن WPForms هنا .
عندما يتعلق الأمر بالإضافات المنبثقة ، نعتقد أنه لا يوجد خيار آخر أفضل من OptionMonster . إنه أحد الاضافات الأكثر شعبية التي تتيح لك جذب انتباه الزائر وتشجيعهم على اتخاذ إجراءات على موقعك . من خلال هذا البرنامج المساعد ، يمكنك زيادة مشاركة المستخدم وتعزيز تحويلاتك ومبيعاتك.
الخطوة الاولى : تثبيت اضافة WPForms و OptinMonster
ابدأ بتحميل المكون الإضافي WPForms . ثم قم بتثبيت وتفعيله. اتبع نفس العملية لتنشيط الاضافة OptinMonster. لكنه لا يكفي لتثبيت البرنامج المساعد فقط. سيكون عليك إنشاء حساب باستخدام تطبيق OptinMonster أيضًا. يعمل البرنامج المساعد فقط كوسيلة لتوصيل موقع WordPress الخاص بك مع تطبيق OptinMonster. لجعله يعمل بشكل صحيح ، يجب عليك تثبيت المكوّن الإضافي وإنشاء حساب مع التطبيق أيضًا.
الخطوة الثانية : إنشاء نموذج جهة اتصال باستخدام WPForms لـ Popup
سنستخدم أولاً المكون الإضافي WPForms لإنشاء نموذج اتصال. ولكن إذا كنت تستخدم WPForms وقمت بالفعل بإنشاء نموذج اتصال به ، فيمكنك تخطي هذه الخطوة.
إذا لم يكن لديك نموذج اتصال ، فانتقل إلى لوحة التحكم الرئيسية وانقر على WPForms »إضافة جديد .
سينقلك هذا إلى صفحة أخرى حيث يمكنك تحديد قالب نموذج وإضافة اسم إلى النموذج الخاص بك. حدد قالب نموذج جهة الاتصال البسيطة ، وقم بإعطاء اسم للنموذج الخاص بك.
عند الانتهاء من العملية ، سيتم إطلاق أداة إنشاء النماذج مما يسهل تصميم النماذج الخاصة بك. يمكنك بسهولة إضافة أو إزالة الملفات باستخدام أداة السحب والإفلات.
يمكنك إضافة جميع الحقول التي تعتقد أنها ضرورية للنموذج الخاص بك. بمجرد الانتهاء من كل شيء ، اضغط على زر حفظ لحفظ التغييرات. نموذج الاتصال الخاص بك جاهز الآن.
الآن اضغط على علامة التبويب ” تضمين” بجوار زر “حفظ” وانسخ الرمز القصير.
الخطوة الثالثة : إنشاء نافذة منبثقة باستخدام OptinMonster
الخطوة التالية هي إنشاء نافذة منبثقة على موقع الويب الخاص بك. سننشئ نافذة منبثقة مشروطة باستخدام OptinMonster . انتقل إلى لوحة التحكم في WordPress وانقر على OptinMonster »إنشاء حملة جديدة .
سيؤدي هذا إلى فتح نافذة جديدة حيث يمكنك تحديد نوع الحملة متبوعًا بنموذج optin الخاص بك. بالنسبة لنوع الحملة ، سنقوم بتحديد الخيار المنبثق.
بالنسبة للقالب ، دعنا نختار Canvas . حيث يدعم جميع أشكال الرموز المختصرة. حتى تتمكن من إدراج أي رموز HTML و CSS وجافا سكريبت .
بمجرد تحديد القالب ، سيتم توجيهك إلى نافذة جديدة حيث يمكنك تسمية حملتك.
انقر على التالي في علامة التبويب بدء البناء . سيتم توجيهك الآن إلى أداة السحب والإفلات. ستلاحظ أن القالب فارغ من حيث التصميم. يمكنك إنشاء أي نافذة منبثقة باستخدام هذه اللوحة وتصميمها من البداية. يمكنك القيام بذلك باستخدام الخيارات الموجودة ضمن علامة التبويب ” تصميم” .
بمجرد الانتهاء ، انقر فوق علامة التبويب ” إضافة كتل” ضمن علامة التبويب “تصميم”. قم بالتمرير لأسفل للعثور على خيارات كتل العنصر . تحت هذا ، سترى كتلة HTML. قم بسحبها وإفلاتها في منطقة التصميم.
هنا يمكنك إدخال رمز قصير لنموذج جهة الاتصال مع أي HTML مخصص آخر قد ترغب في إضافته. لذلك دعونا نضيف الرمز المختصر الخاص بنا كما يلي:
<h3>هل لديك اي سؤال ?</h3>
<p class=”tagline”>هل لديك اي سؤال حول خدمتنا؟ ما عليك سوى ملء النموذج وسنعاود الاتصال بك في أقرب وقت ممكن
.
<!– WPForms: no fields, form hidden –>
إليك معاينة لكيفية القيام بذلك.
لاحظ أن الرمز القصير للنموذج الذي أنشأناه سابقًا قد تم تضمينه في الكود أيضًا. يمكنك استبدال هذا الرمز . الآن حفظ التغييرات الخاصة بك. بعد ذلك ، انتقل إلى علامة تبويب قواعد العرض واضبط التوقيت على الصفر كما هو موضح في لقطة الشاشة.
انتقل إلى أسفل هذه النافذة وستجد المزيد من الخيارات. يمكنك استخدامها إذا كنت تريد عرض هذا النموذج على صفحة أو منشور معين. اضغط على زر حفظ عند الانتهاء.
الخطوة الرابعة : نشر نموذج الاتصال المنبثق
بمجرد الانتهاء من العمل على التغييرات ، انقر فوق الخيار ” نعم / لا” في الأعلى وانقر فوق علامة التبويب ” تنشيط” .
أخيرًا ، انتقل إلى علامة التبويب نشر وتبديل الحالة تفعيل.
بمجرد الانتهاء من ذلك ، ارجع إلى لوحة التحكم في WordPress وانتقل إلى OptinMonster »الحملات . هنا ، سترى حملتك. أدناه انقر على الرابط تعديل إعدادات الإخراج . وسوف تتوسع لعرض بعض الخيارات. حدد المربع بجوار خيار تمكين الحملة في الموقع .
أخيرًا انقر فوق خيار حفظ الإعدادات في نهاية الصفحة.
الخطوة الخامسة : تفعيل نموذج الاتصال بنافذة المنبثق
قم أولاً بنسخ حملة OptinMonster. يمكنك العثور عليه بجوار اسم حملتك مباشرةً.
الآن قم بإنشاء صفحة جديدة في WordPress أو قم بتحرير منشور أو صفحة حيث تريد إضافة رابط أو زر منبثق لنموذج الاتصال. سنقوم بإنشاء واحدة جديدة هنا. انتقل إلى محرر النصوص الخاص بك وأضف الكود التالي. لا تنسَ أن تحل محل نموذج الاتصال الخاصة بك.
بمجرد الانتهاء من الضغط على زر النشر على اليمين. سوف يكون النموذج الخاص بك مفعل . قم بزيارة موقعك وسترى ذلك.
أمل أن تكون قد وجدت هذا المقال مفيدًا.
