how to create a form to contact us on blogspot

Put our contact form extremely important for bloggers and readers because if they want to communicate something to the owner of the blog they can contact us using this widget. Usually the contact form entitled "Contact Us" or "Contact me", and provided by Blogger can only be used for blog widget, but with this tutorial then we can put it to our blog page. This post will teach you how to create a very simple contact form for HTML based website template.

The first
We must add a contact form widget into the page that we created. The trick, turn to page layouts > Add gadgets > Contact Form. Put in any place.

The Second
Then find the code as shown below and remove the parts and leaving as below the words "delete this section" was removed as well.

  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

  <b:includable id='main'>

delete this section

</b:includable>

  </b:widget>

The Third
Make Contact US page
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 to you 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>

Ok, that all tip from me, thank U for attention

Posted by Admin

Tweet