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

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

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

متابعة القراءة

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

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

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

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

بعد إضافة نموذج الأتصال إذهب إلى القالب ثم أنقر على تحرير 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>

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Hassan Beatrix

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

نقل بدون ذكر المصدر ممنوع و ذكر المصدر يدل على وعيك و ثقافتك و احترامك لجهود الاخرين