Skip to main content


By using AJAX, you can intercept the form-submission event, send the request to Form-Data using code, and then handle failure or success responses by showing a proper message to your user.

Below is a simple example for handling form submission using AJAX.

<h6>Contact form</h6>
<form id="contact-form" action=""
<label for="email">Email</label>
<input name="email" type="email" />
<label for="name">Name</label>
<input name="name" type="text" />
<label for="message">Message</label>
<textarea name="message" rows="4"></textarea>
<button type="submit">Submit</button>

const form = document.getElementById("contact-form");
form.addEventListener("submit", async event => {
event.preventDefault(); // prevent the browser from redirecting to the form's action url
const url = form.action;
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries())
// Run any form validation code here
const res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
body: JSON.stringify(data)
if (res.ok) {
alert('Form was submitted successfully')
} else {
alert('We could not accept your submission. Server returned ' + res.status)
// if you want to see the body use:
// const body = await res.json()


A few notes:

  1. The form's action property is set to the one that you get from Form-Data.
  2. The script can be placed anywhere after the form is already rendered.