الطريقة الصحيحة لعمل صفحة إتصل بنا - Contact Us في بلوجر

الطريقة الصحيحة لعمل صفحة إتصل بنا - Contact Us في بلوجر

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



الطريقة تتم عبر:
  1. اضافة نموذج للإتصال بنا.
  2. انشاء صفحة ثابتة.
  3. إظهار الأداة على الصفحة لوحدها.
  4. ربط الصفحة باستعمال رابط ويب.
إذا واجهتك اية صعوبات، شاهد الفيديو في الأسفل.

 اضافة نموذج الاتصال الأصلي الجاهز من بلوجر


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



3. نقر على المزيد من الأدوات ثم  نموذج الإتصال لإضافة الأداة



2. بعد إضافة النموذج، الآن يجب وضعه تحت مربع المشاركات بسحبه


المشكلة أن الأداة تظهر على جميع الصفحات. وما نحتاج القيام به هو إظهارها في صفحة واحدة.

3. يجب الآن انشاء صفحة ثابتة، انقر على الصفحات ثم صفحة جديدة




4. بعد إنشاء الصفحة، انقر على عرض لفتحها.

5. قم بنسخ رابط الصفحة

هذه الصفحة هي التي ستظهر فيها أداة الاتصال، يجب اضافته للقائمة باستعمال قوائم أفقية.

6. حان وقت تعديل القالب لجعل الأداة تظهر في صفحة للاتصال بنا فقط. نقر على المظهر ثم تحرير HTML



6. نقر في أي مكان وسط كود القالب ثم Ctrl+F من لوحة المفاتيح للبحث داخل القالب.

اكتب نموذج في المربع ثم Enter من لوحة المفاتيح لإظهار الأداة، هناك ثلاث نقط  انقر عليه لاظهار الأداة بكاملها.



7. بعد ظهور الأداة، كود html الخاص بها يبدو بهذا الشكل، ويجب اضافة الكود بالأحمر لجعلها تظهر في صفحة محددة:

لا تنسى تعويض رابط الصفحة بالرابط الذي قمت بنسخه في المرحلة رقم 5 أعلاه.

 <b:widget id='ContactForm2' locked='false' title='نموذج الاتصال' type='ContactForm'>
              <b:includable id='main'>
<b:if cond='data:blog.url == "رابط الصفحة"'>
  <b:if cond='data:title != ""'>
    <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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
            </b:widget>

يمكنك مراجعة درس التحكم في اخفاء وإظهار أدوات بلوجر للمزيد من الخيارات.

شرح الطريقة بالفيديو



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