Create Separate Contact Page in Blogger

Blogger launched it’s official version of the Contact Form Widget but, it works only on the Blogger Sidebar. If you don’t want to add the contact form to your Blog’s sidebar but want it to appear on a specific page, then this tutorial will help you out. I didn’t want the contact form to appear every where on my blog. So I have moved it to a separate Contact Me Page


How to move the Blogger Contact Form to a separate Page

Follow the below steps to move the Contact Form to a separate page. If you would like to see a demo, you can check out my Contact page.

  1. First, add the Blogger Contact Form Widget to your sidebar. (We will hide the contact form later in this tutorial, but you have to add it) . My previous tutorial on adding a blogger contact form widget will help you out.
  2. Now create a new page in your blogcreate-new-page-in-blogger
  3. Copy the below contact form code block

    <form name='contact-form'>
    <div>Your Name : </div>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
    <div>Your Email: <em>(required)</em></div>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
    <div>Your Message: <em>(required)</em></div>
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
    <p></p>
    <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
    <div style='text-align: center; max-width: 450px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    

    While creating the Page, you have to switch to the HTML mode as shown in the image below. Then paste the above code into the post editor, disable the comments and publish your page.

    blogger-comment-form-on-separate-page
  4. Now go to Template > Edit HTML

    blogger-edit-html

    and Jump to the ContactForm Code and expand with widget code

    jump-to-contact-form-widget

    expand-contact-form-widget

    and then expand the main b:includable

    expand-contact-form-widget-main-includable

    Now delete the code highlighted below

    delete-bincludable-of-contact-form

    so that it ends up like

    contact-form-widget-should-look-like

    Now we have prevented the Contact Form Widget from appearing anywhere on the sidebar but have kept the widget registered.Make sure that you don't remove the widget from the Layout Page.

  5. Save the Template and it’s done.You now have a separate contact page on your Blogger blog :-)

  6. Happy Blogging!


