كيفية انشاء صفحة اتصل بنا في ووردبريس (بالصور التوضيحية)
سيوفر انشاء صفحة اتصل بنا في ووردبريس لعملائك طريقة للبقاء على اتصال معك. يمكن أن يجلب لك ذلك فوائد مختلفة – من الإبلاغ عن الأخطاء البسيطة إلى طريقة ملائمة تمامًا لعملائك للاتصال بك فيما يتعلق بالمنتج الذي تقدمه على موقع الويب الخاص بك.
في هذا البرنامج التعليمي، سنوضح كيف يمكنك انشاء نموذج اتصل بنا على مدونة ووردبريس الخاصة بك مع بضع خطوات سهلة، وفي غضون بضع دقائق، ستتمكن من الحصول على صفحة اتصل بنا جميلة تعمل بكامل طاقتها.
لماذا نحتاج نموذج اتصل بنا؟
قد تتساءل لماذا أحتاج إلى نموذج اتصال (Contact Form)؟ ألا يمكنني إضافة عنوان بريدي الإلكتروني فقط على موقع الويب الخاص بي، حتى يتمكن الأشخاص من إرسال بريد إلكتروني إلي؟
هذا سؤال شائع جدًا من المبتدئين لأنهم يخشون أن إضافة نموذج اتصل بنا يتطلب معرفة بالكود.
الحقيقة أنك لست بحاجة إلى معرفة أي كود. تمت كتابة هذا الدليل خطوة بخطوة لإنشاء صفحة اتصل بنا للمبتدئين تمامًا.
فيما يلي أهم 3 أسباب تجعل نموذج الاتصال أفضل من لصق عنوان بريدك الإلكتروني على الصفحة.
- الحماية من البريد العشوائي – تقوم روبوتات البريد العشوائي بفحص مواقع الويب بانتظام لعلامة mailto. عندما تنشر عنوان بريدك الإلكتروني على موقع الويب، ستبدأ في تلقي الكثير من رسائل البريد الإلكتروني العشوائية. من ناحية أخرى، عند استخدام نموذج اتصال، يمكنك التخلص من جميع رسائل البريد الإلكتروني العشوائية تقريبًا.
- معلومات متسقة – عند إرسال بريد إلكتروني، لا يرسل لك الأشخاص دائمًا جميع المعلومات التي تحتاجها. باستخدام نموذج اتصل بنا، يمكنك إخبار المستخدم بالضبط بالمعلومات التي تبحث عنها (مثل رقم الهاتف والميزانية وما إلى ذلك).
- يوفر الوقت – تساعدك نماذج الاتصال على توفير الوقت بطرق أكثر مما تتخيل. بصرف النظر عن المعلومات المتسقة التي ذكرناها أعلاه، يمكنك أيضًا استخدام تأكيدات النموذج لإخبار المستخدم بالخطوات التالية. مثل مشاهدة مقطع فيديو أو الانتظار لمدة تصل إلى 24 ساعة للحصول على رد، حتى لا يرسلوا لك عدة استفسارات.
يبدو جيدا؟ حسنًا، فلنبدأ.
فيديو تعليمي
إذا كنت تفضل التعليمات المكتوبة، فيرجى متابعة القراءة.
1. اختيار أفضل اضافة اتصل بنا وتثبيتها
أسهل طريقة لانشاء نموذج اتصل بنا هي باستخدام مكون إضافي. هناك العديد من المكونات الإضافية المجانية والمدفوعة التي يمكنها القيام بذلك. بعض أفضلها هي WPForms و Fluent Forms و Gravity Forms و Contact Form 7. لعمل هذا البرنامج التعليمي، نختار اضافة Fluent Forms، وهي أسرع اضافة نموذج اتصال ويمكن القول إنها الأسهل في تكوينها.
بدلاً من ذلك، يمكنك البحث عنها مباشرةً في منطقة تثبيت اضافات ووردبريس الموجودة في لوحة معلومات ووردبريس ← إضافات ← أضف جديد.
بمجرد تثبيت اضافة Fluent Forms، سيتم اضافة عنصر قائمة مسؤول جديد يسمى Fluent Forms.
2. انشاء نموذج اتصل بنا
الآن دعونا نضيف نموذجًا جديدًا. إذا قمت بالمرور فوق القائمة الجديدة، فسيتم تقديمك مع قائمة فرعية إضافية. انقر فوق الزر New Form حتى تتمكن من إضافة نموذج الاتصال المخصص الخاص بك.
على هذه الصفحة ستتمكن من انشاء نموذج اتصال فارغ وتصميمه بالنقر على Create a Blank Form أو ببساطة إختيار أحد نماذج التواصل الجاهزة في الإضافة.
سوف نختار نموذج Contact Form الجاهز وستتمكن من تعديله في الخطوة التالية إذا رغبت:
سيتم إعادة توجيهك إلى محرر النموذج المتقدم، حيث ستتمكن من إعادة تسمية العناوين وإضافة عناوين جديدة مثل رقم الهاتف، البلد، قوائم منسدلة، والمزيد.
يعمل المحرر من خلال السحب والإفلات كطريقة عمل مٌنشئي الصفحات الحديثين مثل Elementor و Oxygen.
لنفترض أن هذا النموذج يُلبي احتياجاتك ولا تحتاج إضافة عناصر جديدة، سنحتاج فقط لترجمته إلى العربية.
لترجمة العناوين إلى لغتك فقط إختر أي عنصر من اليسار وستجد خيارات جديدة لهذا العنصر على اليمين. من ضمن الخيارات هو العنوان الأجنبي، ترجمه لأي لغة تحب وكرر نفس العملية لبقية العناصر.
3. أضف نموذج الاتصال إلى صفحة اتصل بنا
إذا لم تكن قد أنشأت هذه الصفحة بالفعل، فقد حان الوقت للقيام بذلك عبر لوحة تحكم المسؤول بالانتقال إلى صفحات ← أضف جديداً.
لعرض نموذج الاتصال، ستحتاج إلى استخدام الرمز المختصر الذي تم إنشاؤه من المكون الإضافي. إذا لم تقم بنسخ الرمز المختصر مسبقًا، فيمكنك الانتقال إلى الصفحة الرئيسية لإضافة Fluent Forms من خلال الانتقال إلى Fluent Forms → All Forms. هناك يمكنك الحصول على الرمز المختصر للنموذج الذي ترغب في استخدامه.
انسخ هذا الرمز والصقه في حقل محتوى صفحة اتصل بنا الخاصة بك.
بمجرد نشر صفحة اتصل بنا، ستتمكن من رؤية نموذج الاتصال عند الوصول إلى تلك الصفحة على موقع الويب الخاص بك.
4. إضافة نموذج اتصل بنا في الشريط الجانبي (السايدبار)
يحب بعض مالكي مواقع الويب وجود نموذج اتصال في أكثر من صفحة واحدة. هذا مفيد بشكل خاص للمواقع المستندة إلى المقالات والتي قد تدفع الزائر إلى الاتصال بالشركة بشكل خاص.
انسخ الرمز المختصر لنموذج الاتصال الخاص بك وانتقل إلى المظهر ← ودجات من داخل لوحة معلومات ووردبريس الخاصة بك.
منذ إصدار ووردبريس 5.8، تم تفعيل محرر Gutenberg للودجات وأصبح يمكنك إضافة وحدات جوتنبرج في الودجات بسهولة. ولإضافة نموذج الإتصال أضغط علامة + وأختر الكود القصير.
الآن كل ماعليك القيام به هو لصق الكود الخاص بنموذج الإتصال الذي تريد عرضه في السايدبار.
انقر فوق تحديث لتطبيق التغيير. لديك الآن نموذج اتصال في الشريط الجانبي يعمل بشكل كامل.
نأمل أن تساعدك هذه المقالة في انشاء صفحة اتصل بنا في ووردبريس. قد ترغب أيضًا في التحقق من مقالنا لأفضل قوالب ووردبريس ودليلنا حول كيفية تسريع موقع ووردبريس إلى 100% في GTMetrix و PageSpeed Insights.
إذا أعجبك هذا المقال، فيرجى الاشتراك في قناتنا على يوتيوب لدروس فيديو ووردبريس. يمكنك أيضًا أن تجدنا على Twitter و Facebook.
حول أنمار النقيب
مدون & مطور، أُشارك كل ما تعلمته حول تحسين مواقع ووردبريس للسرعة، ودروس تحسين محركات البحث (SEO). إقرأ سيرتي الذاتية لتتعلم المزيد عني.
السلام عليكم شكرا لك اخي على هذه الاضافة الجميلة و الخفيفة لكن للاسف البريد لا يصلني ما الحل لو سمحت
شكراً لك للتعليق،
تاكد من أن إعدادات SMTP مضبوطة جيداً حتى يعمل البريد.
شاهد الفيديو الموجود في المقال فأنا شرحت في الفيديو إعداد SMTP بشكل مثالي.
تحياتي