Formpost

Recipes

Submit without leaving the page

Post with fetch and render your own confirmation.

The pattern behind every framework guide, without a framework. Three things matter: prevent the default navigation, send Accept: application/json, and read success from the response.

contact.html
<form id="contact">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send message</button>
</form>
<p id="status" role="status"></p>
contact.js
const form = document.querySelector("#contact");
const status = document.querySelector("#status");

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

  const body = new FormData(form);
  body.append("access_key", "YOUR_ACCESS_KEY_HERE");

  try {
    const res = await fetch("https://api.formpost.ai/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body,
    });
    const result = await res.json();
    status.textContent = result.message;
    if (result.success) form.reset();
  } catch {
    // Network failure, not a rejected submission — say so honestly.
    status.textContent = "Could not reach the server. Please try again.";
  }
});
Posting FormData rather than JSON is deliberate: it carries files, and it keeps repeated field names (checkbox groups) that JSON.stringify would silently collapse.