HTML contact form with no backend

The complete form

Paste this into your page, replace the endpoint URL with your own, and you’re done. No dependencies, no bundler, nothing to install.

<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>

Everything above is standard browser API — FormData, fetch, JSON.stringify. It works in every browser released in the last several years.

What each piece is doing

`event.preventDefault()` stops the browser’s default form submission, which would navigate away to a URL your static host can’t handle.

`Object.fromEntries(new FormData(form))` turns the form into a plain object using the name attribute of each input. Name your inputs to match your field keys and there is no mapping code to write or keep in sync.

`Content-Type: text/plain` is the one non-obvious line. Sending application/json makes the browser fire a CORS preflight OPTIONS request first, and Apps Script web apps can’t respond to OPTIONS — so the request never happens. text/plain is a “simple” content type, which skips the preflight. The body is still a JSON string and the script parses it exactly the same.

The `_hp` input is a honeypot. It sits off-screen where no human will ever type into it, so anything that arrives with it filled in came from a bot. Those submissions are dropped without saving — and the response still says success, so the bot has no idea it was caught.

Where the data goes

Each submission becomes a row in a Google Sheet in your own Drive, with a submitted_at timestamp and one column per field. That’s a genuinely good place for contact submissions to live: you can sort and filter them, add a “replied?” column, share the sheet with a colleague, chart them, or pull them into anything that reads Sheets.

If you switch on email notifications, each submission also arrives in your inbox — sent from your own Google account, with the visitor’s email set as the reply-to address, so you can just hit Reply.

Making it production-ready

The snippet above works. These four additions make it hold up in the real world.

• Disable the button while sending — otherwise an impatient double-click writes two rows.

• Handle the failure path — wrap the fetch in try/catch and show a message with a fallback email address if it throws. Networks fail.

• Label your inputs properly — a real <label> per field, not just a placeholder. It’s better for screen readers, and it measurably improves completion rates.

• Add Turnstile if you get spam — the honeypot handles low-effort bots. For anything more determined, RG Forms can verify a Cloudflare Turnstile token server-side in your script before saving the row.

Common questions

More answers in the full FAQ.