Contact form in your blog is way to get in touch to you from the visitors in your blog if they want to ask a question from your content they will find the contact us page to your site or blog and write a message and send it to you. Contact form in blogger are already connected to your Gmail’s account, once the visitor’s wrote a message and send, you’ll be receive email message in your Gmail’s account, that’s the process.

In this time there have many ways to reach the admin in the blog, there have a social media profiles of the admin in the site. Why I need a contact form? Well because contact form is a website tradition, a common popular way to reach the admin, so why not to add contact form.

Most sites has contact form, so I recommend to add it, in this blogger tutorial for beginners series I will share how to add contact form in blogger page,

It’s a very simple steps, so let’s get started.

Preview in Blogger Template:

Step 1: Widget

First step we will add the contact form via widget, but we will hide it via CSS, the reason of this is because to get the contact form in page worked. If we didn’t add the contact form via widget the contact form in the page will not work, in short it will not send.

Go to Layout -> Add a Gadget -> and Add contact form widget, and put in the sidebar.

Now the contact form is in the sidebar, we will hide it via CSS (cascading style sheets), this is not a totally disappear, the contact form is there, but it be invisible.

Step 2: Hide the Contact form Widget

To hide the contact form widget, we will customize the template.

Go to Template -> Customize

As you see the screenshot below, navigate to Advanced, Add CSS and Save (Apply to Blog).

Add this CSS, and the contact form widget will be invisible.

#ContactForm1 {
 display:none;
}

Step 3: Add contact form in blogger page

Now the last step is to add the contact form in the page.

Go to Page -> New Page, and copy paste the code below, be sure your in html tab and save or update.

<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" rel="noopener">
    <img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
   </a>
  </span>
 </span>
 <div class="clear"></div>
</div>

And finally the contact form added in the page, visit the contact page in blog see the result, I definitely you test the contact form, if it is worked.