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.