blogger contact form
No Time To Read? Listen This Article!

To gain hands-on experience of blogging and to understand how it works many new bloggers use blogger to create new blogs.

Blogger provides opportunities for new bloggers to create a free blog and gain the perfect blogging experience.

Blogger Contact form is a page on a blog which is made so that visitors, advertisers or sponsors can contact the owner directly for their query or feedback.

Contact form, privacy policy and About pages are very important key factors for approvals of high-quality ads network like Adsense and affiliate programs.

These pages helps to build authenticity, trust  and genuity of the website hence are important for approvals.

But sadly new bloggers don’t give enough emphasis  to create a contact form, privacy policy and About pages or simply they don’t know how to make a contact form on blogger.

This article will address this issue and will teach how to add a contact form to blogger.

Method 1 :

Using blogger contact form widget :

Most of the new bloggers using blogspot find it difficult to make a “Contact Us” page  for their blog

Since unlike WordPress, blogspot does not support the use of plugins 

Some third-party sites like jotform,123formbuilder, foxyform etc provide a relatively easy solution by providing  source code to embed in HTML view of blogger

The “contact us” forms provided by third-party sites works but is not as reliable as using official  contact us gadget

Advantages of using contact Gadget :

1: when a response is submitted, whole pages does not need to be reloaded.

2: The delivery of the messages to you is very reliable, quick and responsive as it an official contact gadget.

3: contact gadget uses a really simple yet effective interface for visitors to use.

4: contact gadget can be customised according to your need if you know Cascade Style Sheet (CSS).

Let us now setup bloggers contact form widget :

Step 1: sign in to your Bloggers account, if you have multiple blogs on your account, choose the blog you need to add “Contact us” gadget.

blogger contact form not working
Bloggers Dashboard

Step 2: Navigate to Layout option.

hide blogger contact form
Bloggers Layout

Step 3: On the main panel  click on “Add a Gadget” button on located on the right side.

blog form
Add Gadget

This will open up a list of gadgets you can add to your blog.

Step 4: Scroll down and locate  “Contact form” which has a blue icon and click on the “+” button on the right side to add it.

contact form for website
Contact Form Widget

And that’s it ! your Bloggers contact form widget is added.

Method 2 :

Using Jotform contact form :

JotForm is used to create online form pages and publish them.

Forms created from jotforms are generally used for data collection .

The data posted on forms is sent via email to the owner.

Here we will use jotform as blogger contact form generator.

Jotforms FREE starter pack provides with :

  • 100 monthly form submissions
  • Unlimited reports, fields perform
  • 5 forms
  • 1,000 monthly form views
  • 100 MB available space
  • 500 stored forms
  • No HIPAA compliance
  • JotForm branding on form

Now let’s create a contact form using FREE starter pack from  JotForm :

Step 1: Make a free account on jotform by signing up.

blogger contact form
Jotform website

Step 2: Click on the “Create Form” green button located at the middle of the page.

blogger contact form not working
Create Form

Step 3: Select the middle option  “Use Template”.

blogger contact form code
Use Templates

Step 4: On left side of page, under types click on “Contact Forms”.

blogger contact form generator
Types => Contact Form

Step 5: Select “General Enquiry Contact Form” by clicking on “Use Template” below it.

blogger contact form widget
General Enquiry Contact Form

Tip ~ Use any other “Contact form” templates which best fits your needs and liking, we will be using “General Enquiry Contact Form” for simplicity purpose.

Step 6: Click on the “Add Form Element”.

blogger contact form spam
Add Form Element

In this section, you can more fields, extra texts. For example, I have added a phone number field for our extra requirements.

blogger contact form not sending
Add Phone no. Field

Step 7:  Use “From Designer” tab on the right side of the page to change the appearance!

blogger contact form widget not working
From Designer Tab

Use colour scheme to change the overall colour of the contact page.

blogger contact us form
colour scheme

Step 8: Jotforms also provides with an option to brand your website on the Contact form.

To add logo of your website to Contact Us page, click on “ADD YOUR LOGO” which is located above contact us page.

blogger contact form in a page
Add Logo

Click on the upload file field or drag-drop HD image of your logo.

blogger contact form html
Upload Logo

Adjust the alignment and it’s done! 

blogger contact number
Logo Alignment

Step 9: Click on setting tab.

Here you can set logical conditions of the form(effects like show hide fields),

Notifications to be sent via email to you, 

Integrate your contact form with MailChimp services and 

one can set auto-mail-responder response message who has contacted you using Contact form.

blogger contact form html code
Settings

Step 10:  Click on the “Publish” tab.

Under the “Publish” tab click on “PLATFORMS” located on left side.

contact form di blogger
Select Platforms

Select blogger platform from list.

membuat contact form di blogger
Select Blogger

On the next page, the code to embed will be displayed. 

Click on the green colour  “Copy code” button (code will be copied to your clipboard).

cara membuat contact form di blogger
Copy Code Button

Step 11: Now, its time to add our Contact form to blogger.

Open blogger dashboard,

Navigate to “Pages” page,

contact form email blogger
Bloggers Dashboard

Click on the “New Page”,

contact form for blogger
New Page

Change the view to HTML view by clicking on the ”HTML”  button,

blogger helpline number
HTML Mode

Paste the copied code in the HTML editor.

cara membuat contact us di blogger
HTML Editor

Step 12: Finally Publish your Contact Form.

To publish your Contact Form click on the orange button “Publish”.

html code for contact form for blogger
Publish

Conclusion :

Adding a contact page is very important in getting approvals for various affiliates.

Now you can make your blog more professional looking by adding “contact us” page.

You can now apply to various affiliate programs and ads network like Adsense with better confidence and start earning.

Comments

  1. I was thinking to create a blogger form. Thank you for sharing this article.

Leave a Reply

Your email address will not be published. Required fields are marked *