Un formulaire s'envoie et la page devient blanche. Rien ne se passe. La personne se demande si son envoi a fonctionné. Le serveur l'a-t-il reçu ? Le formulaire est-il encore en cours de traitement ? Faut-il renvoyer ? Ce moment entre le clic sur envoyer et la certitude que l'action a réussi est un moment d'anxiété. L'expérience du formulaire ne s'arrête pas au clic sur envoyer. Elle s'arrête quand la personne sait que c'est réussi. Ce qui se passe à cet instant détermine si elle fait confiance à votre marque et si les données collectées sont vraiment utiles.
Trois éléments contrôlent ce moment final. Un état de chargement montre que quelque chose se passe pendant le traitement. Un message de réussite confirme que l'envoi a fonctionné. Une page de remerciement guide la suite. Bien faits, ces trois éléments donnent à la personne l'assurance d'avoir bien agi. Mal faits, ils créent de la confusion et de la méfiance. Cet article présente le rôle de chacun, quand les utiliser, quoi dire et comment les construire sans casser l'expérience du formulaire.
Pourquoi les états de chargement comptent avant la fin du formulaire
L'envoi d'un formulaire se passe sur le serveur. Quand quelqu'un clique sur envoyer, ses données voyagent vers un ordinateur quelque part, sont traitées, et une réponse revient. Ce trajet complet prend en général une à cinq secondes. Une seconde paraît instantanée. Cinq secondes paraissent une éternité. Pendant ce temps, la personne est bloquée. Elle voit le formulaire et ne sait pas quoi faire. Renvoyer ? Attendre ? Actualiser la page ?
Un état de chargement supprime cette incertitude. Quelque chose de visible change quand quelqu'un clique sur envoyer. Le bouton se désactive et change de texte. Une icône de chargement apparaît. Une barre de progression montre un mouvement. Quelque chose dit à la personne "votre action est enregistrée et quelque chose se passe".
La règle la plus importante pour les états de chargement est la règle d'une seconde. Si l'envoi prend plus d'une seconde, affichez un indicateur de chargement. S'il prend moins d'une seconde, vous pouvez vous passer de l'état visuel, car c'est si rapide que les gens le remarquent à peine. Pour presque tous les formulaires réels connectés à un serveur, l'envoi dépasse une seconde. Affichez l'état de chargement.
Sans état de chargement, les gens cliquent souvent plusieurs fois sur envoyer. Leur anxiété leur fait croire que le premier clic n'a pas marché. Les envois multiples créent des données en double, gaspillent des ressources serveur et frustrent les utilisateurs. Un indicateur de chargement l'évite en signalant clairement qu'une action est en cours.
Comment concevoir un état de chargement qui rassure
L'état de chargement le plus simple consiste à désactiver le bouton d'envoi et à changer son texte. Le bouton affiche "Envoyer" normalement. Au clic, il devient "Envoi en cours..." et passe en gris ou s'estompe. La personne voit que le bouton n'est plus cliquable. Elle sait que quelque chose se passe. Cela suffit pour la plupart des formulaires.
Un cran au-dessus consiste à ajouter du mouvement. Une petite icône de chargement apparaît à côté du texte du bouton ou à l'intérieur. Elle tourne en continu. Cela crée une impression d'activité et de progression. La vitesse de rotation compte. Un tour complet par seconde paraît régulier. Plus vite, c'est frénétique. Plus lent, cela semble figé. Restez à un tour par seconde.
Pour les traitements plus longs, une barre de progression fonctionne mieux qu'une icône. Une barre horizontale en haut du formulaire se remplit au fil du traitement. Si le formulaire sait combien d'étapes il doit effectuer, il peut montrer une progression réaliste. S'il ne connaît pas la durée totale, utilisez une barre en pourcentage qui monte à 90 % et se termine à la réussite. La personne voit ainsi où en est le processus.
La couleur de votre indicateur de chargement doit se remarquer sans jurer avec la conception du formulaire. Utilisez votre couleur de marque ou un bleu ou gris neutre. Le rouge ou l'orange peuvent ressembler à une erreur alors qu'il n'y en a pas. Le vert peut faire croire que le formulaire a déjà réussi.
Gardez des états de chargement minimalistes. Le bouton change. Une icône apparaît. Le formulaire n'a pas besoin de s'estomper, les champs n'ont pas besoin de se désactiver, et du nouveau texte n'a pas besoin d'arriver en glissant sur le côté. La simplicité inspire confiance. La complexité éveille la méfiance.
La différence entre un message de réussite et une page de remerciement
Après un envoi réussi, l'utilisateur a besoin d'une confirmation. Elle peut prendre deux formes. Un message de réussite intégré apparaît sur la même page que le formulaire. Ou bien le formulaire redirige vers une nouvelle page de remerciement avec un message de réussite. Les deux fonctionnent. Le choix dépend de votre objectif.
Un message intégré garde l'utilisateur sur la même page. Le formulaire disparaît ou change pour afficher "Nous avons bien reçu votre envoi." Une confirmation simple et claire. Cela convient aux petits formulaires, ou quand vous voulez que l'utilisateur reste sur la page pour explorer d'autres contenus. Les formulaires de contact utilisent souvent des messages intégrés. Les inscriptions à la newsletter aussi. Rapide, simple, c'est terminé.
Une page de remerciement est une page dédiée sur laquelle l'utilisateur arrive après l'envoi. Elle n'existe que si le formulaire s'envoie avec succès. Elle a sa propre URL. C'est utile quand vous devez suivre la conversion séparément dans vos statistiques, quand vous voulez afficher du contenu supplémentaire après l'envoi, ou quand vous voulez guider l'utilisateur vers l'étape suivante d'un tunnel de vente. Les formulaires de paiement e-commerce redirigent vers des pages de remerciement. Les formulaires de capture de contacts aussi. La page dédiée vous donne plus de place pour travailler.
La différence technique compte pour le suivi. Un message intégré montre la conversion sur la même page que le formulaire. Une page de remerciement montre une vue de page distincte et une URL distincte. Du point de vue du suivi, une page de remerciement est plus propre. C'est un événement distinct que les outils de statistiques mesurent précisément.
Ce que doit dire un message de réussite
Un message de réussite a un seul rôle : dire à la personne que son envoi a fonctionné. C'est tout. N'ajoutez pas de texte marketing, ne proposez pas d'autres produits, ne compliquez pas.
Commencez par une confirmation claire. "Merci. Nous avons bien reçu votre envoi." Pas "Votre envoi a été reçu avec succès par notre système automatisé." Le premier paraît humain. Le second paraît robotique et institutionnel. La confirmation doit être personnelle et directe.
Ajoutez tout de suite l'étape suivante. Si le formulaire était une demande de contact, dites quand la personne aura une réponse. "Nous répondrons dans les deux heures ouvrées." Pas "Nous reviendrons vers vous bientôt." Un délai précis inspire confiance. Bientôt est vague. Deux heures est concret.
Si l'envoi déclenche une réponse automatique, mentionnez-la. "Vérifiez votre e-mail pour le lien de confirmation." Ou "Un lien de réinitialisation du mot de passe est en route vers votre boîte de réception." Cela explique la suite sans que la personne ait à deviner ou à craindre d'avoir raté quelque chose.
En option, mais efficace : reprendre quelque chose que la personne a envoyé. "Nous avons bien reçu votre message sur l'optimisation de site web. Nous allons l'examiner et revenir vers vous." Reprendre ses propres mots donne l'impression d'être vu et compris. Cela confirme que ses données ont bien été reçues et enregistrées.
Gardez le message court. Une ou deux phrases pour un message intégré. Trois à cinq phrases pour le message d'une page de remerciement. Les longs messages de réussite ressemblent à du spam ou à un argumentaire de vente en plus.
Utilisez un langage chaleureux et naturel. "Merci de nous avoir écrit." Pas "Nous vous remercions d'avoir finalisé l'envoi de ce formulaire." Un langage naturel rend le moment humain, pas automatique.
Concevoir une page de remerciement qui convertit, pas une impasse
Une page de remerciement est un moment de grande valeur. La personne vient de convertir. Elle est de bonne humeur. Elle a agi. Elle a fait ce que vous lui demandiez. C'est le moment juste après son oui. C'est le moment de la guider vers la suite, pas de la renvoyer.
En haut de la page de remerciement, rappelez la confirmation. "Merci. Nous avons bien reçu votre demande." Restez bref. La personne sait déjà que c'est réussi. La confirmation sert seulement à rendre les choses officielles.
Sous la confirmation, ajoutez un contenu en rapport avec ce qu'elle vient de faire. Si elle s'est inscrite à une newsletter, montrez ce qu'elle va recevoir. Si elle a demandé une démo, montrez les prochaines étapes. Si elle a fait un achat, montrez le détail de la commande et le délai de livraison. Le contenu doit être la suite naturelle de ce qu'elle vient d'envoyer.
Ajoutez une seule action facultative. Pas cinq. Pas trois. Une. Que doit-elle faire ensuite ? Explorer votre site ? Lire des ressources utiles ? Vous suivre sur les réseaux sociaux ? Planifier un appel ? Choisissez-en une et faites-en le centre de la page. Plusieurs appels à l'action concurrents troublent les gens. Elle vient de dire oui. Guidez-la avec une seule étape claire.
Si vous voulez collecter des informations supplémentaires, une page de remerciement s'y prête bien. Ne les demandez pas dans le formulaire lui-même. Demandez-les une fois que la personne s'est déjà engagée en envoyant le premier. Un second formulaire plus léger sur la page de remerciement convertit souvent mieux que de tout entasser dans le premier.
Ajoutez une preuve sociale si c'est pertinent. Une citation d'un client satisfait. Une statistique sur les personnes qui ont fait la même action. Quelque chose qui confirme qu'elle a pris la bonne décision. Il ne s'agit pas de la convaincre de convertir. Elle a déjà converti. Il s'agit de renforcer sa confiance dans ce qu'elle vient de faire.
Veillez à ce que la page s'accorde à l'ensemble de votre site. Une page de remerciement qui a un autre aspect, d'autres polices ou des couleurs qui jurent donne l'impression d'avoir quitté le site de votre marque. La cohérence inspire confiance. La page de remerciement doit avoir sa place sur votre site.
Le bon moment pour passer du formulaire à l'état de réussite
Quand quelqu'un clique sur envoyer, combien de temps l'état de chargement doit-il rester affiché avant le message de réussite ou la page de remerciement ? Aussi longtemps que le formulaire est réellement en cours de traitement.
Pour les formulaires qui s'envoient très vite, en moins d'une seconde, gardez quand même l'état de chargement visible au moins une seconde. Si l'envoi prend en réalité 300 millisecondes mais que votre icône disparaît après 400 millisecondes, les gens peuvent croire que quelque chose a cassé. La transition doit paraître voulue, pas précipitée.
Pour les formulaires qui prennent deux à cinq secondes, affichez l'état de chargement pendant toute la durée. Laissez les gens voir l'attente. Ne cachez pas le temps que prend le processus. La transparence rassure.
N'affichez jamais un état de chargement qui disparaît puis réapparaît. Cela crée de la confusion. Affichez-le une fois et gardez-le visible jusqu'à la réussite. Si vous devez réessayer après une erreur, effacez complètement l'état de chargement et affichez le message d'erreur avant de relancer.
Pour les processus très longs, de plus de dix secondes, pensez à afficher des mises à jour de progression. Pas seulement une icône. Un message qui change. "Vérification de vos informations." Puis "Traitement de votre demande." Puis "Finalisation de l'envoi." Trois ou quatre petits messages au fil d'un long processus gardent les gens attentifs et conscients que quelque chose se passe encore.
Particularités du mobile pour les états de chargement et les messages de réussite
Sur un écran de téléphone, la place est limitée. Un indicateur de chargement qui convient sur ordinateur peut prendre trop de place sur mobile. Une page de remerciement longue sur ordinateur devient très longue sur mobile.
Pour les états de chargement sur mobile, gardez un texte minimal. "Envoi en cours..." plutôt que "Veuillez patienter pendant le traitement de votre envoi." Une icône prend moins de place qu'une barre de progression. Placez l'indicateur dans le bouton d'envoi ou juste au-dessus ou en dessous, pas flottant au milieu de la page.
Pour les messages de réussite sur mobile, restez bref. Une phrase est idéale. Deux phrases sont acceptables. Au-delà, le message sort de l'écran.
Pour les pages de remerciement sur mobile, placez le message de confirmation principal dans les deux premiers paragraphes. Ne faites pas faire défiler la page pour savoir si le formulaire s'est bien envoyé. Le message de remerciement doit être visible immédiatement, sans défiler.
Testez vos états de chargement et de réussite sur de vrais téléphones, pas seulement dans l'émulation d'un navigateur. La taille et le rendu de l'écran d'un téléphone peuvent changer l'affichage.
Statistiques et suivi des derniers instants de votre formulaire
La page ou le message de réussite est l'endroit où vous mesurez si le formulaire a vraiment converti. Des plateformes de statistiques comme Google Analytics, Meta Pixel et les plateformes d'e-mailing peuvent suivre précisément ce moment de réussite.
Si vous utilisez un message de réussite intégré sur la même page que le formulaire, définissez un déclencheur de conversion sur l'apparition de ce message. Utilisez JavaScript pour suivre le moment où le message apparaît, pas seulement le chargement de la page. Vous savez ainsi exactement qui a réussi son envoi, pas seulement qui a visité la page.
Si vous redirigez vers une page de remerciement, le suivi est automatique. Chaque vue de cette page est une conversion. C'est pourquoi beaucoup de formulaires utilisent des pages de remerciement. L'URL est unique. Les outils de statistiques la comprennent parfaitement. Une vue de page égale un envoi réussi.
Ajoutez l'URL de la page de remerciement à vos objectifs de conversion. Dans Google Analytics, créez un objectif qui se déclenche quand quelqu'un arrive sur yourdomain.com/thank-you. Chaque envoi réussi est alors compté automatiquement.
Si vous avez plusieurs formulaires sur votre site, créez une page de remerciement unique pour chacun ou utilisez des paramètres d'URL pour les distinguer. contact-form.com/thank-you et demo-form.com/thank-you. Ou des paramètres comme /thank-you?form=contact. Vous pouvez ainsi suivre quels formulaires convertissent.
Erreurs courantes qui gâchent le moment de la réussite
Un message de réussite qui ne confirme pas que l'action a fonctionné n'est pas un message de réussite. C'est une impasse. "Merci." Seul. Que doit faire la personne ensuite ? Où est sa confirmation ? Refuser de préciser crée de la méfiance.
Des états de chargement trop longs ou trop courts paraissent cassés. Une icône qui tourne 20 secondes fait croire que quelque chose a mal tourné. Une icône qui apparaît et disparaît en 100 millisecondes peut passer inaperçue.
Des pages de remerciement qui cherchent à vendre au lieu de remercier. Juste après une conversion, ce n'est pas le moment de proposer autre chose. Reconnaissez ce que la personne a fait. Guidez-la. La vente viendra plus tard.
Un message de réussite ou une page de remerciement qui répète des informations que le formulaire a déjà demandées. La personne vous a déjà donné son nom et son e-mail. Ne les lui faites pas relire sur la page de réussite. Utilisez-les pour personnaliser le message, ne répétez pas ce qui a été collecté.
Des formulaires mobiles dont l'état de chargement est trop grand pour l'écran. Une icône qui occupe la moitié de l'écran du téléphone est écrasante. Gardez des indicateurs visuels proportionnés à la taille de l'écran.
Oublier d'ajouter une étape suivante claire. "Merci pour votre envoi." Et ensuite, rien. Que doit faire la personne ? Sans direction, elle part. Une seule action suivante claire la garde engagée.
Comment WEMASY vous aide à concevoir états de chargement et expériences de réussite
Le créateur de formulaires WEMASY inclut des états de chargement intégrés qui s'affichent automatiquement à l'envoi. Vous pouvez adapter le style de l'indicateur à votre marque. Choisissez entre un message texte, une icône de chargement ou une barre de progression. Réglez la couleur selon le thème de votre marque. L'état de chargement apparaît pendant le traitement des données et disparaît à la fin de l'envoi.
Les messages de réussite sont entièrement personnalisables dans le créateur de formulaires. Écrivez votre propre message. Choisissez s'il s'affiche sur la page ou s'il redirige vers une page de remerciement. Si vous redirigez, WEMASY vous permet d'indiquer l'URL de votre page de remerciement. Le formulaire redirige automatiquement après un envoi réussi.
Pour les pages de remerciement, créez une page dans le créateur de site web de WEMASY comme n'importe quelle autre page. Adaptez-la à votre marque. Ajoutez un texte de confirmation, les étapes suivantes, une preuve sociale ou des appels à l'action secondaires. Une fois la configuration du formulaire terminée, collez l'URL de la page de remerciement dans les réglages de redirection du formulaire. WEMASY gère la redirection automatiquement.
La validation en temps réel évite de nombreuses erreurs d'envoi avant qu'elles ne se produisent. Quand les données arrivent sans erreur, l'envoi se passe proprement. L'état de chargement apparaît brièvement et l'état de réussite se déclenche plus vite. Moins d'erreurs, c'est des envois plus rapides et moins de temps passé sur des états de chargement.
L'intégration des statistiques est intégrée. WEMASY suit les envois de formulaire et peut déclencher des objectifs de statistiques automatiquement. Quand un formulaire s'envoie avec succès, vous pouvez configurer des événements dans Google Analytics ou Meta Pixel. Voyez quels champs de formulaire ont les meilleurs taux de conversion, quels formulaires convertissent le plus souvent et où les gens abandonnent.
Voyez les fonctions de formulaire incluses dans votre offre WEMASY.