AJAX / Fetch

Submit forms using vanilla JavaScript with the Fetch API. Framework-agnostic — works anywhere JavaScript runs.

JSON body

JavaScript
const res = await fetch("https://formfa.st/f/your_endpoint_id", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({
    name: "Jane Doe",
    email: "jane@example.com",
    message: "Hello from my site!",
  }),
});

const data = await res.json();
// { success: true }

Accept header

The Accept: application/json header tells FormFast to return a JSON response instead of an HTML redirect. Always include it for AJAX submissions.

FormData

You can also submit using FormData, which is useful for file uploads:

JavaScript
const form = document.querySelector("#my-form");

form.addEventListener("submit", async (e) => {
  e.preventDefault();

  const formData = new FormData(form);

  const res = await fetch("https://formfa.st/f/your_endpoint_id", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: formData,
  });

  const data = await res.json();
  if (data.success) {
    alert("Sent!");
    form.reset();
  }
});

Don't set Content-Type with FormData

When using FormData, do not set the Content-Type header manually. The browser needs to set it automatically to include the multipart boundary.

URL-encoded

JavaScript
const res = await fetch("https://formfa.st/f/your_endpoint_id", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    Accept: "application/json",
  },
  body: new URLSearchParams({
    name: "Jane Doe",
    email: "jane@example.com",
    message: "Hello!",
  }),
});

Error handling

JavaScript
try {
  const res = await fetch("https://formfa.st/f/your_endpoint_id", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(data),
  });

  if (!res.ok) {
    const error = await res.json();
    // error.error contains the message, e.g.:
    // "Too many submissions. Try again later."
    // "email is required."
    // "This form has reached its monthly submission limit."
    console.error(error.error);
    return;
  }

  const result = await res.json();
  // { success: true }
} catch (err) {
  // Network error
  console.error("Network error:", err);
}

CORS

FormFast endpoints support CORS from any origin. You can submit forms from any domain, including localhost. Preflight OPTIONS requests are handled automatically.

PreviousHugoNextForm Settings