How to Create Contact Form For Blogger Website

In this Tutorial, I will show you how you can create a custom contact form that will work on all blogger templates, so you don’t need to worry about your template support.

Contact Form for blogger

In This Tutorial, We will use a third-party Contact form service 100forms, Which Provides online Responsive HTML Forms for our website.

With the help of 100forms, we can create stylish contact us form for our blogger website within minutes.

Creating Contact Form With 100Forms

Creating a Contact form with 100forms is very easy because 100forms provides drag-and-drop support to create forms, you just need to add elements by drag and drop and copy the source code.

Follow These Below Simple Steps to Create a Contact form for a blogger (Blogspot) that works-

Step 1. Go To 100Forms Website and Register Your Account.

Step 2. Now, Choose the Form Builder Option From Top Menu. (You can also choose the Premade forms.)

Step 3. Click on Create New Form and Add Your Required Questions (Fields).

Step 4. Make Sure to mark as Required Field of Name, Email, and Important Field like the below Image.

Contact form for blogger

Step 5. After Adding all Required Fields now Click on Generate HTML Form.

Html form for blogger
Step 6. Now Copy all HTML Codes and Paste them into Your Blogger Contact us page.

That’s it You Successfully Added a Contact form to your blogger website, and your form is now able to collect messages from users.

Important!Don’t Remove 100Forms Credit, Otherwise your forms will not work, and your account will be blocked.
We already discussed about how to hide in upcoming peragraphs.

Now, Let’s Change Form Settings like Where we will get submissions, from which emails we will get submissions, where the user is to be directed after submitting the form, etc.

Form Settings

To Change the Form Settings Click on Settings on your forms under my forms section as shown in the below image.

100forms change form setting

Here, Many Settings Options are available-

  • Common settings
  • SMTP settings – the Outgoing mail server for your form
  • Blocked by keywords and phrases – block repeated spam
  • Blocked IP addresses – block unwanted visitors
  • Autoresponder – send an automated message to your visitor
  • File Upload – receive files from your customers via your form
  • Signature pad – let site visitors sign your web form
  • PDF output – receive a PDF file automatically generated from your form

But We will only Discuss Common settings and Blocked by Keyword settings here.

Common Settings

1 Form Name:– Just to remember form, which form is used on which site or page.

2 Email- From Address:– No Need To Change Anything.

3 Subject:- Change Contact form Submission email subject like “Contact Form Message Received”

4 Return Address:- By Default, Users Will be redirected to the homepage after form submission so you can create a thank you page and redirect users after the submission.

5 Email-To Address:- Enter the email address where you want to receive submission messages.

Blocked by keywords and phrases

This is also one of the most important settings, with the help of this setting you can block particular paragraphs and words for your contact form.

For Example- Test, Any abusive words, etc.

How to Hide 100Forms Credit?

Now Many users want to hide or delete the 100forms credit but if we directly remove the credit then we will get an email from 100forms about it and our forms will not work.

For this issue, there is a simple trick so we can hide the credit.

Step 1. Add a Class name hidden on the Credit div tag like the below code-

<div style="float:right"><a href="" id="lnk100" title="form to email">form to email</a></div>

Replace this into

<div><a class="hidden" href='' id='lnk100' title='form to email'>form to email</a></div> 

Step 2. Now add the Below CSS Code to the page-

  .hidden{display:none !important} .invisible{visibility:hidden !important}</style>

If you are using plus UI blogger template then no need to add this CSS.

That’s it.

You Can also apply CSS to this form according to your choice.

Wrapping up

In This post, I explain how you can create a custom contact form for your blogger template which works on all templates without any error.

I hope you liked this post and if you have any doubts you can ask in the comment section.

Thank You

Sagar Vishnoi
Sagar Vishnoi
Articles: 20

Newsletter Updates

Enter your email address below to subscribe to our newsletter


Leave a Reply