Submit forms with JavaScript (AJAX)

Available on: All plans

You can use AJAX to submit your forms — this even works cross-origin. First create a new form in your dashboard. Then, in your form code, use an AJAX library to send your data as JSON. Be sure to set the Accept header to application/json so that the response comes back as JSON. 

This example uses vanilla Javascript.

<form id="my-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
<label>Email:</label>
<input type="email" name="email" />
<label>Message:</label>
<input type="text" name="message" />
<button id="my-form-button">Submit</button>
<p id="my-form-status"></p>
</form>
 

var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var status = document.getElementById("my-form-status");
var data = new FormData(event.target);
fetch(event.target.action, {
  method: form.method,
  body: data,
  headers: {
    'Accept': 'application/json'
}
}).then(response => {
  if (response.ok) {
    status.innerHTML = "Thanks for your submission!";
    form.reset()
  } else {
    response.json().then(data => {
    if (Object.hasOwn(data, 'errors')) {
      status.innerHTML = data["errors"].map(error => error["message"]).join(", ")
    } else {
      status.innerHTML = "Oops! There was a problem submitting your form"
    }
  })
}
}).catch(error => {
  status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)

This example uses the Axios HTTP library.

axios({
  url: 'https://formspree.io/f/YOUR_FORM_ID',
  method: 'post',
  headers: {
    'Accept': 'application/json'
  },
  data: {
    email: 'a.visitor@email.com',
    message: "Hello!"
  }
}).then((response) => { console.log(response); })

Here's the same example using jQuery. Note the dataType: "json" property, it's required to set the Accept header.

$.ajax({
  url: "https://formspree.io/f/YOUR_FORM_ID",
  method: "POST",
  dataType: "json",
  data: {
    email: "a.visitor@email.com",
    message: "Hello!"
  }
});

If you're using React, check out our React Library.