Add Customized Contact Us Page

Contact Us Page Is Very Essential For Every Blog,So Today  We Are Posting How to add customized Contact Us Page....

Step 1 : 

• First Create a Blank Page  And Name It as Contact Us
• Now Switch To HTML Mode and Paste The Below Code 

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-nbtname" name="name" placeholder="Name" size="30" type="text" value="">
<input id="ContactForm1_contact-form-nbtemail" name="email" placeholder="Email" size="30" type="text" value="">
<textarea cols="25" id="ContactForm1_contact-form-email-nbtmessage" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-nbtreset" type='reset' value='Clear'/>
<input id="ContactForm1_contact-form-nbtsubmit" type="button" value="Submit">
<br>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-nbterror-message">
</div>
<div id="ContactForm1_contact-form-nbtsuccess-message">
</div>
</div>
</form>
</div>

And Save The Page

Step 2 :  

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
• Now Paste The Following code Above/Before ]]></b:skin>

#ContactForm1_contact-form-nbtname{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrG5WF-uQOhn58gL1gza9GipNp-jsziJ5yYtTrBEl2V2mCnYYrUhGAPDmBsPyI-El9SjJxPysn4soqyDLElObZwFNuR47sDte9C3V93KWBdOkWaG1DWuMetRCHRqH7uMUGXMmBXwVp7k/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-nbtemail{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdrptt0zLDiDQEFe49EePafw50j6SCo_jvAnd2Jhebuetz30vhRf8yN1uE9ftBTF6zp5tKxoem6LWhtcI4J1EMUh0lqrMTfQEEgb1Sut1SbgjesEKyDDZ6hULoDEmw8YWDNtb5fQyQq0/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-nbtmessage{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLygnLJZANWRyANRMs3ew_Vr-GNuf_GBdvBIkFe9oX_jnyh6sH4r8YQYDeLbtsgcoPe-oHxgqmss1Gh2m14BXYRhiMb9XTqRZ3Bgv880tVy2iSQxJML5cKLUxYee4vdjoep5hHq6VvWTM/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}#ContactForm1_contact-form-nbtreset {
width: 95px;
height: 30px;
float: left;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-nbtreset:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-nbtsubmit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-nbtsubmit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-nbterror-message, #ContactForm1_contact-form-nbtsuccess-message{
width: 320px;
margin-top:35px;
}

You're Almost Done..Now Visit Your Contact Us Page And See The Miracle But Messages Cannot Be Sent.To Rectify This Follow step 3

Step 3 :  

This is The Final Step Do It Carefully

• Log In to your Blogger Account
• Go To Layout Tab And Select Add a Widget
• Now Select Contact Form from More Gadgets and Save

Now Your Contact Form Will Work...But You Can See Contact Form in Sidebar,To Disable Contact Form In Side bar

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML >> Search For </head>(Want help to find Click Here)
• Now Paste The Following code Above/Before </head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>

•  Save The Template.Now You'r Done

Go To Your Blog And Check,if you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.