The Quickest & Easiest Way to Add Contact Form in Blogger

welcome to the TutBig today I will show you the Easiest Way to Add Contact Form in Blogger According to me, you should have seen some statistics of the blog and contact us widget. If an advertiser visits the advertise with us page, he/she will use the contact form to contact the blogger.

Easiest Way to Add Contact Form in Blogger

This tutorial includes three steps. But don't worry, it isn't hard, all you need to do is follow each and every step carefully and you can easily set up a contact us page in your Blogger blog.

Adding the contact form to the sidebar

To add the contact form to your pages like " contact us ", " advertise with us ", we need to add the contact form to the sidebar and later move it to the page we need.

1. Go to Blogger.com and click on the layout of your desired blog.

2. On the sidebar, Click on Add a gadget.

Easiest Way to Add Contact Form in Blogger

3. Scroll down and click on 'Contact Form'.

4. Click on save.

you have successfully added a Contract form to the sidebar of your blog and this is the time to move it away from the sidebar.

Hiding the contact form

With Blogger, we don't have any option to move widgets from the sidebar to Pages.

In WordPress, there are many plugins like Contact form 7, which gives you shortcodes and you can paste the shortcode anywhere in your blog and the contact form appears.

So, We will hide the contact form from the sidebar and move it away into Pages.

1. Go to Blogger.com and click on the template.

2. Click on Edit HTML.

3. Search for ]]</b:skin>

4. Just above the ]]</b:skin>, paste the below code :

div#ContactForm1 {
display: none !important; }

The code is written on CSS and it will tell Blogger not to display the widget named ( Contact form ). As we have already added the contact form in the step-1, it would be automatically hidden.

Add contact us page in Blogger

Now, We will add the contact form to blogger pages.

Go to blogger.com and click on pages and click on Add new
Give the page a title like Contact Us or me
Click on HTML of the page editor, Paste the below code in the content box.

<div id="custom_ContactForm1"class="widget ContactForm"><div class="contact-form-widget
<p>Get in touch with us by fillinout the form below.</p><div class="form"><form name="contact-form"><p></p>Name<br><input type="text" value="" size=
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=
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_con
form-email-message" cols="25"class="contact-form-email-
message"></textarea><p></p><input type="button" value="Sen
id="ContactForm1_contact-form-
submit" class="contact-form-butt
contact-form-button-submit"><p></p><div style="text-align: center; m
width: 222px; width: 100%"><p id="ContactForm1_contact-for
error-message" class="contact-f
error-message"></p><p id="ContactForm1_contact-for
success-message" class="contac
form-success-message"></p></div></form></div></div><div class="clear"></div><span class="widget-item-contro
<span class="item-control blog-
admin"><a title="Edit"target="configContactForm1"onclick="return
_WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//
www.blogger.com/rearrange?blogID=8799058979810298021&wi
ContactForm&widgetId=ContactFaction=editWidget&sectionId=sidright-1" class="quickedit"><img width="18" height="18" srcimg1.blogblog.com/img/icon18_wrench_allbkg.png" alt=""</a></span></span><div class="clear"></div></div>

Advantages of this Contact form

No fear of anything: Some bloggers use third-party widgets to add contact us page in Blogger. But they aren't considered safe.

They might contain some virus or affect blog load time. This widget if officially provided by Google. So no need for worrying.

Fully customizable: If you know CSS language, you can easily change colors, styles, and Sizes.

Avoid Spammers: Actually, providing our email directly in the blog is dangerous. If a hacker knows you Email, He will contact you in the name of Blogger and in his mail, he writes that, Login to your blog to resolve issues, etc.

When you click on the link, you will land on a page that exactly looks like Blogger and when you enter your login details, The hacker can get your login details and can easily log in to your blog.

With the contact form, No one can see your email, so there is no risk involved using the Contact form.

I hope you enjoy this post and the photos. Easiest Way to Add Contact Form in Blogger