Landing page et formulaire de commande COD qui convertit

La plupart des commandes en paiement à la livraison suivent le même chemin : une publicité vue sur un téléphone, un tap, une page consacrée à un seul produit, puis un court formulaire… ou un retour au fil d’actualité. Cette page et ce formulaire décident de la part de votre budget publicitaire qui se transforme en commandes, mais aussi du nombre de commandes qu’on pourra réellement confirmer et livrer. Un formulaire qui accepte n’importe quel numéro produit des commandes injoignables ; un formulaire qui demande trop ne produit rien du tout. Ce guide ne traite que de la landing page mono-produit et du formulaire de commande COD : la structure, les champs, la validation du numéro, ce qui donne confiance dans une boutique qu’on ne paie pas d’avance, et la vitesse de la page sur un téléphone ordinaire. Si vous en êtes encore au choix de la plateforme ou à l’ouverture de la boutique, commencez par notre guide pour créer une boutique en ligne COD au Maroc, puis revenez ici au moment de construire la page.

Ce qu’une page produit COD doit accomplir

Une landing page COD n’a qu’une mission : transformer l’intérêt créé par la publicité en une commande complète, avec un client joignable. Ce n’est ni un catalogue ni la vitrine de la marque. Chaque élément de la page doit soit répondre à une question que se pose l’acheteur sur le produit, soit le rapprocher du formulaire.

Le premier point est la cohérence entre la publicité et la page. Si la publicité montre un mixeur bleu à prix de lancement, le premier écran doit montrer ce mixeur, ce prix et la même promesse. Les régies le mesurent aussi : Google Ads définit l’expérience sur la page de destination selon sa pertinence et son utilité pour les personnes qui cliquent sur l’annonce. Un acheteur qui doit chercher sur la page ce qu’il vient de voir repart vers son fil.

Ensuite, fermez les sorties. Les recommandations de web.dev (Google) sur les formulaires d’achat conseillent de limiter les points de sortie en supprimant l’encombrement visuel et les distractions, comme les promotions d’autres produits. Sur une page mono-produit, cela veut dire : pas de menu vers vingt autres articles, pas de pop-up d’inscription à la newsletter, pas de liens vers les réseaux sociaux au milieu de la page. Le seul chemin possible, c’est le formulaire.

La page, de haut en bas

Les pages COD qui convertissent suivent souvent le même ordre, parce que c’est l’ordre des questions de l’acheteur :

1. Premier écran : une photo nette du produit, son nom, le prix avec la livraison indiquée, un bénéfice en une ligne et un bouton qui descend jusqu’au formulaire (ou le formulaire lui-même s’il est assez court pour tenir).
2. La preuve que le produit fait ce que promettait la pub : des vidéos courtes ou des photos du produit en situation, prises avec un vrai téléphone plutôt que des rendus de studio.
3. Les réponses aux objections : taille, matière, mode d’emploi, contenu du colis, délai de livraison vers les grandes villes.
4. Paiement et livraison : une phrase simple qui dit que l’on paie le livreur en espèces à la réception, et qu’un appel de confirmation précède l’envoi.
5. Le formulaire, encore : répétez-le en bas de page, ou un bouton qui y mène, pour que personne n’ait à remonter.

Gardez des textes courts et faciles à parcourir. Un écran de téléphone n’affiche que quelques lignes à la fois ; les longs paragraphes sont sautés. Si la même page s’adresse à des acheteurs arabophones et francophones, écrivez chaque version pour son lecteur au lieu d’empiler les deux langues sur le même écran.

Les champs utiles, et ceux à supprimer

Chaque champ supplémentaire est une raison de s’arrêter. Le guide web.dev le dit sans détour : les utilisateurs abandonnent plus volontiers les formulaires qui paraissent longs, complexes et sans direction claire. Le Baymard Institute, qui étudie les tunnels de paiement, a relevé que le parcours de paiement américain moyen affiche 23,48 éléments de formulaire par défaut, alors qu’un parcours idéal peut se limiter à 12 à 14 éléments. Dans son enquête, 17 % des acheteurs en ligne américains ont abandonné une commande à cause d’un paiement trop long ou trop compliqué. Un formulaire COD peut être bien plus court que n’importe quel paiement par carte, puisqu’il n’y a aucune étape de paiement.

Pour la plupart des produits COD, ces champs suffisent :

Supprimez l’e-mail, le code postal, la deuxième ligne d’adresse, le nom de société et tout ce qui ne sert pas à livrer. Le Nielsen Norman Group résume l’enjeu : chaque champ ou question retiré d’un formulaire augmente son taux de conversion. Les mêmes travaux rapportent 78 % de formulaires envoyés du premier coup quand les règles d’ergonomie sont respectées, contre 42 % quand elles ne le sont pas : la mise en page compte autant que le nombre de champs.

