How to Add an HTML Email Contact Form in Blogger

Blogger (Blogspot) is a fully hosted platform — there's no server-side PHP available, no way to install plugins, and the built-in contact gadget is limited and often breaks after theme updates. Despite this, you can add a fully functional contact form that emails you on every submission, with spam protection, using only HTML. This guide shows you exactly how.

What Blogger does and doesn't support

Blogger hosts your blog on Google's infrastructure and renders your theme templates. You can customise the HTML and CSS of your theme, and you can embed raw HTML into individual pages and posts. What you can't do:

• Run PHP, Python, or Node scripts
• Install server-side plugins
• Use mailto: reliably — it opens the visitor's local email client, which many people don't have configured
• Use client-side email APIs safely — secrets in JavaScript are visible to anyone

The solution is a standard HTML form that posts to an external endpoint. The endpoint runs on someone else's server; your Blogspot theme just needs to contain the form HTML.

Step 1: Create your form endpoint

1. Sign up for MyFormCapture — there's a free plan to start
2. Create a new form and give it a name (e.g. "Blog contact form")
3. Go to Notifications and add your email address to receive alerts for new submissions
4. Enable spam protection (honeypot is sufficient for most blogs)
5. Copy the form endpoint URL

Step 2: Add the form to a Blogger page

The easiest way is to create a dedicated Contact page:

1. In your Blogger dashboard, go to Pages → New Page
2. Give the page a title (e.g. "Contact")
3. Switch the editor to HTML view (the icon in the toolbar)
4. Paste the form code below
5. Publish the page

<form action="https://myformconnect.io/f/YOUR_FORM_ID" method="POST" style="max-width:500px;">

  <p>
    <label for="cf-name"><strong>Name</strong></label><br />
    <input id="cf-name" name="name" type="text" required
           style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;" />
  </p>

  <p>
    <label for="cf-email"><strong>Email address</strong></label><br />
    <input id="cf-email" name="email" type="email" required
           style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;" />
  </p>

  <p>
    <label for="cf-message"><strong>Message</strong></label><br />
    <textarea id="cf-message" name="message" rows="6" required
              style="width:100%; padding:8px; border:1px solid #ccc; border-radius:4px;"></textarea>
  </p>

  <input type="hidden" name="_redirect" value="https://yourblog.blogspot.com/p/thank-you.html" />

  <p>
    <button type="submit"
            style="padding:10px 24px; background:#3b82f6; color:#fff; border:none; border-radius:4px; cursor:pointer;">
      Send message
    </button>
  </p>

</form>

The inline styles are there because Blogger themes often don't style form elements by default. Once you confirm the form works, you can move the styles to your theme's CSS if you prefer.

Setting up a thank-you page

Create a second Blogger page titled "Thank you" and set its URL to something like /p/thank-you. Update the _redirect hidden field in the form to point to its full Blogspot URL. This page should simply confirm the submission was received and offer a link back to the blog.

Confirming email notifications work

1. Publish the contact page and visit it
2. Fill in the form with a real email address you can check (not a test address — spam filters may flag it)
3. Submit and confirm you're redirected to your thank-you page
4. Check your inbox — allow a minute or two on the first send
5. Check spam or junk if it doesn't arrive, and mark it as not spam
6. Check the submissions dashboard to confirm the entry is there

Spam on public Blogger blogs

Blogspot blogs indexed by search engines will attract form spam relatively quickly. Enable honeypot protection in your form settings before promoting the contact page. If spam becomes a persistent problem, turn on content scoring or rate limiting — both are available in the form settings without any code changes.

A working contact form on Blogger

Once the form is in place and you've done a successful test submission, there's nothing else to maintain on the Blogger side. The form HTML sits in your page and posts to the endpoint; submissions accumulate in the dashboard and arrive in your inbox. If you ever want to add Telegram or Discord notifications later, that's a settings change on the endpoint — no edits to the Blogger theme required.

The one thing to keep an eye on is spam, particularly if the blog has good search visibility. Enable honeypot protection from the start and revisit the settings if spam submissions start getting through.

Related guides

• Collecting form submissions on a static website
• Send HTML form data to email without PHP