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 want to add the contact form to the sidebar, stop reading and refer this tutorial – Contact Form Widget for Blogger SidebarContact Form Widget for 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

Update 07/01/2015 : This post has been updated so that the contact form works on all forms of Blogger mobile views.

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.

Now remove the Contact Form gadget from your sidebar. You can do that on the layout page.

Now find out the unique blogID of your blog. When can find this blogID on the URL bar of your browser when you are on any page on your blog’s dashboard. This blogID is required to generate the code for the new Contact Form page. The below screenshot explains how you can find out the blogId. Find this number and note it down. This number will be needed to generate code for the contact form.

Now create a new page in your blog

Copy and edit the below code snippet. Editing the blogId number is mandatory(Use the number which you noted down in step 2)

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(after proper editing), disable the comments and publish your page.

Once the page is published, go to this new page fill out the contact form, click on the send button and verify that it sends out the email to all the Blog admins.

FAQ: Frequently asked questions : Contact Form for Blogger

Question #1 : Why should I add a Contact Form?

Adding a contact form will make it easy for your readers to contact you. They don’t have to take the pain of noting down your email address, opening up an email application like Gmail/Hotmail, composing and sending it across to you. Instead they can just come over to your blog, fill in the necessary information in the contact form and just press send. That makes it so easy for them. It’s also useful to the blog administrators as they don’t have to expose their email address on your blog.

Question #2 : Why should I move the contact form to a separate page. Why not have it on the sidebar?

This is more of a personal choice. Another thing to note is that, the regular sidebar contact form doesn’t currently support mobile templates. So if you want the contact form to be supported on mobile templates as well, then it might be a better option to move the blogger contact form to a separate page.

Question #3 : Can we add custom fields to the Blogger Contact Form?

You might have seen this as a ‘No’ on most tutorial websites, but it’s not impossible to add custom fields to the Blogger contact Form. If you are good with JavaScript and HTML, you could add on few more fields to the contact form and then silently format concatenate and dump the content of these fields on to the message field. If there are enough requests for this one, I will consider updating the tutorial with more details on how to do this.

Question #4 : Does the Blogger contact form have any positive or negative impacts on SEO

No

Question #5 : Is the contact form safe from SPAM?

Mostly yes.Blogger has taken enough care to prevent automated comment spam. Buy you can never prevent human spammers!

Question #6 : Where will the contact form messages be delivered to ?

As explained in the tutorial, it will be sent out to the email addresses of all blog administrators.

Question #7 : Contact Form says that the message has been sent, but I didn’t receive it.

There are few reports that even when the contact form displays something along the lines of "Your message has been sent", the message doesn’t get delivered on some blogs. If you get this kind of an error, report the same to Google. The best place to contact them would be the Official Blogger Product Forums though you have to go through Blogger’s community moderators who can escalate it to Blogger folks. Please let us know as well in case we will be able to help.

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?

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?

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..

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.

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?

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.

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

this was working, but after doing that I got one error on template page, which disabled all editing features of template tab. error was below:

We're sorry, but we were unable to complete your request.When reporting this error to Blogger Support or on the Blogger Help Group, please:•Describe what you were doing when you got this error.•Provide the following error code.

Update: Having installed a Contact Form as per your instructions I then found it wasn't working (see previous Post) and that the edited code had disappeared and there was no Contact Form widget at all in the Html code. Since then I reinstalled the Contact Form widget on the Home page and repeated the edit you suggest. It's now working again. But it occurs to me that maybe Google periodically scour Blogs automatically for this patchwork and delete it?

I don't think Google periodically removes this patch from your template. Anyway I have updated the tutorial in such a way that you don't need to do template edits any more. The new solution will work on mobile templates as well(more details are there in my reply to Amanda's query over here). Please try out the updated tutorial and let me know how it goes.

Hi,This works great for desktop templates but I can't get it to work for any mobile device templates. In the comments above it seems like others have the same problem - the "send" button doesn't work on mobile devices with a mobile template.It does work when "show desktop templates on mobile devices" is chosen but I would prefer not to do that.Any advice?

Hi Amanda,Thanks for pointing that out. The old tutorial doesn't work on blogger's mobile templates as they don't register/display the sidebar gadgets which is essential for the send button to work.I have updated the tutorial so that it supports mobile views by registering the widget in an alternate way. The steps are slightly different but not too complex. You can even customize few of the messages which are used by the Widget. Please let me know how it goes.

I'm trying to implement it to my blogs. It works on my Blogger blog but doesn't work on any of my blogs on custom domain. 1. I tried to send several messages with the widget installed in the sidebar but it was never delivered though I got the confirmation that the message has been sent.2. As soon as I delete the widget (step 2.) it is gone from the template too.

There were issues with custom domain contact forms. We had reported it to the Blogger team and they are looking into it. So hopefully your issue might have been solved by now. Can you retry please and let us know?

were you trying it out on a custom domain blog? There were issues with custom domain contact forms. We had reported it to the Blogger team and they are looking into it. So hopefully your issue might have been solved by now. Can you retry please and let us know.

I'm running on a custom domain. The copied and pasted code only works for me when the widget itself is installed and active on my blog. When I remove the widget, the code for the Contact page stops working.

Your contact page has a really really long URL ending with something like "p/var-blogid-869449nnnnnnnn41this.html" . I think it came up because you didn't initially set the page title. If you want to get rid of that, you can delete the page and create a fresh one with the same content with title set to "Contact".

If you are still around, I would be interested in a way to submit the contents of another form through the hidden contact widget. I have a customer project query form that I want to implement without using a third party email service.

I would need to copy all fields in the query form to the message body of the contact widget, then the email address at least would need to be copied across as well before submitting the contact form. I have some slight familiarity with jquery / javascript but not enough to find the solution myself easily. Any thoughts or suggestions?

Thank you, thank you, THANK YOU! I have been searching for this and couldn't get it to work with directions from other sites. They all said I had to add the contact bar to my blog sidebar and then hide it. Well, I couldn't get it to be hidden from their directions. Maybe it was outdated information?? Anyway, your tutorial worked perfectly and it is in a new page on my blog. Hooray!

I have a question. Is it possible to include a "telephone number" field? If so, would it work properly? I have tried it, but after the message has been sent in the contact form, The telephone number field is not included in the email message.