Quelques règles rendent les champs restants plus faciles à remplir :

• Disposez les champs sur une seule colonne, un champ par ligne, pour que le pouce descende tout droit.
• Demandez le nom dans un seul champ, sauf bonne raison, et n’imposez pas l’alphabet latin pour les noms : beaucoup d’acheteurs écrivent leur nom en arabe, et une règle de validation qui le refuse fait perdre la commande.
• Pour l’adresse, envisagez une seule zone de texte. Au Maroc, une adresse repose souvent sur un quartier et un point de repère plutôt que sur un numéro de rue, et un champ libre accepte tous les cas.
• N’utilisez pas le texte d’exemple grisé à la place des libellés : il disparaît dès que l’acheteur commence à taper, et avec lui le rappel de ce que le champ demande.

Valider le téléphone : le champ qui décide de la commande

En COD, le numéro de téléphone n’est pas une formalité. C’est par lui que la commande est confirmée et que le livreur trouve l’acheteur le jour de la livraison. Un numéro faux ou erroné devient une commande impossible à confirmer, ou un colis qui revient. C’est donc le seul champ où un peu de rigueur paie, à condition de ne pas bloquer les vrais acheteurs.

Commencez par le champ lui-même. Web.dev recommande, pour les numéros de téléphone, d’utiliser type="tel" afin d’obtenir le bon clavier sur mobile : l’acheteur voit un pavé numérique au lieu du clavier complet. Le même guide conseille un seul champ pour le numéro, sans le découper en morceaux, et de valider les données pendant la saisie, pas seulement à l’envoi.

Validez ensuite selon le vrai plan de numérotation du pays où vous vendez. Pour le Maroc :

• L’indicatif du pays est +212, et tous les numéros marocains comptent neuf chiffres sans le 0 initial : un numéro national fait donc dix chiffres avec son 0.
• Les numéros mobiles commencent par 06 ou 07 (+212 6 et +212 7 au format international). La tranche 07 a été ouverte en 2016, quand les trois opérateurs ont été autorisés à affecter des numéros à leurs clients commençant par « 07 » : une règle écrite il y a des années qui n’accepte que le 06 rejette de vrais acheteurs.
• Acceptez les formats que les gens tapent réellement : avec des espaces, des tirets, avec +212 devant (ou le préfixe international en 00), ou avec le 0. Retirez les séparateurs, ramenez tout à un format unique, et seulement ensuite vérifiez la longueur et le préfixe.
• Les numéros en 05 sont des fixes. Vous pouvez les accepter, mais signalez-les à l’équipe de confirmation : la plupart des acheteurs qui commandent depuis un téléphone donnent un mobile.

Quand le numéro est faux, dites ce qui ne va pas à côté du champ (« il manque un chiffre ») plutôt qu’un simple cadre rouge sans explication. Si vous vendez dans plusieurs pays, validez pays par pays au lieu d’une règle unique.

Enfin, expliquez pourquoi vous le demandez. Baymard a constaté que 14 % des utilisateurs ne donneraient jamais leur numéro à une boutique en ligne, et que 39 % des sites de son panel exigent le téléphone sans la moindre explication. Face à un champ téléphone obligatoire et inexpliqué, certains participants aux tests ont donné de fausses informations ou abandonné l’achat. Une ligne sous le champ (« Nous vous appelons pour confirmer la commande ; le livreur vous appelle à la livraison ») suffit : selon Baymard, expliquer pourquoi le numéro est demandé lève la grande majorité des inquiétudes sur la vie privée. Pour un acheteur COD, cette phrase annonce aussi l’appel de confirmation, ce qui l’incite à décrocher.

La confiance sans carte bancaire : ce qu’il faut montrer près du bouton

Le paiement à la livraison lève déjà la plus grande crainte de l’achat en ligne, puisque l’acheteur ne donne rien avant d’avoir vu le colis. Restent les questions sur le prix et la suite, et c’est au moment du formulaire qu’elles se posent.

