Submit forms with JavaScript (fetch)

Use fetch when you want to stay on the page and show your own success message. Ask for JSON and the endpoint answers with { "ok": true } instead of redirecting.

Send the form with FormData

This keeps your existing HTML form and works with any number of fields.

contact.html

<form id="contact" action="https://api.sitebackend.com/forms/YOUR_FORM_ID" method="POST">
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send</button>
  <p id="status" role="status"></p>
</form>
 
<script>
  const form = document.getElementById("contact");
  const status = document.getElementById("status");
 
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    status.textContent = "Sending…";
    const res = await fetch(form.action, {
      method: "POST",
      body: new FormData(form),
      headers: { Accept: "application/json" },
    });
    const result = await res.json();
    if (result.ok) {
      form.reset();
      status.textContent = "Thanks! We'll be in touch.";
    } else {
      status.textContent = result.error;
    }
  });
</script>

Because the form still has an action, it keeps working if JavaScript fails to load.

Send JSON

const res = await fetch("https://api.sitebackend.com/forms/YOUR_FORM_ID", {
  method: "POST",
  headers: { "Content-Type": "application/json", Accept: "application/json" },
  body: JSON.stringify({ email: "[email protected]", message: "Hello!" }),
});
const { ok, id, error } = await res.json();

Which errors should I handle?

Status	`error`	Suggested message
`400`	`Captcha verification failed`	Ask the visitor to complete the captcha again.
`403`	`This site is not allowed to submit to this form`	Add your origin in allowed origins.
`429`	`Too many submissions, try again shortly`	Ask the visitor to wait a minute.
`429`	`This form has reached its monthly submission limit`	Show a fallback contact method.

See the endpoint reference for everything the endpoint returns.