Blog

Soumission de formulaire en AJAX : sans recharger la page

12 juillet 2026 · 4 min de lecture

Soumettez un formulaire HTML de façon classique, et le navigateur fait ce qu'il a toujours fait : naviguer vers une nouvelle page, ou recharger la page actuelle, en effaçant tout ce qui s'affichait un instant plus tôt. Pour un formulaire qui vit seul sur sa page, ce n'est pas grave. Pour un formulaire dans une fenêtre modale, un widget de chat, un tunnel d'achat, ou toute application mono-page, une navigation complète est une rupture brutale - la modale se ferme, l'application se remonte, la position de défilement disparaît. La soumission en AJAX - envoyer les données du formulaire avec fetch() plutôt que de laisser le navigateur naviguer - corrige cela, et ça tient en quelques lignes.

Pourquoi éviter le rechargement de page

Un rechargement complet de la page efface tout ce que JavaScript gardait en mémoire : une fenêtre modale ouverte, l'étape en cours d'un assistant, un état non sauvegardé ailleurs sur la page. Si le formulaire vit dans une arborescence de composants React, Vue ou Svelte, laisser le navigateur naviguer démonte aussi toute l'application côté client, qui doit se recharger de zéro.

Soumettre via fetch() conserve la page - et l'application qui y tourne - intacte. C'est vous qui décidez de la suite : afficher un message de succès en ligne, fermer la modale, réinitialiser les champs, rediriger par programmation si vous le souhaitez. C'est la différence entre laisser le navigateur décider et décider vous-même.

C'est une amélioration, pas une obligation

Vous n'avez pas à choisir entre les deux approches. Laissez les attributs action et method sur la balise <form> exactement comme pour un POST classique, et n'interceptez l'événement de soumission en JavaScript que lorsqu'il est disponible. Si un script ne se charge pas, si une extension interfère, ou si un visiteur a désactivé JavaScript, le formulaire fonctionne quand même - il revient simplement à une navigation de page normale au lieu d'un message de statut en ligne. C'est tout le principe de l'amélioration progressive : le cas de base, un formulaire HTML envoyé directement à https://formhook.app/f/{apiKey}, fonctionne toujours seul. JavaScript ne fait que le rendre plus agréable quand il est présent.

Un exemple minimal

Aucun framework nécessaire - voici tout le motif en JavaScript natif. Il empêche la navigation par défaut, envoie les données du formulaire sous forme de FormData, et affiche un message de statut selon le résultat :

const form = document.querySelector("#contact-form");
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: "POST",
    body: new FormData(form),
    headers: { Accept: "application/json" },
  });
  if (res.ok) {
    form.reset();
    document.querySelector("#form-status").textContent = "Thanks - we got it.";
  } else {
    document.querySelector("#form-status").textContent = "Something went wrong. Please try again.";
  }
});

Demandez du JSON, pas une redirection

Remarquez l'en-tête Accept: application/json dans l'exemple ci-dessus. Sans lui, un backend de formulaires conçu pour aussi servir des soumissions HTML classiques pourrait essayer de rediriger le navigateur vers une page de remerciement - un comportement correct pour un POST normal, mais inutile quand vous l'appelez depuis fetch(). Envoyer Accept: application/json indique à l'endpoint de Formhook que la requête vient de JavaScript, il renvoie donc une réponse JSON de succès ou d'erreur au lieu d'une redirection, et votre code peut se brancher sur res.ok comme dans l'exemple. Consultez la documentation pour le format exact de la requête.

N'oubliez pas l'accessibilité

Remplacer un message de statut avec textContent est invisible pour un lecteur d'écran, sauf si vous demandez au navigateur de l'annoncer. Ajoutez aria-live="polite" à l'élément de statut (celui que cible document.querySelector("#form-status") dans l'exemple), et les technologies d'assistance liront la mise à jour à voix haute dès qu'elle change - succès ou erreur - sans que le visiteur ait besoin de la retrouver et de la refocaliser lui-même. C'est un seul attribut, et c'est la différence entre un formulaire qui fonctionne pour tout le monde et un formulaire qui exclut discrètement les utilisateurs de lecteurs d'écran dès que JavaScript prend le relais.

Rien de tout cela ne nécessite de bibliothèque ni de SDK - un endpoint Formhook accepte un simple POST de formulaire depuis n'importe quel site, et la version fetch() ci-dessus n'est qu'une amélioration progressive facultative par-dessus, pas un prérequis. Consultez la documentation pour la référence complète des requêtes et réponses, et les tarifs pour les limites du niveau gratuit.

Vous utilisez un framework ? Retrouvez le guide pas à pas pour Next.js et Astro.

Mettez en ligne un formulaire fonctionnel en une ligne

Hébergé dans l'UE, soumissions conservées indéfiniment, notifications push sur tous les niveaux.

Commencer gratuitement

Sans carte bancaire · consultez la documentation