How to add a contact form to a static website (without a backend)

Static websites are fast, cheap and secure because there’s no server code running. That’s also why the humble contact form is the first thing to break: an HTML form needs something to send its data to.

Here are the realistic ways to solve it, from most to least effort.

Why forms don’t work on static hosts

When someone submits a form, the browser sends the data to the URL in the form’s action attribute. On a traditional server, a PHP or Node script at that URL reads the data and emails it to you.

Static hosts just serve files. Post to them and there’s nothing listening. You need a service that accepts the submission for you.

Option 1: Run your own backend

Write a small API (Node, Python, a serverless function) that receives the POST, validates it, stores it and sends an email through an email provider.

Pros: full control. Cons: you now maintain a server, email deliverability, spam protection and secrets — for a contact form.

Option 2: A mailto: link

<form action="mailto:you@example.com"> opens the visitor’s email app. It’s unreliable (many people don’t have a desktop mail client configured), exposes your email address to scrapers, and you get no record of submissions.

Option 3: An embedded form from a form builder

Tools like Google Forms or Typeform give you an embeddable form. Easy, but it won’t match your site’s design and adds third-party scripts.

Option 4: A form backend service

A form backend gives you an endpoint URL to use as your form’s action. Point your HTML at it and it stores and emails submissions.

Option 5: Forms built into your host

If your host has forms built in, you don’t need anything extra. On StaticHero:

<form action="/_forms/contact" method="POST">
  <label>Name <input name="name" required></label>
  <label>Email <input name="email" type="email" required></label>
  <label>Message <textarea name="message"></textarea></label>
  <input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  <button>Send</button>
</form>

That’s the whole integration:

• The form name (contact) comes from the URL, so you can have as many forms as you like.
• Each submission appears in your dashboard and is emailed to you.
• The reply-to header is set to the visitor’s email, so you can just hit reply.
• _gotcha is a honeypot: hidden from people, but bots fill it in and get silently discarded.

Sending visitors to a thank-you page

Add a hidden field:

<input type="hidden" name="_redirect" value="/thanks.html">

Or set a redirect URL in the form’s settings.

Submitting with JavaScript

For a smoother experience, submit with fetch and show a message without leaving the page:

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form),
  });
  const { ok } = await res.json();
  form.replaceWith(ok ? "Thanks — we’ll be in touch!" : "Something went wrong.");
});

Keeping spam out

A layered approach works best:

1. Honeypot fields catch simple bots.
2. Rate limits stop floods from a single source.
3. Content checks flag submissions stuffed with links.

StaticHero applies all three automatically. Anything flagged goes to a spam folder instead of your inbox, so you can still rescue false positives.

Sending submissions to other tools

On Pro and Business, each form can forward submissions to a webhook (Zapier, Make, n8n, Slack, your own API) or create rows in an Airtable table. It’s an easy way to turn a static site into a lightweight lead-capture system.

The takeaway

You don’t need a server for a contact form. You need somewhere for the data to go — ideally one that already knows who you are, where to email you and how to keep the bots out.