How to Submit a Form with JavaScript fetch() (and Send It to Your Email)

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, and JavaScript cannot send email itself without exposing credentials in the page. This guide uses ShipMyForm as that endpoint: it emails you each submission server-side, so there's no server for you to write. The pattern — intercept the submit, POST the data, handle the response — is the same wherever you send it. For every other way of getting an HTML form to your email, including the no-JavaScript version, start there.

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. If you are already staring at one, fixing a CORS error on a form submission walks through what the message actually means.
• Don't forget name. FormData only includes inputs that have a name attribute. A field with no name is never sent, which is the single most common reason a form submits and arrives empty — paste your markup into the HTML form checker if that is what you are seeing.

Next steps

• Doing this in a component? See Next.js, Vue or SvelteKit — each wires the same request into that framework's state.
• Add server-side rules: how to add validation to your form.
• New to the idea? Start with what a form backend is.
• Start free — 250 submissions a month, no card required.