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.

1. First, add the contact form to your blog sidebar and test it. Make sure that you are receiving emails in your inbox when you click the send button.(This is an optional step)
2. Now remove the Contact Form gadget from your sidebar. You can do that on the layout page.
   
3. 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.
   
4. 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)

   <script>
   var blogId = '8694494030520005341';//this number should be mandatorily edited.
   //The below message 5 Strings can also be edited
   var contactFormMessageSendingMsg ='Sending...';
   var contactFormMessageSentMsg = 'Your message has been sent.';
   var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
   var contactFormEmptyMessageMsg ='Message field cannot be empty.';
   var contactFormInvalidEmailMsg = 'A valid email is required.'
   
   var widgetLoaded=false;
   function sendEmailMsg() {
   if(widgetLoaded== false) {
   _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
   widgetLoaded=true;
   document.getElementById('ContactForm1_contact-form-submit').click();
   }
   return true;
   }
   </script>
   <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' onclick="sendEmailMsg()"/>
   <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(after proper editing), disable the comments and publish your page.

   

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