How To Add Blogger Contact Form In Page

Hello friends today we tell you how to add blogger contact form inside blogger page.Mostly people add contact form widget on right or left side of blogger,its look good and work fine but some want to add contact form inside blog page,so here we tell you very simple trick to add contact form.

1st Step - Firstly we add contact form by widget by more gadget option in add gadget section in blogger.Click on more gadgets and then click on contact form now form is set ok,now go to second step.

2nd Step - Go to template on left side click and choose customize option.Click on advance and choose add CSS like in picture below.In white box space copy and paste this code and save by click on apply on blog button on right top side of blog.Now check 3rd step.

#ContactForm1 {
 display:none;
}

3rd Step - Final step after save code in CSS section create new page in blogger click on HTML check image below html right side of compose button clear and copy paste this code and then click on compose button and save,your form is ready.For check click on view page you create and send query.

Copy paste this code.

<div id="custom_ContactForm1" class="widget ContactForm">
 <div class="contact-form-widget">
<p>Get in touch with us by filling out the form below.</p>
  <div class="form">
   <form name="contact-form">
    <p></p>
    Name
    <br>
    <input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
    <p></p>
    Email
    <span style="font-weight: bolder;">*</span>
    <br>
    <input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
    <p></p>
    Message
    <span style="font-weight: bolder;">*</span>
    <br>
    <textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
    <p></p>
    <input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
    <p></p>
    <div style="text-align: center; max-width: 222px; width: 100%">
     <p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
     <p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
    </div>
   </form>
  </div>
 </div>
 <div class="clear"></div>
 <span class="widget-item-control">
  <span class="item-control blog-admin">
   <a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;ContactForm1&quot;));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" class="quickedit">
    <img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
   </a>
  </span>
 </span>
 <div class="clear"></div>
</div>