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



السلام عليكم ورحمة الله وبركاته

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

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


كيفية إضافة نموذج أتصل بنا في صفحة ثابته على بلوجر؟


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

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

ثم أنقر عليها من أجل توسيع الكود ومعرفة كيفية التعديل عليه


الآن سوف يظهر لك الكود على الشكل التالي:
 <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>
            <b:includable id='main'>
  <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'/>
</b:includable>
          </b:widget>

يجب الآن إضافة له الأكواد التالية الموجودة باللون الأحمر ليبدو هكذا:
  <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>
                  <b:includable id='main'>
                    <b:if cond='data:blog.url == &quot;&quot;'>
                      <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:if>
                    <b:include name='quickedit'/>
                  </b:includable>
                </b:widget> 
الآن أحفظ القالب


الخطوة الأخيرة إذهب إلى الصفحات ثم أنشئ صفحة جديدة بعنوان أتصل بنا أو راسلنا ثم اضف فيها الكود التالي من خلال النقر على html  في محرر الموضوع ثم أخيراً إضغط نشر.
<div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الأسم&nbsp;</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكتروني&nbsp;<span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> الرسالة&nbsp;<span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style></div>




مشاركات أقدم المقال التالي
17 تعليق
  • كن المدون المحترف
    كن المدون المحترف 12‏/08‏/2015، 8:43:00 م

    منذ حوالي ساعة و أنا أبحث عن طريقة لتصميم صفحة اتصل بنا ... عانيت كثيرا من شروحات مكررة لاستخدام موقع اسمه فروكسي أو لا ادري ... شيء من هذا القبيل (شرح واحد لطريقة واحدة بائسة ... و لكن بأسلوب مختلف)

    جزاك الله عني خيرا
    حقا مدونة متميزة تستحق الدعم ... نحن هنا لذلك ;)

    • مداد الجليد
      مداد الجليد 12‏/08‏/2015، 11:04:00 م

      شكرا لك عزيزي

  • GHVFHG
    GHVFHG 05‏/02‏/2016، 8:08:00 ص

    جزاك الله خيرا

  • مدونة يولند للمعلوماتية
    مدونة يولند للمعلوماتية 08‏/06‏/2016، 1:15:00 ص

    احسنت اخي الكريم وجزاك الله خيرا
    youland078123.blogspot.com

  • غير معرف
    غير معرف 16‏/06‏/2016، 10:11:00 م

    مفيش حاجة بتوصل

    • مداد الجليد
      مداد الجليد 16‏/06‏/2016، 10:38:00 م

      في حال تطبيق الشرح جيدا سوف تصل الرسائل إلى البريد الإلكتروني الخاص بمشرف المدونة

  • غير معرف
    غير معرف 20‏/11‏/2017، 12:38:00 م

    شكرا جزيلا لك تم اضافتها بنجاح

    • مداد الجليد
      مداد الجليد 20‏/11‏/2017، 9:24:00 م

      العفو أخي بالتوفيق.

  • bouglacha
    bouglacha 01‏/10‏/2018، 8:29:00 ص

    رائع أخي دائماً مبدع

  • غير معرف
    غير معرف 02‏/11‏/2018، 11:38:00 ص

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

    • مداد الجليد
      مداد الجليد 02‏/11‏/2018، 1:55:00 م

      أهلا بك
      قم بالبحث عن رمز اللون #7986CB ستجده ثلاث مرات قم بإستبدالة برمز اللون المطلوب
      بالنسبة للحجم فهو متجاوب ولا يحتاج للتعديل

  • أحمد السيد
    أحمد السيد 02‏/11‏/2018، 6:00:00 م

    السلام عليكم اشكرك على موضوعك فقد استفدت منه فعلا ولكنى لاحظت ايقونة خطأ تظهر عند رسالة الخطا وعدم كتابة الايميل وحاولت حذفها او تغييرها لكنى لم اعرف كيف كيف
    https://1drv.ms/u/s!Ah6jFADJrtGpgVStYtEjwddkzBz2

    • مداد الجليد
      مداد الجليد 02‏/11‏/2018، 7:00:00 م

      وعليكم السلام
      اخي هذه الرسالة اساسية ومطلوبة بنموذج الاتصال لالزام صاحب الرسالة على تضمين بريد الكتروني

  • غير معرف
    غير معرف 25‏/01‏/2019، 1:52:00 ص

    اخي هناك خطا في الكود المرجو اضافة

    بعد الكود الملون قصد تفادي حدوت خطا

    • مداد الجليد
      مداد الجليد 26‏/01‏/2019، 1:39:00 م

      اين الخطأ لم افهم قصدك؟

أضف تعليق
عنوان التعليق