إنشاء وضبط نموذج أتصل بنا الرسمي لمدونات بلوجر

<div id="content"><br /><h5>أتصل بنا</h5><br /><div class="form"><form name="contact-form"><!-- مربع الاسم --><input class="contact-form-name" id="ContactForm1_contact-form-name" name="الأسم" onblur="if (this.value == &quot;&quot;) {this.value = &quot;الأسم&quot;;}" onfocus="if (this.value == &quot;الأسم&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="الأسم" /> <br /><br /><!-- مربع الاميل --><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;البريد الألكتروني&quot;;}" onfocus="if (this.value == &quot;البريد الألكتروني&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="البريد الألكتروني" /> <br /><br /><!-- مربع الرسالة --><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;أدخل نص الرسالة..&quot;;}" onfocus="if (this.value == &quot;أدخل نص الرسالة..&quot;) {this.value = &quot;&quot;;}" value="أدخل نص الرسالة.."></textarea> <br /><br /><!-- تفريغ --><input class="contact-form-button contact-form-button-submit MBT-button-color" type="reset" value="تفريغ" /> <!-- إرسال --> <input class="contact-form-button contact-form-button-submit MBT-button-color" id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> <br /><!-- نهاية -->
<br /><div style="max-width: 222px; text-align: center; width: 100%;"><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></div></form><!-- تعديل مدونة مداد الجليد -->
</div></div>
<style>
  h5 {
font-family: 'Questrial', Verdana, sans-serif;
text-align: left;
font-size: 30px;
padding: 0;
margin: 0 0 20px 0;
position: relative;
color: #8C8C8C;
}
#content {
position: relative;
margin: 20px auto;
width: 420px;
z-index: 100;
padding: 30px;
border: 1px solid #383838;
font-size:14px;
color:#666;
/* My stipped background */
background: #D1D1D1; /* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: -o-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
/*border-radius*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*box-shadow*/
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
#content:after {
background: #fff;
margin: 10px;
position: absolute;
content : " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border: 1px #E5E5E5 solid;
/*border-radius*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
   
.contact-form-name, .contact-form-email, .contact-form-email-message { 
max-width: 220px; 
width: 100%; 
font-weight:bold; 
}
       
.contact-form-name { 
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s1600/name.png) no-repeat 7px 8px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top;
} 
      
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s1600/email.png) no-repeat 7px 10px; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: Arial,sans-serif; 
font-size: 12px; 
font-weight:bold; 
height: 24px; 
margin: 0; 
margin-top: 5px; 
padding: 5px 15px 5px 28px; 
vertical-align: top;
}
  
.contact-form-email:hover, .contact-form-name:hover{ 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
 
padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover { 
border: 1px solid #bebebe; 
box-shadow: 0 1px 2px rgba(5, 95, 255, .1); 
padding: 10px; 
}
.contact-form-email-message { 
background: #FFF; 
background-color: #FFF; 
border: 1px solid #ddd; 
box-sizing: border-box; 
color: #A0A0A0; 
display: inline-block; 
font-family: arial; 
font-size: 12px; 
margin: 0; 
margin-top: 5px; 
padding: 10px; 
vertical-align: top; 
max-width: 430px!important; 
height: 150px; 
border-radius:4px; 
}
 
.contact-form-button { 
cursor:pointer; 
height: 32px; 
line-height: 28px; 
font-weight:bold; 
border:none; 
}
  
.contact-form-button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.contact-form-button:hover { 
text-decoration: none; 
} 
.contact-form-button:active { 
position: relative; 
top: 1px; 
}
 
.MBT-button-color { 
color: #fef4e9; 
border: solid 1px #da7c0c; 
background: #f78d1d; 
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
background: -moz-linear-gradient(top, #faa51a, #f47a20); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 
.MBT-button-color:hover { 
background: #f47c20; 
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 
background: -moz-linear-gradient(top, #f88e11, #f06015); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); 
border-color: #F47C20!important; 
} 
.MBT-button-color:active { 
color: #fcd3a5; 
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 
background: -moz-linear-gradient(top, #f47a20, #faa51a); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); 
}
</style>
 
      <!--[if IE 9]> 
    <style> 
     
.contact-form-name { 
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s1600/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s1600/email.png) no-repeat 7px 6px; 
}
    </style> 
    <![endif]-->
     
    <style> 
@media screen and (-webkit-min-device-pixel-ratio:0) {
 
.contact-form-name { 
background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s1600/name.png) no-repeat 7px 6px; 
padding: 15px 15px 15px 28px;
 
}
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s1600/email.png) no-repeat 7px 8px; 
padding: 15px 15px 15px 28px;
}
  
.contact-form-email:hover, .contact-form-name:hover{ 
padding: 15px 15px 15px 28px; 
}
 
.contact-form-button { 
height: 28px;
}
}
</style>