Abstract editorial illustration in deep blue, slate and warm neutral tones (description pending review)

How to Add a Free Contact Form to a Static Website (No Backend Required)

by
Checked by TNT Review — record TNT-TEST-2026-10-05-003, 5 October 2026. The downloaded form’s HTML was checked for the specific things that make it actually work and actually resist casual spam: a POST action pointing at Formspree, a real email input type, required fields, and a honeypot field — all 6 checks passed. This was not a live submission to a real Formspree account; see Verification for exactly what that does and doesn’t prove.

The problem

A static website (plain HTML/CSS, no server-side code) can’t normally process a form submission on its own — there’s nothing running on the server to receive it. Most guides either tell you to add a full backend (overkill for a contact form) or skip the spam-filtering part entirely, so the form works until bots find it.

Expected outcome

By the end of this guide you will have a working contact form on a static site, with no backend code of your own, and basic spam resistance, using Formspree’s free tier.

Requirements and costs

  • A static website (plain HTML files, any static site generator, GitHub Pages, Netlify, etc.).
  • A free Formspree account (formspree.io) — the free tier handles a limited number of submissions per month, enough for most small sites.
  • Cost: free, within Formspree’s free-tier submission limit.

Unfamiliar terms, explained

  • Static site — a website made of plain files with no server-side code generating pages on the fly.
  • Form backend/handler — a service that receives form submissions and does something with them (here: emails them to you), so your static site doesn’t need its own server code.
  • Honeypot — a hidden form field invisible to real visitors that spam bots often fill in anyway, letting the backend quietly discard those submissions.

Step-by-step implementation

  1. Create a free Formspree account at formspree.io and create a new form. Formspree gives you a form ID.
  2. Download the starter from the link below.
  3. Open contact-form.html and replace YOUR-FORM-ID in the action="..." attribute with your real Formspree form ID.
  4. Copy both files (contact-form.html‘s form markup and contact-form.css) into your site, or link the CSS file and paste the <form> block into an existing page.
  5. Publish your site and submit a real test message to confirm it arrives at the email tied to your Formspree account.

A real example

The form itself is five fields: name, email, message, a submit button, and one you never see — the honeypot:

<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

Real visitors never notice it because it’s hidden and skipped by keyboard tabbing; a simple bot that fills in every input field on the page fills this one too, and Formspree silently drops any submission where it’s non-empty.

Verification and troubleshooting

What we actually checked, on 5 October 2026 (record TNT-TEST-2026-10-05-003): the downloaded HTML was checked for a POST-method form, an action URL pointing at a Formspree endpoint, a required name field, an email-type input, a honeypot field, and a submit button — all 6 present. This confirms the form is built correctly; it does not confirm a message was actually received by a live Formspree account, since that requires your own account and form ID.

Troubleshooting:

  • The form submits but you never receive an email. Double-check you replaced YOUR-FORM-ID with your actual Formspree form ID, and check Formspree’s dashboard — new forms sometimes need one real test submission before Formspree finishes activating them.
  • You hit Formspree’s free-tier submission limit. That’s a Formspree account limit, not a bug in the form; either wait for the monthly reset or move to one of Formspree’s paid tiers, which raise that monthly submission cap.
  • The form looks unstyled. Make sure contact-form.css is actually linked from the page’s <head>, with a path that matches where you put the file.

Free vs. paid

Formspree’s free tier is genuinely usable for a small site’s contact form, not a crippled trial — the paid tiers add things like more monthly submissions, file uploads, and multiple forms per account, useful once your site needs more than a basic contact form.

What to do next

Add your own field validation styling (Formspree already enforces required at the browser level) and consider a redirect to a real “thank you” page after submission, which Formspree supports via a hidden _next field.

Free resources

The download contains the form HTML, its CSS, and a short setup README.

Download the contact form starter (ZIP, 2 KB)

Is there a paid version?

Not yet. This is the complete method. TNT Review has sold nothing to date and has no checkout, so any price we discuss in future should be read as a hypothesis, not an offer.

Leave a comment