Customized Contact Form For Blogger in Seperate Page

To Add Static Contact Page Follow Following Steps:

Contact Form-Blogger

»Hide Sidebar Contact Form

• 1. Go To Blogger > Template
• 2. Backup your template
• 3. Click Edit HTML
• 4. Search for </head>
• 5.just above it paste the following statement that will hide the widget on sidebar.

<style>#ContactForm1{ display:none!important;}  </style>

Related: Advance JQuery Contact Form For Blogger

Note:- Don't remove the Widget from the Layout of Blogs. This widget will not show in the sidebar of homepage. Instead it will show only in blog Page.

Since this is widget which can be kept on the right or left sidebar, also in Bottom at footer.
But many bloggers want to keep in separate page. The contact form that you created has an ID #ContactForm1 , using this ID you can easily locate the HTML code of the normal form in your blog source file. If you want to add our edited contact form so Follow These Steps:

• 1. Go To Blogger Dashboard >> Pages >>
• 2. Create a New Blank Page (Add text or media)
• 3. and in HTML Mode Paste the Following Code.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country {
max-width: 300px;
width: 100%;
font-weight:bold;

}

.contact-form-name {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 10px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;

}
.contact-form-email {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;

}

.contact-form-subject {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;

}

.contact-form-country {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;
}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 15px 15px 15px 5px;

}

 .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: #A1A1A1;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
vertical-align: top;
max-width: 500px!important;
height: 120px;
border-radius:4px;

}

.contact-form-button {
cursor:pointer;
height: 30px;
line-height: 30px;
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 10px;
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(1,1,1,.3);
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3);
-moz-box-shadow: 0 1px 2px rgba(1,1,1,.3);
box-shadow: 0 1px 2px rgba(1,1,1,.3);

}

.contact-form-button:hover {
text-decoration: none!important;
border: none!important;

}

.contact-form-button:active {
position: relative;
top: 1px;

}

</style>  
<br />
<div class="form">
<form name="contact-form">
<div style="text-align: center;">
<div align="center">
<span style="background-color: red; color: white; font-family: Georgia, Times New Roman, serif; font-size: x-large;">Contact Us</span></div>
Name: &nbsp;&nbsp;<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" /><br />
Email: &nbsp; &nbsp;<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email ID" /><br />
Subject:&nbsp;<input class="contact-form-subject" id="ContactForm1_contact-form-email" name="subject" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Subject&quot;;}" onfocus="if (this.value == &quot;Subject&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Subject" /><br />
Country:<input class="contact-form-country" id="ContactForm1_contact-form-email" name="Country" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Country&quot;;}" onfocus="if (this.value == &quot;Country&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Country" /><br />
Message:<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" style="height: 47px; margin: 2px; width: 212px;" value="Leave Your Message.."></textarea><br />
<input class="contact-form-button contact-form-button-submit" type="reset" value="Clear" />   <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 500px; 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>
</div>
</form>
</div>
</div>

• 4.You are done.

If You like this or have any problem Please Comment :) Enjoy...