--> Customize Blogger Contact Form! Part 1 | Experience Lab - Online business creation and development guide for bloggers and startups

Customize Blogger Contact Form! Part 1

So most of you are aware of the recent gadget added to blogger widget directory and that is a small contact form with two input fields for...

Blogger Contact Forms

So most of you are aware of the recent gadget added to blogger widget directory and that is a small contact form with two input fields for name and Email and a text area for writing the message. We use a complex PHP Form for our contact page but blogger has made it extremely easy for you guys. Ever wondered how to customize this simple form into a professional looking contact form that may give a complete new boost to your overall blog look? Fortunately all MBT readers will be the first to learn this trick today. Plus you will also learn how to add this form anywhere on your blog! I had sometime today so I designed a custom version of this contact form by adding several new CSS3 effects and also added an additional button called "Clear" that will reset and erase the message for your visitors if incase they wish to rewrite a new message. Kindly view the Demo below:


DEMO

Note: We have added 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 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:

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:

adding contact form

     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 add the contact form.

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

3. Customizing The Contact Form - The Fun Part!

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Customize Blogger Contact Form! Part 1
Customize Blogger Contact Form! Part 1
http://lh3.ggpht.com/-szTf9blT-y8/UZ-5zeamLfI/AAAAAAAAJvA/-YTxsDBXeQ0/image%25255B12%25255D.png?imgmax=800
http://lh3.ggpht.com/-szTf9blT-y8/UZ-5zeamLfI/AAAAAAAAJvA/-YTxsDBXeQ0/s72-c/image%25255B12%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/05/customize-blogger-contact-form-part-1.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/05/customize-blogger-contact-form-part-1.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy