كيفية انشاء صفحة اتصل بنا في ووردبريس (بالصور التوضيحية)

كيفية انشاء صفحة اتصل بنا في ووردبريس

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

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

لماذا نحتاج نموذج اتصل بنا؟

قد تتساءل لماذا أحتاج إلى نموذج اتصال (Contact Form)؟ ألا يمكنني إضافة عنوان بريدي الإلكتروني فقط على موقع الويب الخاص بي، حتى يتمكن الأشخاص من إرسال بريد إلكتروني إلي؟

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

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

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

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

يبدو جيدا؟ حسنًا، فلنبدأ.

فيديو تعليمي

كيفية انشاء صفحة اتصل بنا في ووردبريس وحل مشكلة عدم إرسال الايميلات | إعداد خادم SMTP

إذا كنت تفضل التعليمات المكتوبة، فيرجى متابعة القراءة.

1. اختيار أفضل اضافة اتصل بنا وتثبيتها

أسهل طريقة لانشاء نموذج اتصل بنا هي باستخدام مكون إضافي. هناك العديد من المكونات الإضافية المجانية والمدفوعة التي يمكنها القيام بذلك. بعض أفضلها هي WPForms و Fluent Forms و Gravity Forms و Contact Form 7. لعمل هذا البرنامج التعليمي، نختار اضافة Fluent Forms، وهي أسرع اضافة نموذج اتصال ويمكن القول إنها الأسهل في تكوينها.

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

اضافة Fluent Forms

بمجرد تثبيت اضافة Fluent Forms، سيتم اضافة عنصر قائمة مسؤول جديد يسمى Fluent Forms.

2. انشاء نموذج اتصل بنا

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

انشاء نموذج اتصال جديد

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

سوف نختار نموذج Contact Form الجاهز وستتمكن من تعديله في الخطوة التالية إذا رغبت:

انشاء نموذج اتصل بنا في Fluent Forms

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

يعمل المحرر من خلال السحب والإفلات كطريقة عمل مٌنشئي الصفحات الحديثين مثل Elementor و Oxygen.

انشاء نموذج اتصل بنا Fluent Forms

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

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

محرر نموذج Fluent Forms

3. أضف نموذج الاتصال إلى صفحة اتصل بنا

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

لعرض نموذج الاتصال، ستحتاج إلى استخدام الرمز المختصر الذي تم إنشاؤه من المكون الإضافي. إذا لم تقم بنسخ الرمز المختصر مسبقًا، فيمكنك الانتقال إلى الصفحة الرئيسية لإضافة Fluent Forms من خلال الانتقال إلى Fluent Forms → All Forms. هناك يمكنك الحصول على الرمز المختصر للنموذج الذي ترغب في استخدامه.

Fluent Forms Shortcode

انسخ هذا الرمز والصقه في حقل محتوى صفحة اتصل بنا الخاصة بك.

اضافة نموذج الاتصال في صفحة اتصل بنا

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

صفحة اتصل بنا

4. إضافة نموذج اتصل بنا في الشريط الجانبي (السايدبار)

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

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

ودجات ووردبريس

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

إضافة نموذج اتصل بنا في الشريط الجانبي

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

اضافة نموذج اتصل بنا في الشريط الجانبي

انقر فوق تحديث لتطبيق التغيير. لديك الآن نموذج اتصال في الشريط الجانبي يعمل بشكل كامل.

اضافة نموذج اتصل بنا في الشريط الجانبي

نأمل أن تساعدك هذه المقالة في انشاء صفحة اتصل بنا في ووردبريس. قد ترغب أيضًا في التحقق من مقالنا لأفضل قوالب ووردبريس ودليلنا حول كيفية تسريع موقع ووردبريس إلى 100% في GTMetrix و PageSpeed Insights.

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

أنمار النقيب

حول أنمار النقيب

مدون & مطور، أُشارك كل ما تعلمته حول تحسين مواقع ووردبريس للسرعة، ودروس تحسين محركات البحث (SEO). إقرأ سيرتي الذاتية لتتعلم المزيد عني.

2 تعليقات

  1. السلام عليكم شكرا لك اخي على هذه الاضافة الجميلة و الخفيفة لكن للاسف البريد لا يصلني ما الحل لو سمحت

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

      تحياتي

اترك تعليقاً

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