Make Contact Form on Blogger Pages

How to Make a Blogger Contact Form on a static page


How to Make a Contact Form on Blogger Static Pages
Contact form is a form that can be used by visitors as a means to communicate privately via email with the owner of the blog / website. In general, the contact form consists of several fields such as the name, e-mail and message to be conveyed.

Contact form presence on a website / blog. Can be used as an indicator that the site has seriousness in management, so as to increase user confidence in what's in it.

Actually Blogger.com already provides a free contact form feature / service that can be installed as a contact form widget on Blogspot. But, it seems that we rarely encounter blogs that use the contact form widget. They prefer to create contact forms on static pages, although they must use a contact form service from a third party.

In this tutorial I will explain how to create / install Blogger Contact Form on a static blog page. Please follow the steps below.

  • Enter Blogger, select the blog that you want to create the contact form page. 
  • Select the Pages menu, then click New page. 
  • Create a page title, for example Contact Us, Contact Me, Contact Us, or others. 
  • Enter HTML mode (next to compose), then copy and paste the code below as the contents page. 
<div class="Form">
<form name="contact-form">
<p></p>
Name
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>

Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>

Message
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" 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" onclick="sendEmailMsg()" type="button" value="Send" />
<p></p>

<div style="max-width: 400px; 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>
</div>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\xxxxxxxxxxxx','//YOUR-BLOG.COM/','xxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
  • Replace xxxxxxxxxxxx with your blogger ID. Also replace YOUR-BLOG.COM with your web / blog address WITHOUT https: // or https: // 
How to Make a Contact Form on Blogger Static Pages
  • Replace the code marked in red with your blog's blogId code. To get the code, you can see it in the address bar on any page of your blog dashboard. See an example in the image below. 
  • Publish the contact form page in HTML mode. View or visit your contact form page, then try sending a message to find out if the contact form works as expected.

That's all and hopefully there's no problem when you try it. If you are still confused, you can ask in the comments column below or can contact the admin directly via the contact form provided. thank you