• Affichez le prix complet avant le formulaire. Dans l’enquête de Baymard, la première raison d’abandon, une fois mis à part ceux qui ne faisaient que regarder, est celle de 40 % des acheteurs : des frais supplémentaires trop élevés (livraison, taxes, frais). Si la livraison est payante, affichez-la à côté du prix ; si elle est offerte, dites-le. Un total qui grimpe pendant l’appel de confirmation commence la relation par une mauvaise surprise.
• Dites comment on paie. « Vous payez le livreur en espèces à la réception du colis », en une ligne près du bouton.
• Dites ce qui se passe ensuite. Un appel ou un message de confirmation, le délai habituel, et la possibilité de vérifier le produit à la livraison si vous l’autorisez.
• Montrez de vraies preuves. Photos de clients, courtes vidéos d’avis et un numéro de téléphone ou WhatsApp joignable valent mieux que des badges.
• Nommez le bouton d’après l’action. « Commander, je paie à la livraison » dit à l’acheteur ce que fait le bouton, ce que ne dit pas un « Envoyer » générique.

La vitesse sur un téléphone ordinaire

L’acheteur qui arrive d’une publicité est en données mobiles, souvent sur un téléphone d’entrée ou de milieu de gamme, et ne s’est engagé à rien. Chaque seconde d’écran blanc l’invite à revenir en arrière. Web.dev cite des études selon lesquelles la BBC perdait 10 % d’utilisateurs en plus pour chaque seconde de chargement supplémentaire, et chez Vodafone, une amélioration de 31 % du LCP a fait progresser les ventes de 8 %.

Les Core Web Vitals de Google donnent des cibles concrètes. Pour une bonne expérience, le LCP doit survenir dans les 2,5 secondes qui suivent le début du chargement (le moment où l’image ou le titre principal apparaît), et l’INP doit rester à 200 millisecondes ou moins, ce qui mesure la vitesse de réaction de la page à un tap. Google conseille de mesurer au 75e centile des chargements, en séparant mobile et ordinateur : regardez les chiffres mobiles, pas la connexion de votre bureau.

Sur une page mono-produit, les coupables habituels sont faciles à trouver :

• Les images trop lourdes : exportez les photos à la taille où elles s’affichent, dans un format moderne, et gardez la première légère.
• Les vidéos en lecture automatique en haut de page : mettez une image d’aperçu et laissez l’acheteur lancer la vidéo.
• Les scripts de suivi et de chat : gardez les pixels publicitaires que vous utilisez vraiment, retirez le reste.
• Les comptes à rebours, roues de la fortune et pop-ups : ils coûtent du temps de chargement et s’interposent entre l’acheteur et le formulaire.

Après le tap : doublons, page de remerciement et confirmation

La commande n’est pas terminée quand le bouton est touché. Web.dev remarque que beaucoup d’utilisateurs cliquent plusieurs fois sur les boutons, même quand ils fonctionnent ; sur une connexion lente, cela donne deux ou trois commandes identiques que votre équipe devra appeler puis annuler. Désactivez le bouton dès le premier tap et montrez que la commande est en cours d’envoi.

La page de remerciement doit rappeler la commande (produit, quantité, montant à payer à la livraison), afficher le numéro saisi par l’acheteur et dire clairement qu’un appel ou un message de confirmation va suivre. Un acheteur qui attend l’appel décroche.

Un formulaire court laisse aussi passer davantage de commandes fantaisistes ou bâclées. La validation du téléphone en filtre une partie ; le reste relève de l’étape de confirmation. Nos guides pour éviter les fausses commandes COD et pour confirmer les commandes COD au Maroc détaillent ce qui se passe entre le formulaire et le livreur.

Tester et mesurer avant d’augmenter le budget

Avant d’envoyer du trafic payant, passez vous-même quelques commandes de test sur deux ou trois téléphones différents, en données mobiles plutôt qu’en Wi-Fi, et dans les deux langues si la page en a deux. Vérifiez que la commande arrive complète, qu’un numéro tapé avec des espaces ou avec +212 est accepté puis enregistré dans un format unique, et qu’un nom écrit en arabe n’est pas refusé.

Une fois le trafic lancé, suivez trois chiffres par page : les visites, les formulaires envoyés et les commandes confirmées. Une page qui transforme bien les visites en formulaires mais dont les commandes se confirment mal a un problème de formulaire (téléphones non vérifiés, prix ambigu), pas un problème de publicité. Changez une chose à la fois, comme la première image, l’affichage du prix ou le nombre de champs, et comparez sur assez de commandes pour être sûr que l’écart est réel.

Où intervient Cashod

La landing page et le formulaire recueillent la commande ; viennent ensuite la confirmation et la livraison. Cashod inclut un centre d’appels où les agents confirment les commandes COD par téléphone, et peut confirmer les commandes sur WhatsApp, y compris avec un agent IA. Un même compte Cashod peut gérer plusieurs boutiques, ce qui aide quand vous tenez une landing page par produit ou par marché. Pour voir comment votre boutique ou votre formulaire peut envoyer ses commandes, consultez la page des intégrations.