اضافة صفحة ' اتصل بنا ' للمدونة

السلام عليكم ورحمة الله تعالى و بركاته
 تعتبر اضافة اتصل بنا من اهم الميزات التي تقوم عليها ادسنس الى جانب صفحة سياسية الخصوصية ، لمن العديد من المدونين يتجاهلون الامر ولا يعتبرونه بالامر المهم بل يركز على المواضيع و القوالب وبالطبع هذا أمر مهم فعلا بل الاكثر اهمية لكن هناك جوانب اخرى مهمة على صاحب الموقع ادارتها والاهتمام بها وحديثنا اليوم عن صفحة اتصل بنا والتي يتمكن الزوار من خلالها  التواصل بشكل مباشر و امن مع ملاك المواقع والمدونات
احضرت لكم كود مميز للاداة مع منظر جذاب و أنيق من حيث زر الارسال الذي يطلى بالزراق بطريقة ممتعة وجميلة الى جانب الخانات الباقية
المظهر شيئ مهم للزوار من حيث ارتياح العين من الخطوط والادوات الجميلة التي تجعل الزائر يتردد كثيرا للموقع
هذا هو الكود  و المطلوب اتباع الخطوات التالية
ثم لصق الكود - تسمية الصفحة 'اتصل بنا ' - ثم الضغط على جفظ  - HTML الصفحات - انشاء صفحة جديدة - تغيير لل

شكل الاداة

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#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;direction: rtl;text-align: justify;}
#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>

<br />
<form name="contact-form">
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">الاسم&nbsp;</span><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />&nbsp;البريد الاكتروني<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-weight: 700;">&nbsp;</span><span style="color: red; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: x-small; font-weight: 700;">مهم</span><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><span style="font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><b><span style="color: #666666;">محتوى الرسالة </span><span style="color: red; font-size: xx-small;">مهم</span></b></span><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>&nbsp;<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>
</div>