نموذج الاتصال بشكل جديد 2016 لمدونات بلوجر

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

اليوم سوف نتعرف على إضافة مهمة جداً لكل مدونة وهي أداة تواصل بين زوار المدونة والمدون ، وهذه الأداة مقدمة من مدونة هوم بلوجر إلى متابعيها الكرام مجاناً ، كما أن هذه الإضافة فيها لمسة جمالية أحترافية ، وهذه الإضافة من إعداد وتصميم فريق عمل المدونة .

انقر هنا للمعاينة

::: طريقة التركيب :::

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ، ثم اضغط على تحرير قالب .

3- ابحث عن الوسم :

4- ضع هذا الكود فوقه .

 div#ContactForm1 {
    display: none !important;
} 

5- بعد ذلك  احفظ القالب .

6- من لوحة التحكم اختر تخطيط ومن ثم نختاراضافة نموذج الاتصال كما بالصور التالية :

7- بعد ان اضفنا نموذج الاتصال نختار من لوحة التحكم صفحات ثم نختار صفحة جديدة ونسميها اتصل معنا أو راسلنا .... إلخ.

8- اضف الكود التالي في وضعية " HTML " ، ثم اضغط على زر نشر.

 <div id="formcontact">
<style scoped="" type="text/css">
#formcontact { margin:0 auto; width:390px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }
#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 15px 5px 0; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }
#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-right:1px double #333333; border-left:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-right:1px double #333333; border-left:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-right:1px double #333333; border-left:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }
#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:left; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-right:1px double #FF0033; border-left:1px double #FF0033; }
#ContactForm1_contact-form-submit:hover { background:#ff0000; }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }
#ContactForm1 {display:none}
</style>
<div id="formcontact">
<h3>نموذج الاتصال</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="ادخل اسمك هنا" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="ادخل بريدك الالكتروني هنا" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="اكتب رسالتك هنا" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="ارسال" />
<div style="max-width: 250px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>