How to Create Contact Us Form Page in Blogger Blog

In Blogger, the contact form is solved with the help of gadgets that we can place anywhere in our topic, and most often, the authors put it in the sidebar. The problem with this approach is that the contact form will be present on every page that the visitor opens.

Instead of such a solution, most of today's blogs and sites place the contact form either on an individual page or as an integral part of the page that provides information about the blog itself (popular names of such pages About me / About the blog / About the Author, etc.).

Why use the Contact Form?

Often the authors of the blog themselves are confused about this they wonder what the contact form is for when the user already has the opportunity to leave comments below the published texts? After all, the blog administrator (usually the blog author himself) will receive an email with a message from the user.

The difference between comments and contact forms is in their purpose. When a user enters something in the comment field, he wants his message to be public and intended for some future readers of that text. When a user fills out a contact form, his message is private and sent exclusively to the blog owner.

Through the contact form, someone can send you a proposal for cooperation, some requests, business contacts, and similar things concerning the author or administrator of the blog.

When we know the different purposes of these two ways of communicating with the blog, the question arises why mix them up and display them on the same page of your blog? It is necessary to ensure that the user always sends his message where it is needed.

In the Blogger Dashboard, click the Pages>New Page.

Name the newly created page Contact Us and enter the text you designed to appear before the contact form. On the right, click on the "Options" tab and check "Do not allow, hide existing"

Then click on the button labeled "HTML" at the top left of the screen. A window for editing the HTML code of the page will open. Scroll to the last item entered, copy the following code below, paste it to your page and replace 'XXXXXXXXXXXXXXXXXXX' with your blogID:

<center><script>
var blogId = 'XXXXXXXXXXXXXXXXXXX';
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></div><div>Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" style="background-color: azure;" type="text" value="" />
<div>Your Email: <i>(required)</i></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" style="background-color: azure;" type="text" value="" />
<div>Your Message: <i>(required)</i></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" margine="1" name="email-message" rows="5" style="height: 348px; width: 100%;"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" />
<div style="max-width: 450px; text-align: center; 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>
</center>

Congratulations!

Now you have a fully functional and independent Contact Form page on your Blogger blog where your visitors can find some basic information and where, if necessary, they can contact you quickly!