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

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

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

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

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

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

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

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

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

ضعالكود هنا

            

   

   

     

       

               
               

        *       
               

        *       
        </span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/></span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <div style='text-align: center; max-width: 222px; width: 100%'></span><span style="font-size: large;">          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/></span><span style="font-size: large;">          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/></span><span style="font-size: large;">        </div></span><span style="font-size: large;">      </form></span><span style="font-size: large;">    </div></span><span style="font-size: large;">  </div></span><span style="font-size: large;"></b:if></span><span style="font-size: large;">  <b:include name='quickedit'/></span><span style="font-size: large;"></b:includable></span><span style="font-size: large;">  </b:widget></span></blockquote></div><div dir="ltr" style="text-align: left;"><span style="font-size: large;"><br /></span></div><span style="font-size: large;"><b>يجب الآن إضافة له الأكواد التالية الموجودة باللون الأحمر ليبدو هكذا:</b></span></div><div><span style="font-size: large;"><br /></span></div><div dir="ltr"><div style="text-align: left;"><blockquote class="tr_bq"><span style="font-size: large;">  <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'></span><span style="font-size: large;">    <b:includable id='main'></span><span style="font-size: large;"> <span style="color: red;"> <b:if cond='data:blog.url == ""'></span></span><span style="font-size: large;">   <b:if cond='data:title != ""'></span><span style="font-size: large;">    <h2 class='title'><data:title/></h2></span><span style="font-size: large;">  </b:if></span><span style="font-size: large;">  <div class='contact-form-widget'></span><span style="font-size: large;">    <div class='form'></span><span style="font-size: large;">      <form name='contact-form'></span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <data:contactFormNameMsg/></span><span style="font-size: large;">        <br/></span><span style="font-size: large;">        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/></span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span></span><span style="font-size: large;">        <br/></span><span style="font-size: large;">        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/></span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span></span><span style="font-size: large;">        <br/></span><span style="font-size: large;">        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/></span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/></span><span style="font-size: large;">        <p/></span><span style="font-size: large;">        <div style='text-align: center; max-width: 222px; width: 100%'></span><span style="font-size: large;">          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/></span><span style="font-size: large;">          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/></span><span style="font-size: large;">        </div></span><span style="font-size: large;">      </form></span><span style="font-size: large;">    </div></span><span style="font-size: large;">  </div></span><span style="font-size: large;"></b:if></span><span style="font-size: large;">  <b:include name='quickedit'/></span><span style="font-size: large;"></b:includable></span><span style="font-size: large;">  </b:widget></span></blockquote></div><div style="text-align: left;"><span style="font-size: large;"><br /></span></div><span style="font-size: large;"><b>الآن أحفظ القالب<br /><br />الخطوة الأخيرة إذهب إلى الصفحات ثم أنشئ صفحة جديدة بعنوان أتصل بنا أو راسلنا ثم اضف فيها الكود التالي من خلال الضغط htmlعلى  في محرر الموضوع  ثم أخيراً إضغط نشر.</b></span></div><div dir="ltr"><br /><div style="background-color: white; box-sizing: border-box; color: #5e5e5e; font-family: GESSTwoMediumRegular; font-size: 15px; line-height: 25px; outline: 0px; transition: all 0.5s ease; word-wrap: break-word !important;" trbidi="on"><div style="box-sizing: border-box; outline: 0px; transition: all 0.3s ease-in-out; word-wrap: break-word !important;"></div></div><div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #5e5e5e; font-family: GESSTwoMediumRegular; font-size: 15px; line-height: 25px; outline: 0px; text-align: center; transition: all 0.5s ease; word-wrap: break-word !important;"><a class="hoverZoomLink" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDAfG3dJLL6ZxaLNeGjGDXqHjPxEgo00COBpT-cOFBRdQBKEaNf2b1AAtUCUJOFEu9-Q0yFQBFVlMHJAy_oUV8wPt02sdjb9Sr1x_AzQdo6ARHUtFCyKL7v5oeA7Twu0z-l10lTlW3W0/s1600/25-08-36+01-09-50+%25D8%25B5.png" imageanchor="1" style="box-sizing: border-box; color: #2c8fdf; cursor: pointer; margin-left: 1em; margin-right: 1em; outline: 0px; text-decoration: none; transition: all 0.5s ease; word-wrap: break-word !important;"></a></div></div><div dir="ltr" style="text-align: left;"><blockquote><span style="font-size: large;"><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 /><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 /><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">