How to Make a Simple Contact Form on Blogger

How to Make a Simple Contact Form on Blogger - Contact form is very important to me and the readers as if they want to communicate something to the blog owner they can contact us using this widget. Usually the contact form entitled "Contact Us" and provided by Blogger widgets can only be used for the blog, but with this tutorial then we can put it to our blog page.

Installing Widget Contact Form

We must add a contact form widget into a page that we created. Do so, open the page layout> Add gadgets> Contact Form. Put in any place.

Then find the code as shown below and remove the parts and leaving like this (the words "Remove this section" was removed too well)

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
Remove this section
</b:includable>
  </b:widget>
</b:section>

Now save your template.

Creating Pages Contact US

Now proceed to make the page "Contact us". Please go to the page and then create a new page or can also create new posts. Up buddy want to choose which one. If you are ready to put this code in HTML mode (next to compose) into your page.

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <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>
      </form>
    </div>
  </div>
</div>

Well if you want to add your text before or after this widget go ahead, write in compose mode also does nothing. If all preparations have been completed stay publish it and see the results
Indeed, the widget above looks simple, but it is enough in my opinion. You can try it by sending a test message to your own email.