Submit Form with JavaScript — Vanilla JS Reference

<form id="contact">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button id="submit" type="submit">Send</button>
</form>
<p id="status"></p>

<script>
const form = document.getElementById("contact");
const submitBtn = document.getElementById("submit");
const status = document.getElementById("status");

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

  try {
    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      body: new FormData(form),
    });
    const data = await res.json();
    if (data.success) {
      status.textContent = "Thanks — your message is on its way.";
      form.reset();
    } else {
      status.textContent = data.message || "Something went wrong.";
    }
  } catch {
    status.textContent = "Network error — please try again.";
  } finally {
    submitBtn.disabled = false;
  }
});
</script>

Submitting a form with vanilla JavaScript means three things: intercept the submit event, POST via fetch, update the DOM based on the response. ~15 lines of code, no library, no framework. The pattern is the same whether your page is static HTML, React, Vue, or anything else — the form HTML and the JS handler don't care.

`form.addEventListener('submit', handler)` is the entry point. `e.preventDefault()` blocks the native form submission (which would navigate away from the page). `new FormData(form)` serializes every named field including file inputs. `await fetch(url, { method: 'POST', body: formData })` sends it.

Four states make the UI feel right: `idle` (the form is ready), `loading` (submission in flight), `ok` (success message visible), `err` (error message visible). Disable the submit button during `loading` so users can't double-click; re-enable on response (success or failure) in a `finally` block.

splitforms's `/api/submit` returns JSON: `{ success, message, submission_id }`. Parse with `res.json()`, check `data.success`, render the appropriate status. The endpoint sends permissive CORS headers so any frontend origin can POST without preflight gymnastics.

15 lines, no library, four-state UI, no page reload.