A contact form is added in a blog or website so that our readers or visitors can contact us if they want to share anything important. Some times an unknown person will use that contact form to offer some services promoting their website, or selling some online stuffs.

During my entire blogging career, I was contacted many times about some outdated information on my website. I have another website about listings and the telephone number listed was already outdated, they contacted me using the form saying that I should remove the number already because they have a new one.

Some times a manager from a publisher program will also contact me offering to let their advertising codes be inserted on my site to earn some money. Others will just send some spam emails. The funny thing is, some times you will receive an email, sharing his personal problem or whatsoever.

But the important thing is, this original Blogger Contact From is for free and will allow you to send and receive unlimited emails. Unlike the other free contact forms offered by many websites, if you exceed their weekly or monthly quota because you are using their contact form for free then your emails will be in jeopardy.

For this post I will show you how to put the Blogger Contact from in a widget or gadget and you can even insert the form directly inside your blog page or article. Just follow the steps below and you will be able to do what I did.

The live example of this is found inside this blog's Contact Us page.

STEPS:

1. Go to Blogger Layout. Click on the "Add a gadget" link in the sidebar section, find and select Contact Form.

2. Now click "Pages". Name your page as "Contact Us" or whatever you like.

3. From Compose switch to HTML and then copy and paste the given code below inside the HTML area.
<div class="widget ContactForm" data-version="2" id="ContactForm1">
<div class="widget-title">
<h3 class="title">
Contact Form
</h3>
</div>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p></p>
Name
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<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>
</div>
</form>
</div>
</div>
</div>

4. When done, save your page. You will be seeing the image below if you done this tutorial correctly.


Or you can visit our Contact Us Page, click here.

If you want a live sample of the contact form inside the blog post, then see the form below, you can try to send an email using it. The email will be sent to us.

Contact Form

Name

Email *

Message *

 
 
 
Notes:

  • If you want to put the Contact form inside a blog post just copy the code given above and paste it in your post. Make sure to switch from Compose to HTML.
  • Do not remove the other contact form that we put in our sidebar, or else the contact form that we put inside our blog page and post will not work.