Formulaire de contact sans rechargement de page (fetch)
Par Maxime Branger · Publié le
Pourquoi ajouter du JavaScript
Un formulaire HTML classique renvoie le visiteur vers une autre page après l'envoi. Avec fetch , la page ne change pas : vous affichez vous-même la confirmation, et le formulaire se vide. Ce tutoriel part du formulaire du tutoriel Formulaire de contact HTML sans PHP ni serveur (tutoriel 2026) . Si vous n'avez pas encore d'URL AirMess, commencez par là.
Étape 1 : le formulaire
Le formulaire est le même, avec un id pour le retrouver et un paragraphe role="status" qui accueillera les messages :
<form id="contact-form" action="https://airmess.fr/api/submit/VOTRE_TOKEN" method="POST">
<label for="name">Nom</label>
<input id="name" name="name" type="text" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Envoyer</button>
<p id="contact-status" role="status"></p>
</form>Étape 2 : envoyer avec fetch
Juste avant </body> :
<script>
const form = document.querySelector('#contact-form');
const status = document.querySelector('#contact-status');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const button = form.querySelector('button');
button.disabled = true;
status.textContent = 'Envoi en cours…';
try {
const res = await fetch(form.action, {
method: 'POST',
body: new FormData(form),
});
if (!res.ok) throw new Error(String(res.status));
form.reset();
status.textContent = 'Merci, votre message a bien été envoyé.';
} catch {
status.textContent = "L'envoi a échoué. Réessayez dans un instant.";
} finally {
button.disabled = false;
}
});
</script>new FormData(form) envoie tous les champs du formulaire, y compris le jeton d'un éventuel CAPTCHA. Le role="status" fait lire le message de confirmation aux lecteurs d'écran, et le bouton désactivé pendant l'envoi évite les doubles soumissions.
Sans JavaScript (script bloqué, erreur de chargement), le formulaire reste fonctionnel : le navigateur retombe sur l'envoi classique.
En cas de problème
Si fetch échoue avec une erreur 403 dans la console, votre domaine n'est pas dans la liste des origines autorisées du formulaire. Pensez-y aussi pour vos tests en local. Pour bloquer les robots, activez hCaptcha dans les réglages du formulaire.