Google just added a new widget to their list of gadgets. The recent gadget added to blogger widget directory is a small contact form with two input fields for Name and Email and a Text Area for writing the message. 

I will show you how to customize this simple form into a professional looking contact form that may give a complete new boost to your overall blog look. Especially on your Contact Us Page.

Step-by-Step Guide:
We have divided this tutorial in 4 parts:
  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:
You can only 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 your browser source file by using the keyboard short cut (Ctrl + U) or Right-Clicking on the browser to select View Page Source option. Follow these easy steps below too add the widget:
  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 your contact form widget to your blog. 
  5. Don't Remove this gadget and leave it intact. Removing this widget will render the contact form code invalid. I will show you how to Hide this widget from sidebar.

2. Controlling Gadget 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.
Follow these easy steps below to HIDE the widget’s code:
1.      Go To Blogger > Template
2.      Backup your template
3.      Click Edit HTML
4.      Search for </head>
5.      Just above it paste the following list of code that will hide the widget on the sidebar:

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

The code will only hide the Contact Form on a Static Page only. To add the Custom contact Form to a Post, use the code below:

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

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

3. Customizing The Contact Form
To Keep the tutorial easy, this part will be discussed in Part2 of the tutorial. Share your views below and stay tuned for the amazing tricks coming tomorrow! Peace and blessings buddies :)

Post a Comment