How to take your Blogger Contact Form to a separate Page

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.