How to Add Contact form in Blog? - Blogger

Contact form in your blog is a way to get in touch with you from your visitors if they need you or if they want to ask any question to you. Usually, every single site has a contact form. Now below, I will discuss how you can add a contact form in your Blogger or Blogspots site.

It's very easy!

Step 1: Add a contact form Widgets,

Go to the blogger dashboard, then go to Layout panel > Add Gadgets > Search Contact form and save it.

Step 2: Hide the contact form by using CSS,

Go to the blogger dashboard, then go to theme > customize > advance > add CSS > then paste the given code,

Copy Paste this Code:

#ContactForm1 { display:none; }

Step 3: Add Contact form on a Page,

Go to the blogger dashboard, then go to Page> Add new Page > Html > then paste the given code,

Html 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>

======================================================================

Congratulations, you're done!