Part 1: How to Customize & Edit Blogger Contact Form

Everyone want to customize their blog more and more for looking as much as beautiful and we have some new customize options and edit blogger contact form easily. Below you can also see the demo link and also a pictures provided by my friend MBT Blog !

DEMO 

Note: We have added some of the contact Form to a static page and also the sidebar. Just to show that you can add this Custom Form anywhere you want. On static page the Form on sidebar wont display but it will display on all other pages.

Tutorial Guider:

We have divided this tutorial in 4 partss:

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 the  Sidebar:

By default blogger will allow you to add this widget to your sidebar only but you can easily embed its code on any post or static page easily by copying the HTML code by viewing the browser source file (Ctrl + U). I have taken all the headache so you will only need to follow these easy steps below:

1. Go to blogger > Layout
2. Click Add a gadget
3. Next click on "More Gadgets"  and then choose the first widget as shown below:

     4.  Now you have successfully added or in other words registered your contact form widget with blogger.

     5.  Don't Remove this gadget and leave it intact. If you tried to ever remove it then the Customized contact form that we will code wont work. We will surely Hide this widget from sidebar.

2. Controlling Widget Display

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. Well we have already done all the work so you simply need to follow these easy steps:

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>

The above code will hide the Normal Contact Form on a Static Page only. If incase you wish to add the Custom contact Form to a Post then you may use the following code instead:

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

Replace URL OF Selected Post  with the URL of the Post where you will soon add the contact form.

In our DEMO we have added the contact form to static page therefore we have used the first code in step#5.

3. Customizing The Contact Forms - The LastFun Part!

To Keep the tutorial easy, this part will be discussed in Part2 of the tutorial, i will posted on the next post.

Share your comments and views on the comment box, stay blessed !