By default blogger will allow you to add the contact form to the side bar but you can easily embed its code on any post or static page easily by copying the HTML code by viewing the browser source code (Ctrl + U). Cool down, there is no need to put you through that stress, simply follow my walk-through below.

Customize Blogger Contact Form!

This tutorial will take on 4 dimensions:

1. Adding the Normal Contact form widget to sidebar
2. Controlling Widget Display
3. Customize the Contact Form
4. Finally Add the Customized contact Form to Sidebar, Post or Static Page

1. Adding contact Form to Sidebar:

  Follow the steps on New! Simple Contact Form Widget for Blogger to Add the contact form to your sidebar. When this is done proceed to:

2. Controlling Widget Display

This step will see you hide the normal contact form from the side bar.

Hide The Normal Form on sidebar

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

<b:if cond=’data:blog.pageType == “static_page”‘>
  <style>
#ContactForm1{ display:none!important;}
  </style>
</b:if>

or this code:

 <b:if cond=’data:blog.url == “URL OF Selected Post“‘>
  <style>
#ContactForm1{ display:none!important;}
  </style>
</b:if>

 If  you wish to add the Custom contact Form to a Post then you may use the above code instead and replace URL OF Selected Post  with the URL of the Post where you will add the contact form.

3. Customizing The Contact Form

This step will feature awesome css3 look for the default blogger contact form.

• Follow the steps in Customize Blogger Contact Form to customize your contact form.

4. Add the Form anywhere you like!

Now you will need to create a Static Page where we will add the HTML code for our new contact form.

1. Go To blogger > Pages
2. Choose a Blank Page
3. Give it any title you like. I recommend “Contact Us”
4. Switch to its HTML mode and paste the following HTML code inside it:

    <div class=’form’>
    <!– Custom Contact Form By EWT Starts –>

    <form name=’contact-form’>

    <!– Name Field –>

    <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>

    <!– Email ID Field –>

    <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>

    <!– Message Field –>

    <textarea class=’contact-form-email-message’  id=’ContactForm1_contact-form-email-message’ name=’email-message’  value=’Leave Your 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;;}’></textarea>
    <p></p>

    <!– Clear Button –>
    <input class=’contact-form-button contact-form-button-submit EWT-button-color’ type=’reset’ value=’Clear’/>

    <!– Send Button –>
    <input class=’contact-form-button contact-form-button-submit EWT-button-color’ id=’ContactForm1_contact-form-submit’ type=’button’ value=’Send’/>
    <p></p>

    <!– Validation –>
    <div style=’text-align: center; max-width: 222px; width: 100%’>
    <p class=’contact-form-error-message’ id=’ContactForm1_contact-form-error-message’></p>
    <p class=’contact-form-success-message’ id=’ContactForm1_contact-form-success-message’></p>
    </div>
    </form>

    <!– Custom Contact Form By EWT Ends –>
    </div>

    5.  Don’t switch to Compose Mode of your Blogger Editor else the code will get messed up due to your Editor settings. Save and Publish your Page.
Your contact page is now viz…  but if you wish to add the form to your sidebar or post  then simply follow these steps:

• To add the form to sidebar. Copy the HTML code above and paste it inside HTML/JavaScript Widget
• To add the form to Post editor, switch to HTML mode and paste the code above  inside it 

Viz….