Guide · 6 min de lecture
Formulaires de commande avec total en direct : comment faire
Mis à jour 2026-09-17
En bref
Un formulaire de commande à total en direct utilise des champs numériques pour la quantité et le prix par article, un champ calculé qui les additionne au fur et à mesure de la saisie, et une mise en forme claire pour que le total se lise comme une somme d'argent, pas juste un nombre.
Un formulaire de commande sans total visible oblige les gens à calculer de tête ou à attendre un e-mail de confirmation pour savoir ce qu'ils paient. Un total en direct supprime cette incertitude et détecte les erreurs de saisie (un zéro en trop sur un champ de quantité) avant l'envoi plutôt qu'après. Ce guide détaille la structure : les champs, la formule, et les petits détails qui rendent le total fiable.
Structurer d'abord les champs
Chaque article commandable a besoin d'un champ quantité (numérique) et, si le prix varie, d'un champ prix ou d'une valeur fixe référencée directement dans la formule. Gardez quantité et prix comme des champs séparés plutôt qu'un seul champ texte combiné, car un champ calculé a besoin d'entrées numériques propres pour fonctionner.
Pour un catalogue d'articles fixe, un champ de sélection par article, avec le prix intégré à l'option, plus un champ quantité, est généralement plus simple que de demander aux gens de saisir eux-mêmes les prix.
Construire le total calculé
Un champ calculé peut référencer chaque champ quantité et prix dans une formule et mettre à jour le total en direct pendant que la personne remplit le formulaire, avant même d'atteindre l'envoi. Pour plusieurs lignes, la formule multiplie la quantité de chaque article par son prix, puis additionne le tout.
Si vous facturez une taxe ou des frais de livraison fixes, ajoutez-les comme une étape distincte dans la formule plutôt que de les intégrer silencieusement dans une seule ligne, afin que la ventilation reste lisible si vous devez un jour expliquer un total à un client.
Afficher une ventilation, pas juste un nombre
Un total unique sans contexte paraît arbitraire. Dans la mesure du possible, affichez le sous-total, la taxe et la livraison comme des valeurs calculées distinctes, même si seul le total final est mis en avant, pour que le chiffre s'explique de lui-même plutôt que d'être quelque chose que le client doit croire aveuglément.
Réduire les erreurs de saisie
Les champs numériques doivent imposer des limites raisonnables, comme un minimum de 0 et un maximum sensé pour la quantité, afin qu'une faute de frappe ne produise pas silencieusement un total faux d'un facteur 100. Rendre obligatoire tout champ alimentant le total empêche une quantité vide de casser le calcul.
Ce qui se passe après l'envoi
Un formulaire de commande n'est pas en soi un processeur de paiement ; il collecte généralement les détails de la commande et le total, puis redirige vers le paiement ou envoie les détails à la personne qui traite la commande (par notification e-mail ou webhook vers un autre système). Fixez des attentes claires dans le message de succès pour que les gens sachent ce qui suit, qu'il s'agisse d'une facture, d'un lien de paiement ou d'un appel de confirmation.
Dans YeetForm, les champs calculés mettent à jour les totaux en direct pendant la saisie des quantités et des prix, via une formule référençant directement les autres champs, et un webhook peut transmettre la commande finalisée à un autre système une fois envoyée.