L'utilisateur clique sur envoyer. Que se passe-t-il ensuite ? Le navigateur envoie les données au serveur. Le serveur les traite. Et après ? La page se recharge-t-elle ? Quelque chose s'affiche-t-il sur la page ? L'utilisateur est-il redirigé ailleurs ?
La gestion de l'envoi d'un formulaire fait le lien entre le frontend et le backend. Si elle est mal faite, l'utilisateur est perdu. Si elle est bien faite, l'expérience paraît fluide et voulue. Cet article présente les différentes façons de gérer l'envoi d'un formulaire.
Envoi classique d'un formulaire
Dans un envoi classique, le navigateur envoie les données du formulaire au serveur grâce aux attributs action et method du formulaire.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Envoyer</button>
</form>
Quand l'utilisateur clique sur le bouton, le navigateur encode les données du formulaire et les envoie à /submit. Le serveur les traite et répond par une nouvelle page. Le navigateur charge cette page. L'utilisateur voit une nouvelle URL et un nouveau contenu.
L'envoi classique est simple, fonctionne partout et sans JavaScript. Son principal inconvénient est que la page se recharge, ce qui paraît lent même quand ce n'est pas le cas, fait perdre à l'utilisateur sa position de défilement et vide les champs du formulaire.
Envoi de formulaire avec redirection
Une fois le formulaire traité, le serveur redirige en général l'utilisateur vers une page de confirmation ou vers le formulaire.
Côté serveur, après le traitement du formulaire, utilisez return redirect('/thank-you'), qui envoie une réponse de redirection HTTP 303 : le navigateur suit la redirection et charge la page /thank-you, où l'utilisateur voit un nouveau contenu à une nouvelle URL. L'avantage est que l'utilisateur sait que le formulaire a été traité, et qu'une nouvelle page montre clairement qu'il s'est passé quelque chose. L'inconvénient est que la page se recharge et demande deux requêtes au serveur (une pour l'envoi, une pour la cible de la redirection), ce qui rend l'expérience plus lente que nécessaire.
Envoi de formulaire en AJAX
AJAX (Asynchronous JavaScript and XML) permet d'envoyer les données du formulaire sans recharger la page, avec form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Formulaire envoyé avec succès'); form.reset(); } });. Le navigateur envoie les données avec _blocked_, le serveur les traite et répond, et le JavaScript reçoit la réponse et met à jour la page, sans rechargement ni redirection. L'utilisateur reste sur la même page mais voit une confirmation. L'avantage est que c'est rapide, fluide, sans rechargement, et que vous contrôlez tout ce qui se passe ensuite. L'inconvénient est que cela demande JavaScript : si JavaScript échoue, le formulaire ne part pas, l'historique n'est pas mis à jour (l'URL reste la même) et vous devez gérer vous-même tous les retours à l'utilisateur.
Amélioration progressive avec AJAX
L'amélioration progressive signifie que le formulaire fonctionne sans JavaScript mais fonctionne mieux avec. Commencez par un formulaire classique qui marche sans JavaScript : il s'envoie et la page redirige vers un message de remerciement. Ensuite, si JavaScript est disponible, interceptez l'événement d'envoi avec addEventListener en utilisant if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } pour envoyer en AJAX à la place et afficher un message sur la même page. Le formulaire fonctionne alors dans les deux cas. Avec JavaScript, il s'envoie en AJAX et l'utilisateur reste sur la page. Sans JavaScript, il s'envoie de façon classique et redirige. L'avantage est que le formulaire marche pour tout le monde : ceux qui ont JavaScript profitent de l'expérience fluide, et les autres peuvent quand même envoyer le formulaire. L'inconvénient est plus de code, car il faut maintenir les deux chemins d'envoi.
Gérer les erreurs d'envoi
Quand le serveur rejette un envoi (validation échouée, erreur de base de données, etc.), il y a deux approches. Pour un envoi classique, le serveur réaffiche le formulaire avec des messages d'erreur. Pour un envoi en AJAX, le serveur répond avec un code d'erreur (400, 422) et des messages d'erreur, et le JavaScript affiche les erreurs sur la page avec _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Affichez toujours les erreurs à côté des champs concernés plutôt que de les cacher dans un résumé, pour que l'utilisateur voie exactement ce qui a échoué et où corriger.
Gérer les états de chargement
À l'envoi du formulaire, désactivez le bouton pour que l'utilisateur ne clique pas deux fois, et affichez un indicateur ou un message de chargement avec form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Envoi en cours...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Envoyer'; });. Désactivez le bouton tout de suite : si la requête prend 5 secondes, l'utilisateur risque de cliquer de nouveau en pensant que cela n'a pas marché.
Que faire après un envoi réussi
Une fois le formulaire envoyé avec succès, vous avez plusieurs options. Vous pouvez vider les champs, afficher un message de remerciement, rediriger vers une page de remerciement, envoyer un e-mail à l'utilisateur, le renvoyer à la page précédente, ou le laisser sur le formulaire pour qu'il puisse renvoyer. Choisissez selon l'objectif de votre formulaire. Un formulaire de contact doit afficher un message de remerciement, un formulaire de réservation doit rediriger vers la confirmation de réservation, et une inscription à la newsletter doit ramener l'utilisateur à la page où il se trouvait.
Comment WEMASY gère l'envoi des formulaires
Les formulaires WEMASY prennent en charge l'envoi classique et l'AJAX. Configurez ce qui se passe après l'envoi : afficher un message, rediriger vers une URL ou envoyer une notification par e-mail. WEMASY valide côté client et côté serveur.
Voyez les options d'envoi de formulaire dans votre offre WEMASY.