I have an HTML form connected to [formsubmit.co](https://formsubmit.co/) form endpoint.

```
 <form action="https://formsubmit.co/my@email.com" method="POST" class="form">
     <input type="text" name="name" required>
     <input type="email" name="email" required>
     <button type="submit">Submit</button>
</form>

```

I've added `<input type="hidden" name="_next" value="https://mydomain.co/thanks.html">` to redirect back to the original page after submission is required.
I've also disabled the reCAPTCHA using `<input type="hidden" name="_captcha" value="false">`, so when the form is submitted, the page just reloads.

The problem is the user doesn't know anything has happened after form submission, the page just loads for some time and then reloads.
I don't want to create another page for this, I actually want to use a modal for it.

I tried adding a `submit` event listener, and when that event is triggered, an `alert` is shown; but the alert shows even before the form submission process begins.

```
function alertSubmit() {
  alert('Your details were successfully received.');
}

const form = document.querySelector('form');
form.addEventListener('submit', alertSubmit);

```

How can I display an `alert` immediately after the form is successfully submitted and not when the `submit` button is clicked?