The best free contact form options for HTML websites

Two kinds of free

Free as a tier. A company hosts your submissions and gives away a slice of capacity — some number per month — hoping you’ll grow into a paid plan. Perfectly honest, and often the right choice: you get a real product with support, and the ceiling might be well above what you’ll ever use. But there is a ceiling, and there’s a bill on the other side of it.

Free because nothing is being hosted for you. The endpoint runs on infrastructure you already have. Nobody is paying to store your data, so nobody needs to charge you. This is how RG Forms works — the Apps Script and the Sheet sit in your own Google account, on Google’s free quotas.

Neither is better in the abstract. But when you’re choosing something for a site you’ll still be maintaining in three years, it’s worth knowing which one you picked.

The free options, and where each ceiling sits

For a plain HTML site specifically

If your site is literally files — no framework, no build step, no npm — you want an option whose integration is markup plus a small script, with no SDK and no bundler. FormSubmit and RG Forms both qualify; hosted services generally do too, since a form endpoint is a form endpoint.

The one to think twice about is a solution requiring a build step or a package, because on a site that has neither, you’ve just introduced a toolchain to collect an email address.

The whole thing, on a plain HTML page

No dependencies, no build, works when you open the file locally:

<form id="contact-form">
  <label>Name <input name="name" required /></label>
  <label>Email <input type="email" name="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>

  <!-- Honeypot: humans never see it, bots fill it in -->
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true" />

  <button type="submit">Send</button>
  <p id="form-status" role="status"></p>
</form>

<script>
  const ENDPOINT = "https://script.google.com/macros/s/AKfycb.../exec";
  const form = document.getElementById("contact-form");
  const status = document.getElementById("form-status");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    status.textContent = "Sending…";

    const res = await fetch(ENDPOINT, {
      method: "POST",
      // text/plain avoids the CORS preflight Apps Script can't answer
      headers: { "Content-Type": "text/plain" },
      body: JSON.stringify({
        tab: "contact",
        fields: Object.fromEntries(new FormData(form)),
      }),
    });

    const data = await res.json();
    status.textContent =
      data.result === "success" ? "Thanks — we'll be in touch." : "Something went wrong.";
    if (data.result === "success") form.reset();
  });
</script>

Common questions

More answers in the full FAQ.