How to Submit a Form with JavaScript fetch()

A plain HTML form does a full page navigation when you submit it: the browser POSTs the fields and loads whatever the server sends back. That's fine, but most of the time you'd rather keep the visitor on the page and show an inline "thanks" or, if something's wrong, an error next to the field that needs fixing. That's what submitting with fetch() gives you.

The catch is that fetch() is only the browser half. It still needs somewhere to POST to. This guide uses ShipMyForm as that endpoint so there's no server for you to write, but the pattern — intercept the submit, POST the data, handle the response — is the same wherever you send it.

The baseline: a plain form POST

Here's the starting point. It works with zero JavaScript, but it navigates away on submit.

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Submit it with fetch() instead

Add a submit listener, stop the default navigation with preventDefault(), and send the form's data with fetch(). The one important detail: send the header Accept: application/json so the endpoint replies with a JSON body instead of redirecting.

<form id="contact" action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

<script>
  const form = document.querySelector("#contact");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const res = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const data = await res.json();

    if (data.ok) {
      form.reset();
      // show your success UI
    }
  });
</script>

new FormData(form) collects every named input for you, and the browser sets the correct multipart/form-data content type automatically — including any <input type="file">. A successful submission comes back as { "ok": true }.

Handle the states: loading, success, error

A good submit UX disables the button while the request is in flight and tells the visitor what happened. Track a little state and reflect it in the DOM.

const form = document.querySelector("#contact");
const button = form.querySelector("button");
const status = document.querySelector("#status");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  button.disabled = true;
  button.textContent = "Sending…";

  try {
    const res = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const data = await res.json();

    if (data.ok) {
      form.reset();
      status.textContent = "Thanks — we'll be in touch.";
    } else {
      status.textContent = data.message ?? "Something went wrong.";
    }
  } catch {
    // Network error (offline, DNS, CORS). data never arrived.
    status.textContent = "Couldn't reach the server. Please try again.";
  } finally {
    button.disabled = false;
    button.textContent = "Send";
  }
});

Show per-field validation errors

This is where server responses earn their keep. If the form has validation rules, an invalid submission comes back as HTTP 422 with a fields object — field name to message. Render each one beside its input.

const res = await fetch(form.action, {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});
const data = await res.json();

if (res.status === 422 && data.error === "validation") {
  for (const [name, message] of Object.entries(data.fields)) {
    const field = form.querySelector(`[name="${name}"]`);
    field?.closest(".field")?.querySelector(".error")?.replaceChildren(message);
  }
  return;
}

Because these checks run on the server, they hold even when a client skips the browser's own required / type="email" validation — so the messages you show are backed by a real gate, not just a hint.

The response shapes to expect

Handle these three cases and you've covered a form:

The error code on the third row tells you what happened — for example rate_limited (with a retryAfter in seconds), origin, or too_large — so you can react in code instead of showing a generic failure.

A couple of gotchas

• Reserved fields. Name an input _replyto to set the reply-to on the notification email, _subject to set its subject, and add a hidden, empty _gotcha honeypot to catch bots. These are read, not stored as data.
• CORS. Cross-origin fetch() only works from origins the form allows. Add your site's domain to the form's allowed domains so the browser accepts the response; a request from an un-allowed origin is rejected.
• Don't forget name. FormData only includes inputs that have a name attribute. A field with no name is never sent.

Next steps

• Doing this in a component? See Next.js form handling.
• Add server-side rules: how to add validation to your form.
• New to the idea? Start with what a form backend is.
• Start free — 100 submissions a month, no card required.