Customize Blogger Contact Form! Part 1

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

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

47 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Great tutorial I was waiting for this for a long time.

    ReplyDelete
  2. but i already have contact form from email me form?
    Mohammed please tell me how to break sidebar into 2 column i'm using template Salahudin Ayubi plz,,,

    Thank you very much mohammed you motivated me :D

    ReplyDelete
  3. You are an inspiration for me....
    I read your blog in 2010 and now reading it after a long time of 3 years...you have improved a lot...and MashaALLAH STC Network is going fantastic.
    I am really interested in knowing your story..specially after reading your "About me" post..
    Can you make a post related to the ups and downs of your blogging career...
    Also share all the blogs running under STC network.
    God Bless..

    My Blog: http://www.islotimes.com

    ReplyDelete
  4. Mohammad bro you are really rocking. I am waiting for part 2 of this tutorial. :)

    ReplyDelete
  5. Another fantastic widget from blogger. Thanks for sharing this Mohammad. Can't wait for the CSS customisation.

    ReplyDelete
  6. Assalamualaikum brother.....i have a question.....
    IS ADDING ADSENSE CODE BETWEEN POST AND TITLE ....IS THIS ILLEGAL..OR IS THIS AGAINST GOOGLE POLICY ??????????????

    ReplyDelete
  7. Sir Nice Work. We will be in touch & will hears for updates.

    ReplyDelete
  8. Thanks Dear For Such A Nice Widget......!

    ReplyDelete
  9. thank you for sharing your knowledge with us

    ReplyDelete
  10. I was totally unaware about this contact widget.Thank you bro
    http://bloggerever.com

    ReplyDelete
  11. Many many thanks for this trick...
    Mohammad bhai ... if you dont mind can i ask you question?
    In webmaster tool 18 URL block by robot...
    How can I fix this problem???

    ReplyDelete
  12. Wow, that's great! I love this widget. :)

    ReplyDelete
  13. I think you have made an error or I am not understanding. Please help. in the controlling widget section, you have written that if you wish to add to post. What it means? Before it you were telling to hide it from static page and you are saying to show on post.

    I am totally confused. Directly I want to hide it from blog but to use on contact page. Please reply soon.

    And one thing, where has reply subscription link gone from comment form.

    ReplyDelete
  14. can't able to hide the widget from sidebar.

    ReplyDelete
  15. This doesn't work.. There are no instructions on HOW to get the form on the static page.. you say you did all the work, but there are no codes to place on a blank static page.. Sorry..

    ReplyDelete
  16. @The Posh Box OH and the code to hide the contact form for a static page, doesn't hide it.. it's still there on my test site..

    ReplyDelete
  17. Your Contact form Is awsome dude..
    nice to share
    #yudiprasetya

    ReplyDelete
  18. Thanks a lot for the tutorial but i am facing an issue. The widget is still being displayed in widget area and not in static page (Page name: Contact Us). Should i replace the "static_page" part in the code with "Contact Us".And, should i paste any html code in the contact us page?

    ReplyDelete
  19. After reading the part two of this series,the form in displayed in the Contact Us page. Now should i replace the "static_page" part in the code with "Contact Us" and the widget is still being displayed in widget area.
    Thanks in advance.

    ReplyDelete
  20. Hi Mohammad, I am doing my first steps in making my own blog and came across your alighting blog. I really needed to make a contact form so I followed your steps - I got the beautiful customized form as you promised but could not get rid of the form on my home page. Can you help me? Copied and pasted the piece of code above the "head" as you instructed.
    Hope you have time for such a minor bugs.
    Yael
    My blog: http://psy4groosh.blogspot.co.il

    ReplyDelete
  21. hello i followed this article and added the contact form in the sidebar and then in the separate page http://www.webcodeexpert.com/p/contact-us.html. I want to hide the form from the side bar widget. I tried your code
    to hide it in the head tag. But still the form is in the side bar. So i removed that piece of code from the head now. Please help me.

    ReplyDelete
  22. @Mustafa I need a tutorial in incerasing the site's linking in of alexa.

    ReplyDelete
  23. Contact form is great tool in getting feedback and constructive comments from the visitors. Though the contact form provided by blogger is good and simple but one can't have control have due to php design.

    If the site is hosted with php scripting, then one can try for stylish form having self-control parameters. Thanks for sharing your post.

    For simple stylish contact form:
    www.freemenu.info

    ReplyDelete
  24. Hello Admin !
    Please Help ,


    The Code Did Not Hide The Contact Form Widget From Sidebar .

    ReplyDelete
  25. thank you for sharing such nice infoto us. i like it its very informative one keep sharing this type of information to keep in touch with the people

    ReplyDelete
  26. Assalamoalikum brother

    How can i hide Contact Form Widget From Sidebar ?

    jazakALLAH khair!

    ReplyDelete
  27. how to hide from sidebar not working cmon mannnnnnn

    ReplyDelete
  28. How can I place the contact form ONLY in a static page and no in sidebar?

    Awesome job guys! Thank you! :) :)

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  29. Read part 2 link is incorrect.

    jazakALLAH khair

    ReplyDelete
  30. Yeah, you are incorrectly linked to "Read part2 " in this post. Plz change it. And your post is very helpful..Thanks..

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Great Post but incorrectly linked to "part 2 " in this post. Plz change it
    MY BLOG MY EARNING

    ReplyDelete
  33. Hi Mohammed,
    The widget looks great, but I am not able to get the link to part 2 to work. Any assistance would be appreciated.

    ReplyDelete
  34. Hello there. Amazing guide, i am using. Thanks alot.
    P.s: At the end, the part 2 is redirecting to part 1 again :)

    ReplyDelete
  35. can't hide it from static page... step 2 is not working.. need some help..

    ReplyDelete
  36. Muhammad Your are awesome blogger :* Fan of you

    www.graspinfo.blogspot.com

    ReplyDelete
  37. @all try this it will surely work fine
    search for below code

    ]]>

    paste below code just above it.

    #ContactForm1
    {
    display: none ! important;
    }

    Regards

    ReplyDelete
  38. Search for below code.

    ]]>

    and paste following code just above it.

    #ContactForm1
    {
    display: none ! important;
    }

    Regards

    ReplyDelete
  39. This contact form don't work on Internet Explorer - why?

    ReplyDelete
  40. Muhammad SIR THE GIVEN CODE TO HIDE THE NORMAL FORM DID'NT WORK..!
    PLZ HELP

    ReplyDelete