Friday, May 24, 2024
HomeBlogHow to Create a Stylish Contact Form for Blogger

How to Create a Stylish Contact Form for Blogger

A contact form gives your visitors an easy interface to send you a message right from your website. A contact page on the website offer better user experience too.

But for a newbie who is starting blogging in the Blogger platform is burdensome because Blogger doesn’t have features like WordPress. Blogger is not easily customizable and adding a contact form on the Blogger blog is a tough task.

Don’t worry here I will help you to integrate a contact form in your Blogger contact us page. I will provide a detailed guide to create a stylish blogger contact form.

In Blogger there are two ways to create a contact form; using an official Blogger widget or online form builder tool.

By default, Blogger provides you a contact form gadget which is an official blogger form.

Most of the Blogspot bloggers also take the help of the third-party sites to add a custom contact form on blogger. Here a contact page is created and code from the third-party site is embedded.

But before adding a contact form, you must know what is the difference in adding an official Blogger contact form and a custom contact form.

Benefits of Blogger Contact Form

  1. 100% Free, safe and no security issues.
  2. Easy to add on the blog.
  3. No need to add a separate page.
  4. You will get the message as soon as someone contacts you.
  5. The entire page is not reloaded for sending the message.
  6. Unlimited form submission

Benefits of Custom Contact Form

  1. A contact page is created to add a custom contact form that grows your brand.
  2. Makes your contact form more stylish.
  3. Easy to add multiple fields in your contact form.
  4. You can receive contact messages in any email address you want.

How to Add Custom Stylish Contact Form on Blogger?

Creating a contact page on blogger by inserting some script is done using an online form builder or form creator.

Contact form generator sites for blogger:

Follow these steps to create a contact form using JotForm.

Step1 – Sign up & go to the JotForms dashboard.

Step2 – Click the create form button.

JotForm dashboard

Step3 – Choose a method to create a form, you can build a form either from scratch or a template. You can import an existing form too. Here I am creating a form from scratch.

create a form from scratch

Step4 – Choose a form layout. You can start with Classic Form (all fields on one page) or Card Form layout (one field per page). Here I have selected a classic form layout.

contact form layout

Step5 – Click on Add Form Element and start adding fields for your contact form.

add fields on your contact form

Step6 – Under the Setting tab you can choose from language and many more.

Step7 – Finally when your contact form is completely built, click on Publish tab to publish your contact form.

Step8 – Click on the Platforms tab and select a blogger option.

blogger platform Jotform

Step9 – Copy & paste the code to add your form into the blogger. Finally, your custom contact form is visible on the contact us page.

contact form in Blogger

How to Create Contact Form using Official Blogger Widget?

Inside the Layout option, the gadget section has an official contact form gadget. You can use this contact form gadget only in a sidebar or footer but not in your contact us page.

Step1 – Click the Layout tab on your blogger dashboard.

Step2 – You can see an Add a Gadget box on the sidebar right section. 

blogger layout

Step3 – Clicking on Add a Gadget will bring you to a list of gadgets.

Step4 – You can see a Contact form gadget. Click on the “+” sign to add it.

blogger contact form

Finally, your contact form on the sidebar will look like this:

Contact form in sidebar

If you want to add a contact form in Contact Us page with official blogger contact form gadget then in the HTML editor of Contact Us page copy and paste the following HTML code.  


I hope this article helps you to know how to add contact us page in blogger. Make sure you have turned off the comment section on your contact us page.

For further reading, Blogger Adsense Approval Tips 2020

If you have any problem with blogger contact form like zero deliverability even after success message then try reinstalling the contact form widget.

Bipin Milan
Experienced Blogger with a demonstrated history of working in the e-learning industry. Skilled in Search Engine Optimization (SEO), Web Content Writing, WordPress, HTML, and Web Development. Strong marketing professional with a Bsc CS IT focused in Information Technology from Tribhuvan University, Institute of Science & Technology.


Please enter your comment!
Please enter your name here

Most Popular