Skip to content

شرح إضافة Contact form 7 لووردبريس

شرح إضافة Contact form 7 لووردبريس

21 دجنبر 2016 | 00:00

إذا كنت مستخدما للووردبريس وتود إضافة استمارة للمراسلة (Contact Form) لموقعك أو مدونتك فلن تجد أفضل من إضافة Contact Form 7 المعروفة والتي تعتبر من بين أكثر إضافات ووردبريس استخداما نظرا لسهولة التعامل معها وفعاليتها الكبيرة.

في هذا الدرس سنشرح كيفية تثبيت هذه الإضافة خطوة بخطوة وإنشاء استمارة اتصال بواسطتها.

تحميل إضافة Contact Form 7

كخطوة أولى، سنقوم بتحميل الإضافة وذلك من خلال صفحة إضافات > أضف جديد في لوحة التحكم الخاصة بموقعنا ثم البحث عن Contact Form 3 :

تنصيب الإضافة Contact Form 3

قم بالضغط على “زر التنصيب” الآن للبدء في عملية تنصيب الإضافة.

تفعيل الإضافة

عند إنتهاء التنصيب قم بالضغط على زر ”تفعيل” الخاصة ب CF7 بعد الذهاب لصفحة الإضافات المنصبة وفق المسار إضافات > إضافات منصبة.

تفعيل إضافة Contact form 7

إعدادات الإستمارة

بعد تفعيل الإضافة، يتم إنشاء استمارة مراسلة (Contact form) بشكل افتراضي وتحتوي على عدد من الحقول المطلوبة عادة في معظم المواقع(الإسم، الإيميل، الموقع، الموضوع، الرسالة).

إعدادات إضافة Contact form 7

الإستمارات الخاصة بإضافة Contact form 7 تجدونها في صفحة Contact > Contact Forms، علما أنه بعد عملية التفعيل يتم إضافة عنصر جديد Contact في القائمة الجانبية للوحة التحكم.

Wordpress Contact Form 7 Plugn Admin Menu

للبدء في استخدام الإستمارة يجب إجراء بعض التعديلات على هذه الإعدادات.

عند فتح صفحة إعدادات الإضافة تجدونها على الشكل التالي :

التبويب Form

Contact form 7 settings

في الصورة أعلاه تظهر شيفرة HTML للإستمارة في التبويب Form ويمكنكم التعديل عليها كما يحلو لكم مع مراعاة عدد من الأمور :

التبويب Mail

في هذا التبويب تجدون الإعدادات الخاصة بالرسالة التي سوف تصلكم في بريدكم الإلكتروني، وفيها يتم استخدام الخاصيات Attributes التي سبق وأن رأيناها في المرحلة السابقة (your-name، your-subject، your-email، your-message).

إعدادات إضافة Contact Form 7

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

التبويب Messages

في التبويب Messages سوف تجدون عددا من الرسائل التي سوف تظهر لزوار الموقع في عدد من الحالات، مثلا الرسالة التي ستظهر بعد انتهاء عملية الإرسال … إلخ. قوموا بترجمتها والتعديل عليها كما تحبون.

install-contact-form7-plugin-messages-settings

إظهار استمارة المراسلة للزوار

لإظهار الإستمارة لزوار موقعنا، سنقوم بإنشاء صفحة جديدة في لوحة التحكم (مثلا صفحة اتصل بنا) ثم ننسخ شيفرة الشورت كود Shortcode الخاصة بالإستمارة وتجدونها في صفحة الإعدادات التي رأيناها سابقا ([contact-form-7 id=“42” title=“Contact form 1”])، ونقوم بلصقها في محرر الصفحة.

إظهار استمارة Contact form 7 لزوار الموقع

في الأخير قم بحفظ الصفحة ومعاينتها لرؤية نتيجة عملك.

CF7 form


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

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