شرح طريقة إضافة نموذج الإتصال إلى راسلنا في بلوجر

شرح طريقة إضافة نموذج الإتصال إلى راسلنا في بلوجر


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

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

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

  • الخطوة الثانية : إخفاء نموذج الإتصال من قالب المدونة .

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

#ContactForm1
    {
        display: none ! important;
    }
  • الخطوة الثالثة : إنشاء صفحة جديدة (راسلنا) .

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

  • الخطوة الرابعة : إضافة نموذج الإتصال إلى محتوى الصفحة .

اختر محرر كود 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">
    <p> </p>
    Email <span style="font-weight: bolder;">*</span>
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30"value="" type="text">
    <p> </p>
    Message <span style="font-weight: bolder;">*</span>
    <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 الخاص بهذا الفورم ؟

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

263 كل المشاهدات 1 مشاهدة اليوم

مواضيع مشابهة قد تعجبك :

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *