كيف تضيف نموذج أو صفحة الإتصال "إتصل بنا" لمدونة بلوجر؟

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

إذن إذا كنت ترغب في وضع صفحة "إتصل بنا" إتَّبع معنا الخطوات التالية:

1- نذهب إلى لوحة تحكم البلوج ثم Layout ثم ننقر على Add a gadget (المتواجدة في الشريط الجانبي مثلا) ثم في النافذة المنبثقة نختار More gadgets فَ Contact Form بالنقر على علامة +  ثم ننقر حفظ Save في الصفحة التي ستظهر.

2- يمكنك التوقف هنا إن كنت تريد وضع إستمارة الإتصال في الشريط الجانبي. أما إن كنت تريد أن تُفرِد لها صفحة خاصة فتابع الخطوات التالية.

3- سنقوم في هذه الخطوة بحذف جل الكود الذي تم إضافته بعد إحداثنا لنموذج الإتصال:
إذن نذهب إلى Template ثم Edit HTML و نبحث عن

id='ContactForm1'

ملاحظة: لإظهار شريط البحث ننقر داخل محرر الكود ثم نضغط في لوحة المفاتيح تباعا وفي نفس الوقت على Ctrl و F ثم نكتب ما نبحث عنه و نضغط "إدخال".

4- ننقر أولا على السهم الذي تشاهدونه لعرض كامل الكود، و بعد ذلك ننقر ثانية على السهم الذي سيظهر مباشرة أسفل الأول.

ثم

5- نقوم بحذف كل الكود التالي:

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>

بحيث سنترك الكود كما هو في الصورة:

6- الأن نعود إلى لوحة تحكم البلوجر و نذهب إلى "صفحات" ثم "صفحة جديدة" ثم "صفحة فارغة" كما في الصورة:

7- في عنوان الصفحة نضع Contact us ثم ننقر حفظ.
ثم نلصق الكود الموالي بعد أن نكون إخترنا HTML:

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>&#1575;&#1604;&#1573;&#1587;&#1605;<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>&#1575;&#1604;&#1576;&#1585;&#1610;&#1583; &#1575;&#1604;&#1573;&#1604;&#1603;&#1585;&#1608;&#1606;&#1610; &#1645;</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>&#1575;&#1604;&#1585;&#1587;&#1575;&#1604;&#1577; &#1645;</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

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

ملاحظة مهمة:
قمنا بتسمية الصفحة ب Contact us حتى يتم إعطاؤها عنوان URL كالتالي:
http://yourblog.com/p/contact-us.html
و هو أكثر صداقة مع معايير SEO، و يمكننا في خطوة لاحقة تعديل هذا العنوان لما يناسبنا.
أما إن قمنا بتسميته مثلا "إتصل بنا" فسيكون ال URL هكذا:
http://www.yourblog.com/2014/02/blog-post.html
و هو مالا ينصح به إن كنت تأخد بعين الإعتبار SEO كما أنه لن يكون بإكماننا تعديل URL  بعد ذلك.

8- الأن نرجع إلى "صفحات" ثم نختار "تعديل" و نعدل عنوان الصفحة مثلا إلى "إتصل بنا"، ونقوم بالنقر على تحديث Update.

9- أخيرا، ستقوم بوضع رابط الصفحة في المكان المناسب (غالبا في أسفل الصفحة)، من أجل ذلك تذهب إلى Template ثم Edit HTML و تلصق هذا الكود:

<a href='/p/contact-us.html'>&#1573;&#1578;&#1589;&#1604; &#1576;&#1606;&#1575;</a>

أرجوا أن أكون وفقت في الشرح.
إن كان لديكم أي تساؤل فضلا ضعوه في تعليق.