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

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

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

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

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

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

يمكن إضافته في اي مكن لانه سوف يختفي لاحقاً

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

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

الآن سوف يظهر لك الكود على الشكل التالي:

 
            
  
    

  
  

    

      

        

        
        

        
        

         *
        

        
        

         *
        

        <br />        <p/><br />        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/><br />        <p/><br />        <div style='text-align: center; max-width: 222px; width: 100%'><br />          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/><br />          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/><br />        </div><br />      </form><br />    </div><br />  </div><br />  <b:include name='quickedit'/><br /></b:includable><br />          </b:widget><br /></span></span></pre></div></div><br /><span style="font-size: large;">يجب الآن إضافة له الأكواد التالية الموجودة باللون الأحمر ليبدو هكذا:</span><br /><div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="-webkit-transition: all 0.3s ease-in-out; background-color: white; transition: all 0.3s ease-in-out;"><pre dir="ltr" style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><span style="font-family: 'Courier New', monospace;"><span style="font-size: 14px; line-height: 19.59375px;"><span style="color: #666666;">  <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'><br />                  <b:includable id='main'><br />                    </span><b><span style="color: red;"><b:if cond='data:blog.url == ""'></span></b><span style="color: #666666;"><br />                      <b:if cond='data:title != ""'><br />                        <h2 class='title'><br />                          <data:title/><br />                        </h2><br />                      </b:if><br />                      <div class='contact-form-widget'><br />                        <div class='form'><br />                          <form name='contact-form'><br />                            <p/><br />                            <data:contactFormNameMsg/><br />                            <br/><br />                            <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/><br />                            <p/><br />                            <data:contactFormEmailMsg/><br />                            <span style='font-weight: bolder;'><br />                              *<br />                            </span><br />                            <br/><br />                            <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/><br />                            <p/><br />                            <data:contactFormMessageMsg/><br />                            <span style='font-weight: bolder;'><br />                              *<br />                            </span><br />                            <br/><br />                            <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/><br />                            <p/><br />                            <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/><br />                            <p/><br />                            <div style='text-align: center; max-width: 222px; width: 100%'><br />                              <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/><br />                              <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/><br />                            </div><br />                          </form><br />                        </div><br />                      </div><br />                    </span><b><span style="color: red;"></b:if></span></b><span style="color: #666666;"><br />                    <b:include name='quickedit'/><br />                  </b:includable><br />                </b:widget> <br /></span></span></span></pre></div></div><span style="font-size: large;">الآن أحفظ القالب</span><br /><span style="font-size: large;"><br /></span><span style="font-size: large;"><br /></span><span style="font-size: large;">الخطوة الأخيرة إذهب إلى الصفحات ثم أنشئ صفحة جديدة بعنوان أتصل بنا أو راسلنا ثم اضف فيها الكود التالي من خلال النقر على html  في محرر الموضوع ثم أخيراً إضغط نشر.</span><br /><div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="-webkit-transition: all 0.3s ease-in-out; background-color: white; transition: all 0.3s ease-in-out;"><pre dir="ltr" style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><span style="color: #666666; font-family: 'Courier New', monospace;"><span style="font-size: 14px; line-height: 19.59375px;"><div dir="rtl" style="text-align: right;" trbidi="on"><br /><form name="contact-form"><br /><span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الأسم </span><br /><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br /><br /><span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكتروني <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="" />  <br /><br /><span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> الرسالة <span style="color: #f56954; font-size: x-small; font-weight: bold;">مطلوب</span></span><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5">