105 comments :

  1. Superb stuff....., man
    I definitely try this.......

    ReplyDelete
  2. Great post. After searching 5 hours now I have got the real trick to applying Blogger official widget to Blogger pages.

    ReplyDelete
  3. Thank you for this.

    I will also try it in my blog.

    ReplyDelete
  4. Thanks a lot man .....I have added it on my blog. With this my blog has completely turned into a professional blog

    ReplyDelete
  5. Wow, I did it! Thank you so much.
    My blog - charmesanwrites.blogspot.com.au - looks so much better for adding the contact form as its own page!

    ReplyDelete
  6. How can I change the color of the 'send' button?

    ReplyDelete
    Replies
    1. Add the below CSS to Template Designer > Advanced > Add CSS

      contact-form-button-submit {
      background-color: #4d90fe;
      background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
      background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
      background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
      background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
      background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
      background-image: linear-gradient(top,#4d90fe,#4787ed);
      border-color: #3079ed;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
      }


      .contact-form-button-submit:hover {
      background-color: #000;
      background-image: -webkit-gradient(linear,left top,left bottom,from(#000),to(#000));
      background-image: -webkit-linear-gradient(top,#000,#000);
      background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
      background-image: -ms-linear-gradient(top,#000,#000);
      background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
      background-image: linear-gradient(top,#4d90fe,#357ae8);
      border-color: #2f5bb7;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8');
      }



      The second part is for styling the button when someone hovers the mouse over it.You will have to change the hex color codes to change the color

      Delete
  7. does not work, i have problem with permalink page, wont show !

    ReplyDelete
  8. Wow !! That worked like Charm

    See on my Blog.

    ReplyDelete
  9. May I know where is the email sending to? Or did I missed out any configuration step to set up my email address ? Cause I had tried many times but yet didn't received any of them in my mailbox.

    ReplyDelete
    Replies
    1. There's no need any configuration though. Please check it again, all emails are sent from google (not from "as we stated at email field"

      Delete
  10. It really awesome and simple, not confusing yet i ever seen,

    ReplyDelete
  11. Hi - Great tip, thank you

    Can you edit the code so that it emails a different email address?

    ReplyDelete
    Replies
    1. You can't amend the email address by editing code. If you want the email to be sent out to another address, add that email as an Admin of your blog.

      Add a new author from Settings > Basic > Add Authors.Once the author accepts the invitation, mark him as admin. All admins will be copied in the emails sent via the contact form

      Delete
  12. I have followed the instructions and have the contact box now in a "Page", however the widget outline is still showing where I originally placed it, albeit empty. How do I get rid of that box?

    ReplyDelete
    Replies
    1. Go to Template > Customize > Advanced > Add CSS

      add the below CSS there, and click Apply to Blog

      #ContactForm1 {display:none;}

      Delete
  13. Can't find the contactform1 in my blog

    ReplyDelete
  14. I have the same issue.

    http://werksman.blogspot.nl/

    It's on the bottom right of the page.

    ReplyDelete
    Replies
    1. Go to Template > Customize > Advanced > Add CSS

      add the below CSS there, and click Apply to Blog

      #ContactForm1 {display:none;}

      Delete
  15. This was so helpful and easy to follow!
    Thank you!

    ReplyDelete
  16. hm, when I try to click "send" nothing happens.

    ReplyDelete
    Replies
    1. add it to your blog and let me know so that I can have a look it where it's failing

      Delete
    2. same, I try to click send, but nothing happens :(
      http://stillibelieve.blogspot.com/p/contact.html

      Delete
  17. its possible to add image verification to prevent from spam, and adding extra field like phone number, select one of the choice from drop down menu? etc..

    ReplyDelete
  18. Thank you sooo much for sharing this mate!
    Any ideas how to change the size of the whole form?
    Thanks in advance!
    xxx

    ReplyDelete
  19. I was able to add it to the page, but when I tried to edit the HTML, the contact form didn't come up under the widgits. I tried testing the contact form and it will not send when I added it to the page. Is there any way you could help me trouble-shoot this?

    ReplyDelete
    Replies
    1. I have the same problem. Did you find a way to fix it?

      Delete
    2. the issue is that you missed step 1 :-). You have to first add the contact form widget to your blog's sidebar.

      Delete
  20. any way the width of the textarea could be increased? adding cols=' px' in the textarea attribute doesn't seem to work!

    ReplyDelete
  21. Thank you for good Info..Really helpfull...

    ReplyDelete
  22. yahoooooooo!!!! contact page added and working nicely ....
    thank you so much!!!

    ReplyDelete
  23. I was able to add it to the page, but when I tried to edit the HTML, the contact form didn't come up under the widgits. I tried testing the contact form and it will not send when I added it to the page. Is there any way you could help me trouble-shoot this?

    ReplyDelete
  24. Thanks for posting this, worked beautifully. Only issue is the send button won't get below the textarea.

    ReplyDelete
    Replies
    1. that seems to be something specific to your blog and we can help sorting it out if you provide your Contact Page URL

      Delete
    2. Aneesh, the form looks great! I am having a similar issue as Shivam. I can't find ContactForm1, and my send button does not send.

      Delete
  25. Thank you, that was exactly what I was looking for :D I'm new to blogger, but I hope I'll make the best of it.
    Cheers!

    ReplyDelete
  26. Thank you! Works great for my blog, aoesage.blogspot.com

    ReplyDelete
  27. Hi,

    As I just commented on your previous post that demonstrated how to add the contact Page in the sidebar and I mentioned some of the problems that, My send button is not triggering also there is no space between the words in the main message box..

    with lot of work I have come to the conclusion that it is probably due the dynamic layout I am using on my blog.... Please correct if I m wrong also suggest me if there is some solution to this..

    Regards

    ReplyDelete
    Replies
    1. I also have the same problem. If you find a solution to it, do let me know. Thanks!

      Delete
  28. hi, is it possible to change the error and success messages? If i click on the submit button, i will get my custom alert like "please enter a correct email. thank you." instead of "A valid email address is required.". I am sure there is a way around? Thanks.

    ReplyDelete
  29. Hi, Thank you for the information, very helpful. However, I cannot find the 'main b:includable' in the ContactForm1 HTML, Im searching for it endlessly, but its definately not there. Did I do something wrong?

    ReplyDelete
    Replies
    1. press anywhere within the template editor and use Ctrl + F. This will give you the search option. Try searching for contact-form-widget and you will find it.

      Delete
  30. Hello, the send button in my contact form is not working. This is the link to my Blog :

    http://scrube.blogspot.in/

    ReplyDelete
  31. Awesome :)
    Thanks for sharing Mate!!!

    ReplyDelete
  32. thanks that was helpful i applied in my blog
    http://your-pts.blogspot.com/

    ReplyDelete
  33. Super easy to follow instructions. Thanks for the help!
    Nichole from http://thewallpaperedrooster.blogspot.com/

    ReplyDelete
  34. I applied it to my site now. and it's work, thanks.
    http://searchdomainhosting.blogspot.com

    ReplyDelete
  35. Hello,
    It worked like a charm. Really helpful post. Thanks,
    http://SharePoint-works.blogspot.com

    ReplyDelete
  36. I tried it but the links to the different pages (Home, Contact) are gone. Any ideas? Thanks in advance!

    ReplyDelete
  37. Thnks a tonn i could add it. I need one more help can you please help me to create table of content link to my blog in pages am unable to do so. I want to have link within my blog

    ReplyDelete
  38. Hi
    It worked! Too easy to follow your clear instruction. Thank a lot.
    This my first blog

    http://createownopportunities.blogspot.com

    ReplyDelete
  39. Very nice. I had the same issue as at least one person above, and that is: it didn't appear in my widget drop down when editing template HTML. You allude to a solution near the end.

    Solution:

    Go to Layout > Add a Gadget > More Gadgets > Contact Form

    Contact form is now on all pages, and it will work, then your post succinctly describes the process of removing it from all but the Contact Me page.

    ReplyDelete
  40. Thanks so much. Was using kontactr.com but for some reason it stopped working. Googled "blogger contact form" found this and it was an easy step-by-step process that now works like a charm. Awesome stuff.

    ReplyDelete
  41. Wnderful post.I am successful with your commands.But I think one think you have skipped that is to select Show pages as :top tabs while publishing the new pages.Please also include this.Because some times people who have little knowledge they will fal in victim.Tahnk you.You are invited to my blog submitmysites.blogspot.com

    ReplyDelete
  42. It looks great! Thanks for the help with this, but the send button does not work/trigger. Any suggestions?

    http://stillibelieve.blogspot.com/p/contact.html

    ReplyDelete
  43. I've followed your directions but now when I click on the Contact page, and my other page, the right sidebar disappears from my blog completely. Help???? mypixfairy dot com

    ReplyDelete
    Replies
    1. Just wanted to update: my theme was the problem. Your directions worked fine and my separate contact form page is great now!

      Delete
  44. Thanks alot man !! You are a saviour. Check out

    http://wild-clicks.blogspot.in/p/contact-us_6.html

    ReplyDelete
  45. Thank you so much! Great stuff and a huge help!

    http://spicypinkinspirations.blogspot.com/

    ReplyDelete
  46. NICE STUFF SUPERB WORK DUDE THANKS A TON FOR TIPS & TRICKS

    ReplyDelete
  47. Thank you so much...I just did it, and it's work!

    ReplyDelete
  48. Thank i will try this on my blog then replay you

    My blog is http://sky eel.blogspot.com

    ReplyDelete
  49. Can I get some help? I have tried editing the code to get it out of my sidebar but it doesn't work. :/

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

    ReplyDelete
  51. Merci mille fois ! Tu m'as sauve la vie !

    ReplyDelete
  52. Merci mille fois! Tu m'as sauve la vie

    ReplyDelete
  53. very nice and easy thanks so much. but how can i register my domain? and please facebook comment is very impotant too. is there any easy way to add a facebook comment.

    ReplyDelete
  54. Nice job!
    Do you know how to chance the width of the big text box? I would like to get it about 400-500 px..
    Thank you

    ReplyDelete
  55. thanks a lot.I will use this instruction to make contact form for my blog
    www.Laptopcoolingpadhq.blogspot.in

    ReplyDelete
  56. Thanks so much! Your instructions were clear and easy to follow and it worked perfectly!

    ReplyDelete
  57. Thanks! This tutorial is awesome!

    ReplyDelete
  58. Thank you. Work like a charm!

    ReplyDelete
  59. Excelente tutorial!!

    Funciona como eu queria, perfeito.

    Obrigado.

    ReplyDelete
  60. Thank you for your simple directions. I'm new to Blogger and your tutorials are the best I've seen so far! XO

    ReplyDelete
  61. I did this and it worked, but now I don't see my tabs text. Before I turned tabs background to black and text to white by adding HTNL to CSS . Do you know how I can fix that?

    ReplyDelete
  62. Thank you, clear, even for me and I did it:)

    ReplyDelete
  63. I love u, what a post. It helps me a lot. So many many Thanks.........

    ReplyDelete
  64. Whenever I click Jump to Widget there is no "Contact Form". Any ideas why?

    ReplyDelete
  65. How to put this form in the centre ? It is actually in the left corner. Please help. and also wants to pur send button in the new line, next to the your message box. Can someone help me ?

    ReplyDelete
  66. Hi I've just tried and checked this several times but its not working the form gets applied to my contact page but doesn't work when i click send. nothing happens.

    http://stephenmayall.blogspot.com.au/

    any ideas?

    ReplyDelete
  67. THANK YOU!!! Uh you made that so much easier! <33333

    ReplyDelete
  68. Okay great post, i will do it now. :)

    ReplyDelete
  69. This trick was a life saver !
    Thank you so much for this ! :)

    ReplyDelete