How to show success message after submitting HTML forms with AJAX?

[Petter]

Hi! I’m trying to show a success/error message after submitting HTML forms with AJAX.

But something is wrong with my code…

HTML

<form
id="contact-form" 
name="contact" 
method="POST" 
data-netlify="true"
data-netlify-recaptcha="true">

*(some form fields...)*

<div class="submit-success" data-submit=""><p>Message sent!🎉</p></div>
<div class="submit-error" data-submit=""><p>Error.</p></div>
</form>

CSS

.submit-success {
    display: none;
}

.submit-success[data-submit="success"] {
    display: block;
}

.submit-error {
    display: none;
}

.submit-error[data-submit="error"] {
    display: block;
}

Javascript:

document
  .querySelector("form")
  .addEventListener("submit", handleSubmit);

const submitSuccess = document.querySelector('.submit-success')
const submitError = document.querySelector('.submit-error')

const handleSubmit = (e) => {
  e.preventDefault();
  let myForm = document.getElementById("contact-form");
  let formData = new FormData(myForm);
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    
    .then(() => { submitSuccess.setAttribute('data-submit', success); })
    .catch((error) => { submitError.setAttribute('data-submit', error) });
};

What’s wrong here?

Thanks🙏🏻

[perry]

hi there, did you see these guides already?

[Support Guide] My form renders with JavaScript but won't work properly

Last reviewed: August 2023 Fear not, there’s just a couple of extra things to make sure you have that will probably get things working! The most frequent cause of problems with JS forms is that you (or your static site generator) need to create an HTML version of your form to match your JavaScript version. Some frameworks like gatsby/react may do this automatically, but the important part is that the HTML version MUST match what your JS submits exactly: same form name, and field names. You mu…

[Support Guide] I don't see form submissions when using JavaScript

Last reviewed by Netlify Support on May 25, 2022 I have a form rendered using JavaScript, but it’s not submitting. What’s going on? There are a few things to consider when using JavaScript with a Netlify-handled form: If you have rendered your form using JavaScript and are not using a Static Site Generator (or, your generator does not render it down to HTML such as Gatsby does), you will need to make sure you have a hidden, pure HTML version of your form somewhere in your site. This means …

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

[Petter]

Yes, but i did not find a solution… My JS skills are very basic, so i don’t know how to fix this.

[hrishikesh]

Try this:

HTML:

<form
id="contact-form" 
name="contact" 
method="POST" 
data-netlify="true"
data-netlify-recaptcha="true">

*(some form fields...)*

<div class="submit-success"><p>Message sent!🎉</p></div>
<div class="submit-error"><p>Error.</p></div>
</form>

CSS:

.submit-success, .submit-error {
    display: none;
}

JS:

document
  .querySelector("form")
  .addEventListener("submit", handleSubmit);

const submitSuccess = document.querySelector('.submit-success')
const submitError = document.querySelector('.submit-error')

const handleSubmit = (e) => {
  e.preventDefault();
  let myForm = document.getElementById("contact-form");
  let formData = new FormData(myForm);
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    
    .then(() => { submitSuccess.style.display = 'block'; submitError.style.display = null; })
    .catch((error) => { submitError.style.display = 'block'; submitSuccess.style.display = null; });
};

Note, I’ve not checked the rest of your code, just fixed what you asked for. Let us know if you still need help.