{"id":2386,"date":"2026-08-26T17:02:47","date_gmt":"2026-08-26T14:02:47","guid":{"rendered":"https:\/\/presta.site\/blog\/plus-le-formulaire-de-commande-est-confus-moins-les-acheteurs-terminent\/"},"modified":"2026-08-26T17:03:21","modified_gmt":"2026-08-26T14:03:21","slug":"formulaire-de-commande","status":"publish","type":"post","link":"https:\/\/presta.site\/blog\/fr\/formulaire-de-commande\/","title":{"rendered":"Plus le formulaire de commande est confus, moins les acheteurs terminent"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ouvrez le checkout en live sur un t\u00e9l\u00e9phone. Comptez chaque champ inutile pour exp\u00e9dier ou encaisser. Si les commandes payantes s&#8217;arr\u00eatent apr\u00e8s le panier, ce chiffre explique souvent pourquoi &#8211; plus le <strong>formulaire de commande<\/strong> est confus, moins les acheteurs terminent.<\/p>\n\n\n<!--more-->\n\n<!-- series-nav:conversion:start -->\n\n<p class=\"series-nav series-nav-top wp-block-paragraph\"><em>Partie 5 de <a href=\"https:\/\/presta.site\/blog\/fr\/conversion-page-par-page\/\">Conversion, page par page<\/a> &#8211; plan complet<\/em><\/p>\n\n<!-- series-nav:conversion:end -->\n\n\n<p class=\"wp-block-paragraph\">L&#8217;\u00e9pisode pr\u00e9c\u00e9dent traitait de la <a href=\"https:\/\/presta.site\/blog\/fr\/page-panier\/\">page panier<\/a> qui confirme le contenu du sac. Cette page encaisse. Adresse, mode de livraison, paiement. Un formulaire qui demande aussi comment on vous a trouv\u00e9, veut un deuxi\u00e8me t\u00e9l\u00e9phone \u00ab pour le soir \u00bb et cache Invit\u00e9 sous Cr\u00e9er un compte, ce n&#8217;est pas du s\u00e9rieux. C&#8217;est ainsi qu&#8217;on fait abandonner une commande que le panier avait d\u00e9j\u00e0 gagn\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ce qu&#8217;un formulaire de commande doit faire<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Une seule mission : encaisser et obtenir une adresse de livraison. Qui re\u00e7oit le colis. O\u00f9 il va. Comment il part. Comment on paie. Puis un bouton Pay qu&#8217;on trouve vraiment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le panier a d\u00e9j\u00e0 montr\u00e9 les lignes et le total. Ce formulaire de commande n&#8217;a pas besoin de revendre le produit, de lancer une enqu\u00eate marketing ou d&#8217;imposer un mot de passe avant la carte. Si un champ n&#8217;est pas requis pour exp\u00e9dier la commande ou d\u00e9biter la carte, il n&#8217;a pas sa place sur cet \u00e9cran.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ce qui rend un formulaire de commande confus<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le plus long qu&#8217;on ait d\u00e9m\u00eal\u00e9 cette ann\u00e9e : une boutique de v\u00eatements sur th\u00e8me par d\u00e9faut &#8211; rien de custom, rien d&#8217;extravagant. Cr\u00e9er un compte avant la carte. E-mail, puis e-mail encore. Mot de passe, puis confirmation. Soci\u00e9t\u00e9. TVA. Fax, toujours l\u00e0 depuis 2012. Deux champs t\u00e9l\u00e9phone, dont un libell\u00e9 \u00ab soir \u00bb. Une liste d\u00e9roulante : comment nous avez-vous connu. Newsletter pr\u00e9-coch\u00e9e. Une barre de progression \u00ab \u00c9tape 3 sur 5 \u00bb sans indice sur 4 et 5. Le total en minuscule sous un widget coupon. Pay en bas de page, nomm\u00e9 \u00ab Continuer \u00bb, impossible de savoir que le clic d\u00e9bite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rien de tout \u00e7a n&#8217;est exotique. La plupart des checkouts confus sont des extras ordinaires empil\u00e9s un par un &#8211; chacun d\u00e9fendable, l&#8217;ensemble fatal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le formulaire invit\u00e9 le plus propre qu&#8217;on ait livr\u00e9 demande une adresse de livraison, un mode lisible, le paiement, un Pay. Invit\u00e9 par d\u00e9faut. Le compte, une proposition apr\u00e8s le d\u00e9bit, pour ceux qui veulent l&#8217;historique. M\u00eame mission que le long formulaire. L&#8217;un d&#8217;eux encaisse.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2.png\" alt=\"Formulaire de commande avec champs superflus vs un checkout invit\u00e9 court qui permet de payer\" class=\"wp-image-2382\" srcset=\"https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2.png 1536w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2-300x200.png 300w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2-1024x683.png 1024w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2-768x512.png 768w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2-945x630.png 945w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-long-vs-guest-v2-1320x880.png 1320w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Champs reportables apr\u00e8s le paiement<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">L&#8217;article de Nick Babich sur les <a href=\"https:\/\/www.smashingmagazine.com\/2018\/08\/best-practices-for-mobile-form-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">formulaires mobiles dans Smashing Magazine<\/a> r\u00e9sume la r\u00e8gle en une ligne : chaque champ co\u00fbte de l&#8217;effort, et plus court vaut mieux. Des questions en plus \u00e0 l&#8217;inscription ou au paiement font perdre quelqu&#8217;un qu&#8217;on avait d\u00e9j\u00e0. Relancez plus tard si vous voulez l&#8217;histoire. Ne retenez pas la carte en otage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Retirez ou d\u00e9placez hors de cet \u00e9cran :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comment nous avez-vous connu<\/li>\n<li>Inscription newsletter (demander apr\u00e8s Payer, d\u00e9coch\u00e9e)<\/li>\n<li>Soci\u00e9t\u00e9 et TVA sauf si l&#8217;acheteur a choisi le checkout pro<\/li>\n<li>Fax<\/li>\n<li>Un deuxi\u00e8me t\u00e9l\u00e9phone<\/li>\n<li>Mot de passe compte, si l&#8217;invit\u00e9 peut payer<\/li>\n<li>Date de naissance, \u00ab couleur pr\u00e9f\u00e9r\u00e9e \u00bb, tout ce qui alimente un CRM et pas une \u00e9tiquette d&#8217;exp\u00e9dition<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Requis pour une facture l\u00e9gale ou une d\u00e9claration douani\u00e8re n&#8217;est pas \u00ab sympa \u00e0 avoir \u00bb. Gardez-les. Le test reste le m\u00eame : ce champ exp\u00e9die-t-il le colis ou d\u00e9bite-t-il la carte. Si la r\u00e9ponse est non, \u00e7a peut attendre.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Checkout invit\u00e9 vs mur de compte<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Forcer une connexion pour payer, c&#8217;est deux formulaires pour le travail d&#8217;un. Ils ont d\u00e9j\u00e0 tap\u00e9 un e-mail dans le panier, ou ils vont en taper un pour le re\u00e7u. Demander un mot de passe avant la carte, c&#8217;est un guichet adh\u00e9rent entre le \u00ab oui \u00bb et l&#8217;argent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Invit\u00e9 d&#8217;abord. Proposez Cr\u00e9er un compte apr\u00e8s le d\u00e9bit, quand la commande existe et qu&#8217;un historique vaut le coup. S&#8217;ils ont d\u00e9j\u00e0 un compte, la connexion est un raccourci &#8211; pas la seule porte. Cacher Invit\u00e9 sous un gros bloc connexion, c&#8217;est le m\u00eame mur avec de moins bonnes mani\u00e8res.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quand le formulaire efface ce qu&#8217;ils ont d\u00e9j\u00e0 saisi<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un Pay rat\u00e9 qui vide le formulaire suffit \u00e0 faire perdre la commande. L&#8217;acheteur remplit l&#8217;adresse, tape la carte, appuie sur Pay. Quelque chose \u00e9choue &#8211; CVV, une case obligatoire, un code postal que le transporteur refuse. La page recharge. Le num\u00e9ro de carte a disparu. Parfois l&#8217;adresse aussi. La plupart ne recommencent pas. Ils partent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gardez ce qu&#8217;ils ont tap\u00e9. Signalez le seul champ en erreur. N&#8217;effacez pas la carte parce qu&#8217;une case newsletter \u00e9tait vide. PCI n&#8217;exige pas de punir les gens ; \u00e7a exige de ne pas stocker le PAN. Un rechargement qui vide le formulaire, c&#8217;est un bug boutique, pas une fonction s\u00e9curit\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe.png\" alt=\"Erreur de formulaire de commande qui efface le num\u00e9ro de carte d\u00e9j\u00e0 saisi par l'acheteur\" class=\"wp-image-2380\" srcset=\"https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe.png 1536w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe-300x200.png 300w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe-1024x683.png 1024w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe-768x512.png 768w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe-945x630.png 945w, https:\/\/presta.site\/blog\/wp-content\/uploads\/2026\/08\/checkout-form-error-wipe-1320x880.png 1320w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Le m\u00eame formulaire sur t\u00e9l\u00e9phone<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vous avez d\u00e9j\u00e0 combattu le dump desktop sur la <a href=\"https:\/\/presta.site\/blog\/fr\/page-produit-mobile\/\">page produit mobile<\/a>. Le checkout, c&#8217;est l\u00e0 que le combat se perd plus facilement : chaque champ en plus, c&#8217;est un clavier pleine largeur et un champ zoom\u00e9, et cinq \u00ab \u00e9tapes \u00bb propres sur un \u00e9cran 27 pouces deviennent cinq visites dans un bus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Champs pleine largeur. Libell\u00e9s au-dessus du champ, pas \u00e0 c\u00f4t\u00e9. Clavier num\u00e9rique pour la carte. Une colonne. Pay visible sans chasse au tr\u00e9sor. Si vous avez besoin d&#8217;un second \u00e9cran, que ce soit \u00ab coordonn\u00e9es carte \u00bb &#8211; pas \u00ab dites-nous comment vous nous avez trouv\u00e9s \u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ouvrez le formulaire live ce soir et recomptez. Coupez ce qui n&#8217;exp\u00e9die pas et n&#8217;encaisse pas. Le panier a d\u00e9j\u00e0 gagn\u00e9 cette commande une fois &#8211; le seul travail restant, c&#8217;est ne pas la perdre au formulaire. Puis essayez de payer au t\u00e9l\u00e9phone d&#8217;une main. Si vous bloquez, eux aussi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Travaillez \u00e7a avec votre agent IA<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ne demandez pas \u00e0 un agent d&#8217;\u00ab am\u00e9liorer l&#8217;UX checkout \u00bb. Donnez-lui le formulaire r\u00e9el et faites-le trier exp\u00e9dier-ou-encaisser vs peut-attendre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u00c0 coller :<\/strong> le HTML du checkout, ou deux captures (desktop + t\u00e9l\u00e9phone). Si votre premier \u00e9cran oppose invit\u00e9 et compte, collez \u00e7a aussi &#8211; plus l&#8217;\u00e9tat d&#8217;erreur, l&#8217;\u00e9cran apr\u00e8s un d\u00e9bit rat\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prompt 1 &#8211; inventaire des champs.<\/strong> \u00ab Listez chaque champ et \u00e9tape de ce checkout. Taggez chacun : n\u00e9cessaire pour exp\u00e9dier ou encaisser, ou reportable apr\u00e8s paiement. Proposez une liste de coupes. N&#8217;ajoutez pas de fonctionnalit\u00e9s. N&#8217;inventez pas Express Pay comme solution. \u00bb<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prompt 2 &#8211; parcours invit\u00e9.<\/strong> \u00ab Voici le premier \u00e9cran de checkout. R\u00e9\u00e9crivez-le pour qu&#8217;un invit\u00e9 puisse payer sans cr\u00e9er de mot de passe. Le compte devient une proposition apr\u00e8s le d\u00e9bit. \u00bb<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prompt 3 &#8211; test de l&#8217;effacement.<\/strong> \u00ab Voici l&#8217;\u00e9tat d&#8217;erreur apr\u00e8s un paiement rat\u00e9. Listez tout ce que le formulaire a effac\u00e9. R\u00e9\u00e9crivez le flux pour qu&#8217;un d\u00e9bit rat\u00e9 conserve chaque champ d\u00e9j\u00e0 saisi par l&#8217;acheteur. \u00bb<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bon r\u00e9sultat :<\/strong> un inventaire de champs, un ordre de blocs plus court, et un \u00e9tat d&#8217;erreur qui garde ce qu&#8217;ils ont tap\u00e9 &#8211; quelque chose \u00e0 remettre au th\u00e8me. Pas \u00ab am\u00e9liorer le flux \u00bb.<\/p>\n\n\n<!-- series-nav:conversion:bottom:start -->\n\n<div class=\"wp-block-group series-nav series-nav-bottom\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><p>Ceci est la partie 5 de Conversion, page par page.<\/p><p>Pr\u00e9c\u00e9dent : <a href=\"https:\/\/presta.site\/blog\/fr\/page-panier\/\">La page panier confirme la commande &#8211; elle ne la revend pas<\/a> \u00b7 Suivant : Remerciement \/ post-achat &#8211; encore en cours d&#8217;\u00e9criture. <a href=\"https:\/\/presta.site\/blog\/fr\/conversion-page-par-page\/\">Abonnez-vous sur le hub de la s\u00e9rie<\/a> pour ne rien manquer.<\/p><\/div><\/div>\n\n<!-- series-nav:conversion:bottom:end -->\n","protected":false},"excerpt":{"rendered":"<p>Plus le formulaire de commande est confus, moins les acheteurs terminent. Coupez les champs superflus, le mur de compte et les erreurs qui effacent la carte.<\/p>\n","protected":false},"author":0,"featured_media":2047,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[299],"tags":[],"class_list":["post-2386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-catalogue-et-seo"],"_links":{"self":[{"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/posts\/2386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/comments?post=2386"}],"version-history":[{"count":1,"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/posts\/2386\/revisions"}],"predecessor-version":[{"id":2390,"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/posts\/2386\/revisions\/2390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/media\/2047"}],"wp:attachment":[{"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/media?parent=2386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/categories?post=2386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/presta.site\/blog\/wp-json\/wp\/v2\/tags?post=2386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}