Add Blogger Contact Form In Any Page

Contact Form is always very important for any blog or a website. Most of the websites use php contact forms or google docs forms. Recently, blogger announced its official contact form and it works fine but it can be used as a widget in the blog. So many bloggers are still thinking that they can't add blogger's official contact form in any page or post. So I'm creating this article to show you how to customize and add blogger's official contact form in any page or post.

Follow the instructions:

1. First of all, add a blogger's official contact form in your blog. See How To Add Blogger Contact Form.
2. Now, let's hide it. To hide it, go to blogger template editor and just before the </head> tag, add the following code:

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

3. Now create a new page by going to Dashboard > Pages > Create A New Blank Page.
4. Now in html editing mode, copy and paste the following code:

<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> 
<div class="form"><form name="contact-form"><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' /><p></p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/><p></p><input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Subject&quot;;}' onfocus='if (this.value == &quot;Subject&quot;) {this.value = &quot;&quot;;}'/><p></p><input class='contact-form-country' id='ContactForm1_contact-form-email' name='Country' value="Country"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Country&quot;;}' onfocus='if (this.value == &quot;Country&quot;) {this.value = &quot;&quot;;}'/><p></p><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;;}" value="Leave Your Message.."></textarea><p></p><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></form></div>

5. Now publish the page and open the page. You will see your brand new contact form.