Que se passe-t-il dans la seconde qui suit le clic sur « envoyer » ? La plupart des gens n'y pensent jamais. L'envoi d'un formulaire est invisible pour vos visiteurs, mais capital pour vos systèmes. Dès que quelqu'un clique sur envoyer, une chaîne d'événements démarre que presque personne ne voit. Vos données sont validées, encodées, transmises, reçues, traitées et stockées.
Si quelque chose se passe mal pendant cette seconde, vous devez savoir où. Cet article parcourt chaque étape du processus d'envoi pour que vous compreniez ce qui se passe après le clic.
Qu'est-ce que l'envoi d'un formulaire
L'envoi d'un formulaire est le processus qui consiste à rassembler les données saisies par un visiteur dans les champs de votre formulaire et à les transmettre à une destination pour traitement. L'envoi a lieu quand l'utilisateur clique sur un bouton d'envoi (ou appuie sur Entrée dans un champ de texte), ce qui déclenche une requête HTTP qui transporte les réponses du visiteur vers votre serveur ou un service tiers.
Le processus d'envoi comprend plusieurs étapes : collecte des données, encodage, transmission, validation, traitement et réponse. Chacune doit se terminer correctement pour que l'envoi fonctionne.
Comment fonctionne l'envoi d'un formulaire, étape par étape
Quand un visiteur clique sur envoyer, une séquence précise se déroule. Comprendre chaque étape vous aide à résoudre les problèmes d'intégration et à bien configurer les automatisations.
Étape 1 : l'événement d'envoi se déclenche
Quand un utilisateur clique sur le bouton d'envoi ou appuie sur Entrée dans certains champs, le formulaire génère un événement d'envoi. Cet événement indique au navigateur de rassembler toutes les données saisies dans les champs du formulaire et de les préparer pour la transmission.
Étape 2 : les données du formulaire sont collectées
Le navigateur lit chaque champ de votre formulaire (zones de texte, listes déroulantes, cases à cocher, envois de fichiers, etc.) et en extrait les valeurs. Les données de chaque champ sont associées à son attribut name, ce qui crée des paires clé-valeur. Par exemple, si vous avez un champ nommé « email » avec la valeur « jane@example.com », le navigateur l'enregistre sous forme de paire.
Si un champ est vide, le formulaire le collecte quand même (certains systèmes ignorent les champs vides, selon la configuration du formulaire).
Étape 3 : les données sont encodées
Avant de voyager sur internet, les données doivent être traduites dans un format que le serveur web comprend. C'est l'encodage. Les deux formats les plus courants sont :
URL-encoded (application/x-www-form-urlencoded) : les noms et valeurs des champs sont combinés avec des signes égal et des esperluettes. Par exemple : « name=Jane&email=jane@example.com&phone=555-0123 ». C'est le format par défaut de la plupart des formulaires.
Multipart/form-data : utilisé quand votre formulaire inclut des envois de fichiers. Ce format permet d'envoyer ensemble du texte et des données binaires (comme des images).
Étape 4 : les données voyagent jusqu'au serveur
Les données encodées sont placées dans une requête HTTP et envoyées à l'adresse indiquée dans l'attribut action de votre formulaire. Si aucune action n'est définie, le formulaire est envoyé à la page où il se trouve.
La requête HTTP utilise la méthode que vous avez choisie : GET ou POST. Les requêtes GET sont visibles dans l'URL (utilisées pour les recherches et les filtres). Les requêtes POST cachent les données dans le corps de la requête (utilisées pour les informations sensibles comme les mots de passe ou les données de paiement).
Si votre formulaire est envoyé en HTTPS (ce que tous les formulaires modernes devraient faire), les données sont chiffrées pendant la transmission. Cela les protège contre l'interception.
Étape 5 : le serveur reçoit et valide les données
Quand votre serveur reçoit l'envoi, il vérifie d'abord que les données sont valides et sûres. La validation peut inclure :
Vérifier que les champs obligatoires ne sont pas vides. Vérifier que les adresses e-mail ressemblent à de vraies adresses. Vérifier que les fichiers envoyés ont le bon type et la bonne taille. Vérifier que les nombres sont bien des nombres et non du texte.
L'assainissement consiste à retirer des données tout ce qui est dangereux (comme des scripts malveillants). Cela protège votre base de données et vos systèmes contre les attaques.
Étape 6 : le serveur traite les données
Après validation et assainissement, le serveur décide quoi faire des données. Les actions courantes sont :
Les enregistrer dans une base de données : l'envoi est sauvegardé pour que vous puissiez le consulter plus tard ou l'intégrer à d'autres systèmes.
Déclencher des automatisations : l'envoi peut automatiquement envoyer un e-mail de confirmation, mettre à jour un CRM ou déclencher un webhook.
Générer une réponse : le serveur crée et renvoie une réponse au navigateur du visiteur. Ce peut être une page de succès, une redirection ou un message de confirmation affiché sur la même page.
Étape 7 : le visiteur voit la confirmation
La dernière étape est ce que vit le visiteur. Ce peut être :
Un message de succès affiché sur la même page. Une redirection vers une page de remerciement. Un e-mail de confirmation dans sa boîte de réception. Une fenêtre ou un pop-up confirmant que l'envoi a bien eu lieu.
Cette étape est essentielle, car les visiteurs doivent savoir que leur envoi a fonctionné. Sans retour clair, ils peuvent envoyer le formulaire plusieurs fois en pensant qu'il n'est pas passé.
Que deviennent les données de votre formulaire après l'envoi
Une fois l'envoi terminé, les données vont quelque part. Comprendre où est essentiel pour exploiter les envois de formulaires.
Les données de votre formulaire peuvent être stockées à plusieurs endroits à la fois. La plupart des créateurs de formulaires enregistrent les envois dans leur propre base par défaut (où vous pouvez les consulter dans le tableau de bord). En même temps, l'envoi peut être transmis à des services externes comme des plateformes d'e-mailing, des CRM ou des applications sur mesure via des intégrations et des webhooks.
Le flux ressemble à ceci : envoi du formulaire → le créateur de formulaires capture les données → les données sont stockées localement et transmises aux intégrations → vous pouvez accéder aux données depuis plusieurs plateformes.
Le rôle des champs du formulaire dans l'envoi
Tous les champs ne se comportent pas de la même façon à l'envoi. Comprendre le fonctionnement de chaque type vous aide à concevoir des formulaires qui capturent les bonnes données.
Zones de texte, zones de texte longues, champs e-mail : envoient leur valeur exactement comme saisie.
Listes déroulantes et champs de sélection : envoient la valeur de l'option choisie, pas le texte affiché (même si les deux peuvent être identiques).
Cases à cocher : n'envoient une valeur que si elles sont cochées. Les cases décochées n'envoient rien.
Boutons radio : envoient uniquement la valeur de l'option choisie.
Envois de fichiers : envoient le fichier lui-même, pas seulement son nom. Le fichier est inclus dans l'encodage multipart évoqué plus haut.
Champs masqués : envoient leur valeur automatiquement sans que le visiteur les voie. Ils servent à transmettre des informations supplémentaires avec les champs visibles.
Les erreurs possibles pendant l'envoi d'un formulaire
Parfois, les formulaires ne s'envoient pas correctement. Les problèmes courants :
Erreurs réseau : si la connexion internet tombe pendant l'envoi, les données peuvent ne pas atteindre le serveur. Le visiteur doit voir un message d'erreur.
Erreurs serveur : si votre serveur est en panne ou surchargé, l'envoi ne peut pas être traité. Cela se traduit en général par une erreur 500.
Échecs de validation : si des champs obligatoires sont vides ou si les données ne correspondent pas aux formats attendus, le formulaire ne doit pas du tout s'envoyer. Un bon design l'évite en vérifiant avant l'envoi.
Erreurs de délai dépassé : si l'envoi prend trop de temps (en général plus de 30 secondes), le navigateur peut annuler la requête.
Intégrations mal configurées : si votre formulaire est configuré pour envoyer des données à un service externe mais que la connexion est rompue, l'envoi peut réussir dans votre créateur de formulaires mais ne jamais arriver à destination.
Sécurité de l'envoi d'un formulaire
La sécurité compte à chaque étape du processus d'envoi. Voici les points critiques :
Utilisez toujours HTTPS : votre formulaire doit se trouver sur une page sécurisée (HTTPS), pas en HTTP. Cela chiffre les données en transit.
Validez des deux côtés : la validation doit avoir lieu dans le navigateur (pour l'expérience utilisateur) et sur le serveur (pour la sécurité). Ne vous fiez jamais à la seule validation côté client.
Assainissez toutes les saisies : retirez ou neutralisez tout caractère qui pourrait être dangereux une fois stocké ou affiché.
Limitez les envois de fichiers : si votre formulaire accepte des fichiers, restreignez les types et les tailles pour éviter les abus.
Mettez en place une protection CSRF : les formulaires doivent inclure un jeton CSRF pour empêcher des attaquants d'envoyer de fausses requêtes au nom des utilisateurs.
Stockez les données sensibles en sécurité : si votre formulaire collecte des mots de passe, des données de paiement ou d'autres données sensibles, elles doivent être chiffrées au repos (stockées chiffrées dans votre base de données).
Comment WEMASY gère les envois de formulaires
L'outil Formulaires de WEMASY gère pour vous tout le processus d'envoi. Quand un visiteur envoie un formulaire sur votre site WEMASY, l'envoi est automatiquement capturé et stocké dans votre compte WEMASY. Vous pouvez ensuite consulter les envois dans votre tableau de bord, les exporter en CSV ou connecter des intégrations pour transmettre les données à votre CRM, votre plateforme d'e-mail ou vos applications sur mesure.
WEMASY gère toute la complexité technique de la validation, de l'encodage, de la transmission sécurisée et du stockage. Vous vous concentrez sur la conception du formulaire et sur la destination des données. Consultez les intégrations disponibles dans votre compte WEMASY ou la page des tarifs pour savoir quelles fonctions de formulaires sont incluses dans votre offre.