شرح إضافة Contact Form 7 لإضافة نماذج للتواصل

نظرة عامة

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

مثل الإسم والبريد الإلكتروني والموضوع والرسالة الخاصة بك , وغالبا ما تصل هذه الرسالة إلي بريد الإلكتروني الخاص بإدارة الموقع .

في مواقع الوردبريس نسبة كبيرة جداََ منها تستخدم إضافة  Contact Form 7 والتي سيتم شرحها في هذه التدوينة .

تنصيب الإضافة

من أجل القيام بتنصيب الإضافة نقوم بالذهاب إلي إضافات من ثم أضف جديد وكتابة في حقل البحث اسم الإضافة وهو  Contact Form 7

بعد الضغط علي زر التنزيل الان قم بالضغط علي زر تفعيل ..

بعد الضغط علي زر تفعيل الإضافة سيظهر قائمة جديد بالوردبريس بإسم Contact  أو الاتصال Contact 

 

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

 

شرح التبويب الخاص بالـ Form

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

وايضاََ بإمكانك كتابة كود HTML كما يحلو لك هنا وكما تريد .. سنقوم بشرح الان القيام بعمل نموذج يحتوي علي الآتي

  • الإسم الأول
  • الإسم الثاني
  • العنوان
  • البريد الإلكتروني
  • عنوان الرسالة
  • الرسالة
  • ارسال الان

وايضاََ سنقوم بإستخدام الـ Classes الخاصة بالـ  Bootstrap حتي نفهم بشكل أدق .

بدايةََ قم بكتابة row الذي يحتوي علي جميع الاعمدة ..

سنقوم بجعل كل من الإسم الأول والإسم الثاني في نفس السطر بمعني ان كلاََ منها سيأخد كلاس .col-sm-6

المفترض ان يكون الكود كالتالي .

<div class='row'>
    <div class='col-sm-6 form-group'>
        <input type='text' name='first-name' placeholder='First Name' />
    </div>
    <div class='col-sm-6 form-group'>
        <input type='text' name='last-name' placeholder='Last Name' />
    </div>
</div>

 

هنا قمنا بإضافة الـ input بشكل عادي , في اضافة الـ Contact Form 7 لن تستطيع اضافته كما بالأعلي , لان الاضافة تحتوي علي اكواد خاصة بالحقول وايضا اضافة نوع الحقل والاسم بطريقته

 

في بداية الأمر قم بكتابة هذا الكود

<div class='row'>
    <div class='col-sm-6 form-group'>
        
    </div>
</div>

وقم بالضغط في داخل الـ Col وكأنك تريد الكتابة بعد ذلك من الخانة التي بالأعلي قم بالضغط علي زر text سيظهر كما بالصورة

 

Field type

ويوجد بجواره Required field في حال قمت بتحديده سيكون هذا الحقل اجباري ويجب ادخاله ولن يتم ارسال الفورم الإ في حال كان الحقل مكتوب به .

 

Name

وهو اسم الحقل تماماََ كما يكون name=’first-name’

 

Default value

وهو قيمة الحقل تماماََ كما يكون  value=’mohmmed’

 

Use this text as the placeholder of the field

عندما تقوم بتحديد هذا الخيار فإن القيمة التي ادخلتها لن تكون عبارة عن value بل ستكون عبارة عن placeholder

This field requires author’s name

هذا الخيار يساعد علي تخطي البريد المزعج الذي يأتي من الـ  Spammers في حال استخدمه يجب ان يكون لديك إضافة akismet

 

Id attribute

في حال كان لديك معرف وتريد اضافة وتماما كما يكون id=’first-name’

 

Class attribute

وهو عبارة عن الكلاس الخاصة به وتماََ كما يكون class=’form-control’

وهكذا سيكون الشكل النهائي

 

وهكذا سيكون بعد الضغط علي زر الـ Insert Tag  

 

باقي الامور تماما مشابه جداََ ولكن يجب الانتباه لتغير اسم الحقل وايضا نوعه في حال حقل نصي او حقل بريد إلكتروني .

بالنهاية سيكون الشكل كالتالي .

<div class='row'>
  <div class='col-sm-6 form-group'>
    [text first-name id:first-name class:form-control placeholder "Please Enter First Name"]
  </div>
  <div class='col-sm-6 form-group'>
    [text last-name id:last-name class:form-control placeholder "Please Enter Last Name"]
  </div>
  <div class='col-sm-6 form-group'>
    [text address id:address class:form-control placeholder "Please Enter Address"]
  </div>
  <div class='col-sm-6 form-group'>
    [email* your-email id:email class:form-control placeholder "Please Enter Email"]
  </div>
  <div class='col-sm-12 form-group'>
    [text title-msg id:title-msg class:form-control placeholder "Please Enter Title Your Message"]
  </div>
  <div class='col-sm-12 form-group'>
     [textarea msg id:msg class:form-control placeholder "Please Enter Your Message"]
  </div>
    <div class='col-sm-12 form-group'>
     [submit id:sendMessage class:btn class:btn-success "Send Now !"]
  </div>
</div>

 

شرح التبويب الخاص بالـ Mail

 

 

يوجد في هذه التبويب جميع الاعدادات الخاصة بالبريد الإلكتروني والشكل الذي تريد وصول البريد به ..

وكما نلاحظ في بداية هذا التبويب قام بوضع جميع اسماء الحقول التي قمنا بإضافتها ..

[first-name][last-name][address][your-email][title-msg][msg]

 

To

وتعتبر أهم شىء في الإعدادت وهنا يتم كتابة البريد الإلكتروني التي تريد ان تصل عليه الرسائل من الزوار .

 

From

هنا يمكن كتابة اي شىء لمعرفة مصدر الرسالة ولكن يجب كتابة <wordpress@yournamesite.com> وقم بوضع بدلا من yournamesite.com رابط الموقع الخاص بك  لتجنب حدوث اي مشاكل.

 

Subject

يمكن هنا كتابة عنوان النموذج  بالاضافة لإسم الحقل الخاص بالعنوان علي سبيل المثال Form Contact || [title-msg]   في حال قام الشخص بكتابة عنوان الرسالة ” لدي استفسار حول شىء معين ” في حقل العنوان الموجودة في صفحة الموذج سيصل للبريد الإلكتروني كالتالي Form Contact || لدي استفسار حول شىء معين .

 

Message Body

هنا يتم وضع اسماء جميع الحقول التي قمت بوضعها في تبويب الـ Form حتي يصل ما قام المستخدم بكتابته وادخاله في هذه الحقول.

 

شرح التبويب الخاص بالـ Messages

هذا التبويب سهل جدا وبمجرد فتحه ستفهم ما هو , وهو عبارة عن النصوص التي ستظهر للمستخدم في حال كان هناك خطأ معين او في حال كان هناك حقل مطلوب ولم يقم بملئه وفي حال تجاوز عدد الأحرف عن عدد معين .. وايضا العديد من الحالات يمكنكم رؤيتها في هذا التبويب .. يمكنكم تركه كما هو أو بتعديل صيغ الجمل كما تراه افضل ومناسباََ.

 

إظهار النمودج في صفحة

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

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

 

وضع الفوم بأي مكان تريد

يمكنك وضع الكود في اي مكان تريد في داخل موقعك من خلال دالة do_shortcode قم بكتابتها باي مكان في داخل الملفات وسيظهر الفورم بشكل عادي .

echo do_shortcode('[contact-form-7 404 "Not Found"]');

 

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

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

الإعلانات
محتويات المقالة
    الإعلانات