How to add Contact form in blog

Blogger finally released it's own Contact Form gadget/widget! Hence, you no longer have to rely on third-party services for a contact form.

This "official" Contact Form widget from Blogger is robust and easy-to-implement. It will beautifully fit into your blog's sidebar.

Why add a Contact Form?

To get feedback, You should always give your visitors an easy way to contact you. By adding a Contact Form, your visitors can contact you directly from your blog itself!

If you are passionate about blogging, it's needless to say that your visitors' suggestions, questions and feedback should be invaluable to you!

Steps to implement:

1. Go to your blogger dashboard >> Layout.

2. Click on Add a Gadget >> select More Gadgets from the left-menu.

3. Click on Contact Form (Mostly it will be the first result).

Blogger Contact Form New!

4. Enter a suitable title and hit Save!

Configure Contact Form Widget

5. Now drag the widget wherever you want. You're done!

How the Contact Form works

The Contact Form has the following input fields: Name, Email and Message. It also has validations which means that if someone doesn't enter the Email or the Message, the form will give an error.

The moment a visitor clicks the "Send" button, all the admins of the blog will automatically get the mail.

Since the message is sent to you in the form of an e-mail, you can reply from your inbox itself!

Advantages of THIS Contact Form

It's officially from Blogger! You don't have to use any third-party code.
You don’t have to reveal your email address on the web.

How to Add this  Contact form on Blog Page
You have learned how to add Blogger's Contact Form to your blog's sidebar.
Now I will teach you how to embed that exact same contact form in  page

 Once you have added the widget to your blog's sidebar, copy the following code:

<form name="contact-form" style="text-align: center;">
<div>
Name: </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />
<div>
Email *</div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<div>
Message *</div>
<div style="text-align: center;">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</div>
<div>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

</div>
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Paste it wherever you want the Contact Form to appear.

See DEMO Here.

Now you need to Hide contact form from sidebar.

How To Hide contact form from The Sidebar Widget

Go to your blogger dashboard >> Template >> Edit HTML Find the following piece of code:

]]></b:skin>

Paste the following code directly above/before ]]></b:skin>

#ContactForm1{display: none !important;}

and you're done!

Note: 

Widget will still appear in your sidebar.Do not delete contact form widget from sidebar.