How to Add a Contact Form(Contact Us Page) in Blogger: Best Method

100% Working - Create a Contact Page on Blogger's Blog.

Before we continue, i will like you see the DEMO of the page

There are so many tutorials on the web about creating a contact page. But i have made this to be easy to implement and perfectly working as you've seen in the DEMO above

Steps to Create a Contact Page on Your Blog.

1. Before we go into further steps, i want you to get your Blog ID. This is so easy to get.

Login to your Blog dashboard, in the address bar you will find a URL address roughly like this: https://www.blogger.com/blog/post/edit/1234567890123456789. As shown in picture below

Copy the numbers in place of the highlighted area to your clipboard. For we are going to make use of that.

2. Create a new page titled 'Contact Us' or any title that pleases you. I believe everyone should be able to do that.

3. Copy all the codes below and paste it directly into the new Contact Page created.

Note: Make sure you are in the HTML view mode of writing. As shown in picture below;

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'><b>Your Name</b></label><input class='contact-form-name' id='ContactForm1_contact-form-name' placeholder='Enter your name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'><b>Your Email</b><span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email'placeholder='e.g. youremail@gmail.com' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'><b>What did you want to tell us?</b></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message'placeholder='Write something....' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></div>
    <div class='notif-area'>
      <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'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890123456789';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d12345678901234567890','//www.longtechy.blogspot.com/','1234567890123456789');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Delivering message...', 'contactFormMessageSentMsg': 'Thanks for contacting us. Your message has been sent successfully.', 'contactFormMessageNotSentMsg': 'Message could not be sent due to an error. Please try again later.', 'contactFormInvalidEmailMsg': 'Please enter a valid email address.', 'contactFormEmptyMessageMsg': 'Message field shoud not be empty.', 'title': 'Contact Form', 'blogId': '1234567890123456789', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

After the sucessfull install of this codes, your contact page be should be ready and 100% working!

Subtitutions

Change: 1234567890123456789 with your blog ID. You have to do this in four areas in the HTML codes, please take note.

You can also make more changes to some texts as in other highlighted areas of the codes.

As usual if there is any difficulty in implementing this codes, you can drop a comment in the comment box

Thanks for choosing Longtechy. You can follow us for more updates!