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

السلام عليكم
شيء مهم جدا ، لأي موقع ناجح ، أن يكون هناك وسيلة للتواصل بين صاحب الموقع وزائريه. تستطيع ان تضع بريدك الالكتروني في الموقع ليتم التواصل عبره ، لكن ذلك يتضمن الكثير من المساوئ ، منها كشف سرية بريدك الالكتروني للجميع ، وتعرضه لرسائل الدعايا المزعجة المعروفة بـ"السبام" spam.
 ولذلك تجد أكثر وسيلة ناجحة للتواصل هي ما يعرف بنماذج "اتصل بنا" هذا هو مثال لذلك النموذج للمعاينة:

اتصل بنا

وللحصول على نموذج مثله مجاني إليك الخطوات:
1. الذهاب إلى تخطيط > أداة جديدة > المزيد من الأدوات > نموذج الاتصال > حفظ.

2. اذهب إلى قالب > تحرير HTML > انتقل الى القطعة > نموذج الاتصال . ابحث باستعمال CTRL+F .
3. انقر فوق السهم على اليسار مرتين لتوسيع رمز بحيث ترى ما يلي

             <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>

4.احذف الرمز الذي يظهر فوق باللون الاحمر بحيث أن كل ما تبقى هو ما يلي :

             <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>

               <b:includable id='main'>

</b:includable>

             </b:widget>

5. ثم اضغط على حفظ .

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

<div dir="rtl" style="text-align: right;" trbidi="on">
<b style="background-color: white; color: #333333; font-family: DroidKufi-Bold, 'GE SS two Medium', Verdana, Geneva, sans-serif; font-size: 17px; line-height: 25.5px;"><span style="font-size: small;">الإسم الكريم :</span></b><br />
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        <br />
<span id="required"><b style="background-color: white; color: #333333; font-family: DroidKufi-Bold, 'GE SS two Medium', Verdana, Geneva, sans-serif; font-size: 17px; line-height: 25.5px;"><span style="font-size: small;">البريد الإلكروني :</span></b></span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        <br />
<b style="background-color: white; color: #333333; font-family: DroidKufi-Bold, 'GE SS two Medium', Verdana, Geneva, sans-serif; font-size: 17px; line-height: 25.5px;"><span style="font-size: small;">الرسالة :</span></b><span style="background-color: white; color: #333333; font-family: DroidKufi-Bold, 'GE SS two Medium', Verdana, Geneva, sans-serif; font-size: 17px; line-height: 25.5px;">&nbsp;</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
        <br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
</div>

7. ثم اضغط على نشر .
8. اذهب إلى قالب > تحرير HTML > ثم ابحث باستعمال CTRL+F على الوسم ]]></b:skin>  قم بإضافة  CSS التالية أعلاه

/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}

.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }

.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE;  /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333;  /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%;  /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}

.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666;  /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF;  /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}

.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}

.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666;  /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px; 
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center; 
}

/* END CUSTOM CONTACT FORM BY XOMISSE */

9. ثم اضغط على حفظ النموذج.

إلى هنا أكون قد انتهيت وأتمنى تتوفقوا في إضافة الأداة  و إلى قادم الدروس إن شاء الله السلام عليكم .

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

شارك الموضوع →

تويت

تابعنا →

إنشر الموضوع →