3 Stylish FREE contact form for blogger [blogspot] | profesional

0 Shares

Hey BlogSpot fellows, looking to add a contact form for blogger/BlogSpot?

I think you are desperate to know how to add the contact us page or contact us section in BlogSpot blog like I was in my initial days of blogging.

Yes, I also started with BlogSpot only and I think I can understand your curiosity.

By respecting your curiosity I would like to move forward and like to address the solution in easy language.

So please read without skipping because here you are getting multiple ways of adding contact us page on blogger.

So keep reading and have fun.

Is it possible to add a form to a blogger?

This is very normal question which appears in every blogspot blogger’s mind. Is It even possible or not.

Because blogspot is not somehow advanced like WordPress but with small efforts, you can integrate stylish contact form on blogger blog.

Bonus: if you are switching to WordPress then here is the guide and one big gift as well.

On this amazing post, you are going to get not one, not two but 3 different ways of creating the free contact form for blogger.

These 3 types are,

Widget

Goggle form

HTML code

1. Widget

This is not about adding the contact us page. This is about adding a contact us section on blogspot blogs.

This is also a main part of blog and this will help your user to connect with you more than what actual page make.

Step1: To add contact us section on blogspot blog, first we need to login our blogger account from respective id.

Go to layout section,

contact form for blogger

Step 2: Generally we will add the contact us section on right sidebar or footer. Here add it on the right sidebar.

contact form for blogger

On blogger theme, most of the times there are two or three sidebar sections are available. It’s up to you where you want to add.

In this case, I will add it on A section which will appear at a top of the page.

Step 3: Click on add a gadget option and you will find out such sections.

contact us form for blogger

If you don’t get on first attempt then scroll down, you will get.

Step 4: Click on + icon and next page will look like this,

Just save this and check how it looks by visiting home page or any page.

In my case this is how it look like.

PS: This is one of my friend’s dummy website with “fastest theme”. In your case it may look different. You can change its color easily by customizing it.

This is a way of adding contact form for blogger. Let’s know how to how to make contact us page for blogger.

2. Google form

Most of we know what google form is. If don’t then this is one of the survey form which is widely used to collect the information or leads.

Although it does not look that much beautiful but it is completely free and easy to use so you can use it as a contact form.

Before using google form on your blog, make sure you know these cons of google form.

Cons of the google form

One of the biggest cons of the google form is, your every audience should have google active account and if anyone wants to connect you while using incognito mode then this form will not work.

Because of this reason, I don’t suggest you to go with google form but if you think you need more security and want only serious people to connect with you then this is good kind of form.

With google form, you are connecting with only serious people. You won’t get any spam mails.

The process of integrating google form on blogger page is very easy and tricky as well so make sure you will follow each step.

How to add google form to blogger

To add google form on blogger first you need to visit google form page. Simply click one below link and continue.

https://docs.google.com/forms/u/0/

Make sure you are not on incognito mode. And login from same account (email address) in which you want to get the every query from your audience in future.

The dashboard of the google form will look like this,

contact form for blogger

Step 1: Click on the + icon and create new form.

Now you will get this kind of by-default form interface.

contact form for blogger

On our contact us page we need 3 text boxes in order to collect email, name and reason of contacting us.

This page will already have 2 sections. Add one more to make it 3.

Step 3: Click on the + icon and add one more section. (check screenshot)

contact form for blogger

Now edit all these sections to make it as beautiful contact us page.

Step 4: Click on the “Multiple choice” dropbox and change to as mentioned below.

contact form for blogger

First, change its identity by clicking dropbox. Short answer to enter the name and paragraph will let them enter their query.

Mark each of them as required. If not then leave as default only.

contact form for blogger

You can change its skin color and make lot of different changes as well like header images and so on.

blogger contact form script

Till here we have completed our 90% of task and now we have to integrate this page on blogger.

To that simply click on send button which is beside of preview and settings.

Next window will look like this, go to < > look likesection which means html or code.

blogger contact form script

Step 6: Copy that html code and visit your blogger dashboard.

Create new page (not post) and change it as HTML format like this,

how to customize blogger contact form

Change it from text to HTML format.

how to customize blogger contact form

Paste whole script which we copied from google form.

how to customize blogger contact form

Publish it and check it from the frontend.

Google form has been integrated successfully on blogger blog.

Hope you liked this. If not then I have another kind of form which is more beautiful than google form and it is easier then google form.

Let’s know how to add creative contact us page.

3. Stylish contact form for blogger

This form is not by any third party, just copy the code from below and paste it on your page section (HTML section).

Blogger dashboard >> Pages >> Create New page >> Copy it from below and paste

(code)

<div id="custom_ContactUsFromForBlogSpotBlogger" 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>
Your Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Your 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>
Your 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("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&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>

Now save and watch it from frontend. You will get to know that integration of this form is quite easier than google form.

This is whole concept of adding contact us page on blogger.

QNA

How do I hide contact form in Blogger?

Visit you blogger dashboard >> layout >> contact form >> remove

Do I need a contact page?

Yes, To make your business legitimate, you need contact us page.

Final thought

Before wrapping up I would like to summarize what I have covered in this ”how to add contact form for blogger” article.

I basically explained how to contact us page or section on blogger blog which is quite difficult for many bloggers.

By reading this article you will get to know that you have 3 ways to implementing contact us page.

Hope this article will help you to design the beautiful contact us page for blogger blog.

If you have any query to ask then please comment below.

Please share and subscribe to get this kind of article in future.

Thank you. Have a good day 🙂

0 Shares

Leave a Comment

Copy link