Using AJAX

Submit a form with JavaScript without reloading the page

You can submit a form with the browser’s built-in fetch API and show your own success or error state without reloading the page.

If you prefer a ready-made integration, use the FormBackend JavaScript include, which also supports Webflow success and failure elements.

HTML

<form action="https://www.formbackend.com/f/your-form-token" method="POST" id="contact-form">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

<p id="form-success" hidden>Thanks! We received your submission.</p>
<p id="form-error" hidden>We could not submit the form. Please try again.</p>

JavaScript

const form = document.querySelector("#contact-form")
const success = document.querySelector("#form-success")
const error = document.querySelector("#form-error")

form.addEventListener("submit", async (event) => {
  event.preventDefault()
  success.hidden = true
  error.hidden = true

  try {
    const response = await fetch(form.action, {
      method: "POST",
      body: new FormData(form),
      headers: { Accept: "application/json" },
    })

    if (!response.ok) throw new Error(`Request failed: ${response.status}`)

    form.reset()
    success.hidden = false
  } catch (requestError) {
    console.error(requestError)
    error.hidden = false
  }
})

Using FormData preserves file uploads and multi-value fields. Do not set the Content-Type header yourself; the browser adds the correct multipart boundary.

Keep native form validation attributes such as required, type="email", and input constraints. JavaScript should enhance the form rather than replace accessible browser behavior.