كيف تضيف نموذج الإتصال إلى صفحة راسلنا

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

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

المدون

عصام محيمي

تاريخ النشر

17 نوفمبر 2013

التصنيف

إضافات بلوجر

الخطوة 1 : إضافة نموذج الإتصال إلى قالب المدونة

- من لوحة التحكم إضغط على Layout ثم Add a Gadget
- ستظهر لك نافذة تحتوي على إضافات بلوجر الرسمية، اضغط على More Gadjets ثم قم بإضافة Contact Form
- إختر إسما لهذه الإضافة ثم إضغط Save

الخطوة 2 : إخفاء نموذج الإتصال من قالب المدونة

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

- من لوحة التحكم إضغط على Template ثم اختر Edit HTML
- ابحث عن ]]></b:skin> وضف قبلها مباشرة الكود التالي :

 #ContactForm1
     {
         display: none ! important;
     }

الخطوة 3 : إنشاء صفحة جديدة (راسلنا)

- من لوحة التحكم إضغط على Pages ثم New page وبعدها اختر Blank page
- إختر إسما لهذه الصفحة وليكن Contact us

الخطوة 4 : إضافة نموذج الإتصال إلى محتوى الصفحة

- اختر محرر كود HTML
- إضغط على Options وتأكد من اختيار Press "Enter" for line breaks في Line breaks
- انسخ الكود التالي ثم ضعه في محتوى الصفحة

  <form name="contact-form">
      <p> </p>
      Name
      <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
      
      Email *
      <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
      <p> </p>
      Message *
      <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
      <p> </p>
      <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
      <p> </p>
      <div style="text-align: center; max-width: 222px; width: 100%">
            <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>
      </div>
  </form>

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

ما الذي يمكن إرساله في هذا النموذج ؟

حتى الآن لا يسمح بدمج الملفات أو إرسال أي شيء آخر غير نص كتابي.

كيف أتحكم في كود CSS الخاص بهذا الفورم ؟

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