Générateur de bon de commande : versions web et papier
Générateur de bon de commande
Générateur de bon de commande : formulaire HTML et modèle imprimable
Listez vos produits et vos prix et obtenez un bon de commande de deux façons : du HTML à copier avec un total en direct, qui envoie vers votre propre gestionnaire de formulaire, et une feuille papier imprimable.
Ajoutez chaque produit avec son prix, choisissez les coordonnées client à collecter et collez l'adresse de votre gestionnaire de formulaire. Vous obtenez le HTML d'un bon de commande avec des champs de quantité et un total qui se met à jour, prêt à intégrer à votre site, ainsi qu'une feuille de commande papier imprimable construite à partir de la même liste pour les marchés, les foires et les commandes par téléphone.
Ce qu'envoie le formulaire généré
Champ du formulaire
Envoyé à votre gestionnaire sous la forme
Remarques
Champ de quantité par produit
qty_<product> = nombre
type=number, min 0, nombres entiers
Nom du client
Obligatoire
E-mail
type=email, vérifié par le navigateur
Téléphone (facultatif)
type=tel
Adresse de livraison (facultative)
Zone de texte
Remarques (facultatives)
Zone de texte
Total de la commande
Non envoyé
L'élément output sert uniquement à l'affichage ; recalculez de votre côté
Beaucoup de petits vendeurs n'ont pas besoin d'une boutique en ligne complète. Une boulangerie qui prend les précommandes des fêtes, une ferme qui vend des paniers de produits ou un club qui vend la tenue de l'équipe ont juste besoin d'une liste, d'une quantité à côté de chaque article et des coordonnées de l'acheteur. Ce générateur écrit exactement cela en HTML simple, pour qu'il fonctionne sur tout créateur de site qui accepte du code personnalisé.
Saisissez le nom de chaque produit et son prix. Ajoutez ou supprimez des lignes selon vos besoins.
Définissez le symbole de devise et cochez les champs client facultatifs que vous voulez.
Collez l'adresse vers laquelle votre formulaire doit envoyer les données. Elle vous est fournie par votre service de formulaires ou votre propre serveur.
Essayez l'aperçu : changez les quantités et regardez le total se mettre à jour.
Copiez le HTML dans votre site, ou cliquez sur Imprimer le bon papier pour obtenir une feuille que les clients remplissent à la main.
Considérez le total affiché sur la page comme une indication pour le client. Calculez vous-même le montant réel à partir des quantités reçues.
Gardez des noms de produits courts et uniques : ils font partie des noms de champs que reçoit votre gestionnaire.
Testez un vrai envoi à vous-même avant de partager la page, et vérifiez l'e-mail ou la feuille de calcul qui arrive.
Si vous avez besoin d'un paiement au moment de la commande, un formulaire seul ne suffit pas ; associez-le à un lien de paiement ou à un vrai tunnel de paiement.
Sur la feuille imprimée, laissez vides les colonnes Qté et Total ligne, et ajoutez votre numéro de téléphone pour les questions.
Questions fréquentes
Où va la commande quand quelqu'un l'envoie ?
Vers l'adresse indiquée dans l'attribut action du formulaire, envoyée avec la méthode post. Cette adresse doit appartenir à quelque chose qui accepte les envois de formulaires, comme un service backend de formulaires ou un script sur votre propre serveur. Cette page ne reçoit ni ne stocke aucune commande.
Pourquoi le total ne figure-t-il pas dans les données envoyées ?
Le total se trouve dans un élément output, et le contenu d'un élément output n'est pas envoyé avec le formulaire. C'est voulu : un visiteur pourrait modifier un nombre dans son navigateur, le vendeur doit donc toujours calculer le montant à partir des quantités.
Le total fonctionne-t-il sans JavaScript ?
Le formulaire s'envoie toujours sans scripts, mais le total en direct est calculé par un court script inclus dans le code. Si les scripts sont désactivés, le total reste simplement à zéro.
Quelle différence avec un formulaire de réservation ?
Un bon de commande collecte des produits et des quantités. Un formulaire de réservation collecte une date, une heure et un service. Pour les rendez-vous, utilisez plutôt notre générateur de formulaire de réservation.
Puis-je styliser le formulaire pour l'accorder à mon site ?
Oui. Le code utilise un petit bloc style avec des noms de classes simples qui commencent par of-, vous pouvez donc changer les couleurs, les polices et les espacements sans toucher au reste de votre page.
Choisir un gestionnaire de formulaire
Une page web statique ne peut pas envoyer d'e-mail toute seule. Le formulaire a besoin d'une destination : un service backend de formulaires qui transfère les envois vers votre boîte mail ou une feuille de calcul, la fonction formulaire de votre créateur de site, ou un petit script sur votre propre serveur.
Quel que soit votre choix, copiez l'adresse d'envoi exacte qu'il vous donne dans le champ du gestionnaire ci-dessus. S'il exige des noms de champs précis, renommez les champs dans le code pour qu'ils correspondent.
Les bons de commande papier restent utiles
Sur un stand ou lors d'un événement scolaire, un porte-bloc avec une feuille de commande imprimée est plus rapide que de demander aux gens d'ouvrir un site web. Imprimer à partir de la même liste de produits garantit des prix identiques sur papier et sur le web.
Rassemblez les feuilles, puis saisissez vous-même les commandes dans le formulaire web en fin de journée pour que tout arrive au même endroit.
Recalculez le total là où arrive la commande
Votre gestionnaire reçoit des quantités, pas un total fiable. Ce petit exemple côté serveur en JavaScript calcule le prix d'une commande à partir de votre propre liste de prix et ignore tout ce qui est inconnu.
Calculer le prix d'une commande à partir des quantités envoyées
Les prix sont stockés de votre côté, donc un visiteur qui modifie la page ne peut pas changer ce qu'il doit.
Créez votre bon de commande
Titre du formulaire
Symbole de devise
Adresse du gestionnaire de formulaire (où les commandes sont envoyées)
Produits et prix
Produit {n}
Prix {n}
Supprimer le produit {n}
Ajouter un produit
Champs client facultatifs
Adresse de livraison
Remarques
Aperçu
Quantité de {v}
Total
L'aperçu n'envoie rien. Votre formulaire envoie les données à l'adresse du gestionnaire que vous avez saisie.