Submit Form with AJAX — Working Code for 2026

<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 type="submit">Send</button>
</form>
<p id="status"></p>

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

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

  try {
    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      body: new FormData(form),
    });
    const data = await res.json();
    status.textContent = data.success ? "Thanks!" : (data.message || "Error.");
    if (data.success) form.reset();
  } catch (err) {
    status.textContent = "Network error.";
  }
});
</script>

AJAX form submission means intercepting the form's native submit event with JavaScript, POSTing the form data via fetch (or XMLHttpRequest historically), and updating the DOM with the response — all without a page reload. The user sees an inline success or error message rather than the browser navigating to a new page.

Vanilla JS does this in 15 lines. `addEventListener('submit')` catches the submit; `e.preventDefault()` blocks the native form submission; `new FormData(form)` serializes the form fields; `fetch('/api/submit', { method: 'POST', body: formData })` POSTs them. Await the response, parse the JSON, update the status element. Done.

jQuery's `$.ajax` is the legacy equivalent — same mechanics, different syntax. If your codebase already uses jQuery, the jQuery version is fine. If you're starting fresh, use fetch — no dependency, native browser support since ~2017.

splitforms's `/api/submit` returns JSON: `{ success: true, message: 'Submission received' }` on success, `{ success: false, message: '...', code: '...' }` on error. Your UI logic is just `if (data.success) { ... }`. CORS headers are permissive so cross-origin POSTs from any frontend work without preflight gymnastics.

$("#contact").on("submit", function (e) {
  e.preventDefault();
  $("#status").text("Sending…");

  $.ajax({
    url: "https://splitforms.com/api/submit",
    method: "POST",
    data: new FormData(this),
    processData: false,
    contentType: false,
  }).done(function (data) {
    $("#status").text(data.success ? "Thanks!" : (data.message || "Error."));
    if (data.success) $("#contact")[0].reset();
  }).fail(function () {
    $("#status").text("Network error.");
  });
});

15 lines of vanilla JS, no library, inline status, no page reload.