How to Add a Custom Contact Form to Blogger

If you're using Blogger and want your readers to contact you easily, adding a custom contact form is a smart move.

The default Blogger contact form widget is simple, but not very flexible. It can only go in the sidebar and doesn’t look professional. A custom contact form gives you more control—it looks better, can sit anywhere on the page, and helps you collect messages directly to your email.

In this guide, you'll learn:

Why a custom contact form is important
How to create one for free
How to add it to any page on Blogger
Step-by-step instructions (no coding skills needed)

Let’s get started.

Why You Need a Contact Form on Your Blogger Site

A contact form helps your readers:

Ask questions
Request services or partnerships
Send feedback privately
Reach out for collaborations

It also shows AdSense that your blog is professional and trustworthy, which improves your chances of approval.

Method 1: Add a Simple HTML Contact Form Using Google Forms

Google Forms is free and easy to use. Here's how to create a basic contact form with it:

Step 1: Go to Google Forms

Visit forms.google.com and log in with your Google account.

Step 2: Create a New Form

Click the blank form (+ sign)
Title it “Contact Form”
Add fields like:
- Name (Short Answer)
- Email (Short Answer)
- Message (Paragraph)

You can add more fields if needed, like “Subject” or “Phone Number.”

Step 3: Customize Your Form

Click the paint palette icon to change colors
Click the gear icon to make sure responses go to your email
Disable “Require sign-in” so anyone can submit

Step 4: Get the Embed Code

Click “Send”
Choose the embed icon (< >)
Adjust the width to 100% and height to around 600px
Copy the embed code

Step 5: Add It to a New Blogger Page

Go to your Blogger dashboard
Click “Pages” > “New Page”
Title it “Contact Us”
Click “HTML” view (not Compose view)
Paste the embed code
Click “Publish”

Now you have a beautiful contact form on its own page!

Method 2: Add a Custom HTML Form (With Email Notification)

If you want a form that sends messages directly to your email (without using Google Forms), you can use FormSubmit or Formspree—free tools that work with pure HTML.

Step 1: Copy the HTML Form Code

html
<form action="https://formsubmit.co/your-email@example.com" method="POST">
  <input type="text" name="name" placeholder="Your Name" required><br><br>
  <input type="email" name="email" placeholder="Your Email" required><br><br>
  <textarea name="message" placeholder="Your Message" required></textarea><br><br>
  <button type="submit">Send Message</button>
</form>

Replace your-email@example.com with your real email address.

Step 2: Add It to a Blogger Page

Go to your Blogger dashboard
Click “Pages” > “New Page”
Switch to HTML view
Paste the code
Click “Publish”

Now your form will send messages straight to your email.

Optional: Style Your Contact Form with CSS

To make your form look better, add a little CSS style.

Sample CSS:

html
<style>
  form {
    max-width: 400px;
    margin: auto;
  }
  input, textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    box-sizing: border-box;
  }
  button {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
</style>

Place this style code above the form HTML inside the same page.

Method 3: Use a Third-Party Tool Like 123FormBuilder

123FormBuilder lets you build drag-and-drop forms and add them to Blogger using an embed code.

Go to 123formbuilder.com
Create your form
Get the embed code
Paste it into your “Contact Us” page (HTML view)

Free plans are limited, but they offer nice designs and basic form features.

How to Link the Contact Page in Your Menu

Once your form is added to a page, you need to make it easy for visitors to find.

Step 1: Go to Blogger > Layout

Step 2: Edit your Navigation/Menu widget

Step 3: Add a new link

Name: “Contact”
URL: Paste the link to your contact page

Step 4: Save changes

Now the Contact page will appear in your blog’s main menu.

Bonus Tips for Your Contact Page

Add a short message above the form like:

"Have a question or feedback? Fill out the form below and I’ll reply within 24 hours."
Include other contact options:
- Email address
- Social media links
- WhatsApp (if you prefer direct chat)
Keep it simple. Avoid asking for too much information.

Common Problems (And How to Fix Them)

Problem	Solution
Form not showing	Check if you’re in HTML view, not Compose view
Messages not coming through	Make sure email is correct and not blocked
Form looks messy	Add basic CSS styles or use Google Forms
Submit button does nothing	Ensure the form action URL is correct (no typos)

Final Thoughts

Adding a custom contact form to your Blogger site helps you connect with readers, improves trust, and boosts your blog’s professionalism.

Whether you use:

Google Forms
HTML + FormSubmit
123FormBuilder
...you can set up a working, clean contact page in minutes.

And most important—it helps with AdSense approval by showing your blog is a real, active site with user interaction.

ads

How to Add a Custom Contact Form to Blogger

Why You Need a Contact Form on Your Blogger Site