How to make a separate Contact-Us page in Blogger

Contact Form Widget’s official version is introduced by Blogger however, it works just on the Blogger Sidebar. If you would incline toward not to add the contact us form to your Blog's sidebar however rather require it to appear on a specific page, by then this instructional exercise will empower you to out. Of you don’t want and require the contact shape to appear wherever on your  blog. So have it moved it to an alternate Contact Me Page.

The best strategy to move the Blogger Contact Form to an alternate Page

Check the below instructions and steps for moving to separate page the contact form:

1.         Initial step is adding the contact form to ones blog and testing it. That you are getting messages in your inbox when you tap the send button. (this step is opitonal) 

2.         From the layout page now you can remove the Contact Form widget which is on your sidebar.

3. Then, once you have found the unique blogID of the blog which can be found on the URL bar of ones browser at the time you are on blog’s dashboard’s any page. The blogID will help to generate the contact form page (the new one) code. The underneath screen catch clears up how you can find the blogId. Note down the number after finding it. This number will be relied upon to deliver code for the contact outline. 

4. Now make another page in your blog.

Copy and adjust the underneath code piece. Adjusting blogId number is compulsory (Use where the same number which I earlier asked you to note 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>  

You will have to switch the mode to HTML during the process of creating the page. See below image for help. After all the editing has been done, you can paste the aforementioned code to Post Editor. You can Publish the page after disabling the comments. 

5. Once the page gets published, visit this new page and fill for your self the contact form, tap on the button for sending out the email to all the admins of the Blog.

So folks, do not forget to share your comments and feedback. Also feel free to share any concerns, issues  or any other help or assistance needed regarding understanding this aforementioned process for making separate contact page in blogger.