How to Customize Blogger Contact Form Widget To Awesome Style

In this post I am going to explain. How to Create a separate Contact page with blogger official contact form widget with Awesome look and sliding effect.
Click here for Live demo
1.Add the contact form widget to your sidebar. Now you have to hide this widget in sidebar
2.Goto blogger dashboard > Template > Edit HTML
3. Jump to Contact Form widget
4. Expand the ContactForm widget code
5. Now expand
6. Now delete the code between and Finally code look like

Now your widget is hided from appearing on sidebar but have kept registered. Make sure that never remove contact form widget from layout.
How to Create Separate Contact Page
1. Goto blogger dashboard > Pages >New Page > Blank page
 2. Give page Tittle as Contact us and select html, Now copy the below code paste it in html section and click publish

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<section id="contact">
 <div class="sectionheader">
<h1>
CONTACT</h1>
</div>
<article>
 Contact us for any feedback or advertisement query you may have<br />

 
   <label class="contactbutton" for="checkcontact"><div class="mail">
</div>
</label><input id="checkcontact" type="checkbox" />

   <form name="contact-form">
<div class="input_wrapper">
<input id="ContactForm1_contact-form-name" name="name" type="text" value="" /><label for="ContactForm1_contact-form-name">NAME</label></div>
<div class="input_wrapper">
<input id="ContactForm1_contact-form-email" name="email" type="text" value="" /><label for="ContactForm1_contact-form-email">EMAIL</label></div>
<div class="textarea_wrapper">
<textarea id="ContactForm1_contact-form-email-message" name="email-message"></textarea></div>
<div class="submit_wrapper">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
   
</div>
<div style="max-width: 450px; 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>
</article></section>

</div>

 3. Now add below code just above </head>

<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{
  background: #F0F0F0;
  font-family: Open Sans ,sans-serif;
  line-height:1.5em;
}
#contact {
width: 500px;
margin:2em auto;
background:white;
position: relative;
}
#contact::after {
content: &quot;&quot;;
display: block;
height: 30px;
width: 90%;
left: 5%;
bottom: 0;
position: absolute;
-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
border-radius: 100%;
z-index: -1;
}
#contact article {
  padding: 1em;
}
#contact h1 {
background: #0066B3;
font-family: Oswald ,sans-serif;
font-size: 1.75em;
padding: 0.6em 0 0.6em 0.4em;
color: white;
text-shadow: 0 0.06em 0 #424242;
position: relative;
}
.contactbutton {
background: #0066B3;
-webkit-box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
text-align: center;
display: block;
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 2px;
cursor: pointer;
}
.contactbutton:hover {
-webkit-box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}
.mail {
margin-top: 11px;
font-size: 15px;
display: inline-block;
border-top: 2em solid transparent;
border-left: 2.6em solid #80C8FE;
height: 0;
width: 0;
position: relative;
}
.mail:before {
content: &#39;&#39;;
top: -2.5em;
left: -2.95em;
display: block;
position: absolute;
border-top: 1.2em solid #80C8FE;
border-left: 1.6em solid transparent;
border-right: 1.6em solid transparent;
border-bottom: 1em solid transparent;
font-size: 0.8em;
}
.mail::after {
display: block;
content: &quot;&quot;;
position: absolute;
border-top: 2em solid transparent;
border-right: 2.6em solid #80C8FE;
height: 0;
width: 0;
left: -2.18em;
bottom: 0;
}
#checkcontact{
position: absolute;
left: -9999px;
}
.contactform {
overflow: hidden;
max-height: 0px;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
-ms-transition: all linear 1s;
transition: all linear 1s;
}
#checkcontact:checked + .contactform {
max-height: 1000px;
}
.input_wrapper {
position: relative;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
background: white;
border: 1px solid #0066B3;
box-shadow: 0 0 1px 0 #0066B3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #0066B3;
}
.input_wrapper input[type=&quot;text&quot;] {
margin-top: 1em;
display: block;
width: 100%;
background: white;
border: 1px solid #0066B3;
box-shadow: 0 0 1px 0 #0066B3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #0066B3;
text-indent: 15%;
}
.input_wrapper input[type=&quot;text&quot;]:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #0066B3;
outline: none;
text-indent: 0;
}
.input_wrapper label {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #0066B3;
color: white;
font-family: Oswald ,sans-serif;
box-sizing: border-box;
width: 15%;
text-align: center;
line-height: 2.8em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.input_wrapper input[type=&quot;text&quot;]:focus + label {
left: 85%;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
  min-height:150px;
background: white;
border: 1px solid #0066B3;
box-shadow: 0 0 1px 0 #0066B3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #0066B3;
}
.textarea_wrapper textarea:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #0066B3;
outline: none;
}
.submit_wrapper {
text-align: center;
}
.submit_wrapper input {
text-align: center;
display: inline-block;
width: 40%;
height: 50px;
margin-top: 1em;
margin-bottom: 6px;
cursor: pointer;
background: #0066B3;
color: white;
font-family: Oswald ,sans-serif;
font-size: 1em;
border: none;
-webkit-box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,2px 2px 0 0 #0066B3,3px 3px 0 0 #0066B3;
-webkit-appearance: none;
  -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.submit_wrapper input:hover {
-webkit-box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
box-shadow: 1px 1px 0 0 #0066B3,0px 0px 0 0 #0066B3,0px 0px 0 0 #0066B3;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}

@media (max-width: 500px){
#contact {
width: 100%;
}
  .input_wrapper label {
line-height: 3.5em;
font-size: 0.8em;
}
}
</style>