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:
- Adding the Normal Contact form widget to sidebar
- Controlling Widget Display
- Customize the Contact Form
- 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:
- Go to blogger > Layout
- Click Add a Gadget
- Next click on "More Gadgets" and then choose the first widget as shown below:
- Now you have successfully added your contact form widget to your blog.
- 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"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
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"'>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
<style>
#ContactForm1{ display:none!important;}
</style>
</b:if>
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