Sending a form on webhook + on a confirmation page - html

Question

Here is the problem I have:
When validating my form I would like to :
1- Send the form information to a Webhook (to process the information) I would like it to be invisible for the user
2- Redirect the user to a confirmation page (or display a confirmation message on the form)
Here is my current form that only sends the info to the webhook:
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="submit" class="btn">RECEVOIR LE KIT COMPLET</button>
I don't know if it's adjustable with Javascript or just HTML...
Thanks for your help :)

Answer 1

You can change your button type to "button" and then add a handler to that button to POST the data. In the example below I modified your code to do that and use fetch to POST the data to the endpoint.
Inside the ".then" part is the callback (this does not get execited until you receive the response from the fetch). This is where you would display the dialog to the user or redirect them to another page.
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" id="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" id="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="button" class="btn" id="btn">RECEVOIR LE KIT COMPLET</button>
</form>
<script>
const getButton = document.getElementById('btn');
const getFirstName = document.getElementById('first_name');
const getEmail = document.getElementById('email');
fetch('https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/', {
method: 'POST',
body: new URLSearchParams({
first_name: getFirstName.value,
email: email.value
})
})
.then(response => {
// Do stuff with the response
});