Le champ Product vous permet d’afficher des produits directement dans votre formulaire, chacun avec ses propres images, son nom, sa description, son prix et son sélecteur de quantité. Les répondants peuvent parcourir les produits, ajouter des articles à leur panier et passer au paiement, sans quitter votre formulaire.
C’est utile lorsque vous collectez des commandes de produits physiques ou numériques, organisez une précommande ou permettez aux personnes de choisir parmi un ensemble de services à des tarifs différents.
💡 Vous souhaitez configurer le parcours de commande complet avec paiement en ligne ? Consultez comment créer un bon de commande avec paiement en ligne.
Comment ajouter un champ Product à votre formulaire
Dans votre éditeur de formulaire, cliquez sur +Add field et repérez Product dans la liste des champs. Vous pouvez ajouter autant de champs Product que nécessaire, un par produit à présenter. Chaque champ apparaît dans le formulaire sous forme de fiche.
Pour contrôler la disposition des fiches, vous pouvez ajuster la largeur de chaque champ dans ses paramètres. Une largeur réduite vous permet d’afficher plusieurs fiches produits côte à côte.
Vous pouvez aussi ajuster la largeur du formulaire ou l’espacement des champs pour donner un peu plus d’espace aux fiches produits.
Comment configurer chaque fiche produit
Dans chaque champ Product, vous pouvez configurer les paramètres suivants :
➔ Titre et description
Ajoutez le nom du produit et une description directement sur la fiche. Vous pouvez personnaliser la description en sélectionnant du texte et en utilisant le menu Format text qui s’affiche.
➔ Images
Cliquez sur le champ Product pour ouvrir le panneau des paramètres du champ à droite. Vous pouvez y importer une ou plusieurs images pour présenter le produit. Elles apparaissent dans la fiche de votre formulaire : les répondants peuvent cliquer sur une image pour ouvrir une galerie de toutes les images du produit, avec possibilité de zoomer ou dézoomer.
➔ Prix unitaire
Définissez le prix unitaire de ce produit. La devise dépend du paramètre de devise défini pour l’ensemble du formulaire (voir la section suivante 👀 ).
➔ Quantités minimale et maximale
Contrôlez le nombre d’exemplaires de ce produit qu’un répondant peut sélectionner dans une même soumission.
ℹ️ Comment fonctionnent les quantités minimale et maximale ?
La quantité minimale est la quantité de départ ajoutée au panier lorsque le répondant clique sur Add to cart. Il ne peut pas descendre en dessous : s’il essaie, l’article est retiré et le bouton est réinitialisé.
La quantité maximale est la limite supérieure qu’il peut sélectionner.
Par exemple, si vous définissez un minimum de 2 et un maximum de 4, cliquer sur Add to cart ajoute immédiatement 2 articles au panier. Le répondant ne peut pas descendre en dessous de 2, ni en ajouter plus de 4 dans une même soumission.
➔ Libellés et messages personnalisés
Vous pouvez éventuellement personnaliser le libellé du bouton Add to cart, ainsi que les messages affichés lorsqu’un répondant tente de descendre en dessous de la quantité minimale ou de dépasser la quantité maximale.
Comment définir la devise de vos champs Product
La devise de tous les champs Product d’un formulaire se définit à un seul endroit. Accédez au panneau Settings du formulaire, à droite de l’éditeur, et faites défiler jusqu’à la section Form payment .
Vous y trouverez la liste déroulante Currency : votre choix s’applique à tous les champs Product du formulaire :
Comment Formaloo calcule-t-il le prix total à partir des champs Product ?
Lorsque vous ajoutez un champ Product à votre formulaire et le publiez, Formaloo crée automatiquement une variable Price dans votre formulaire (une variable système en lecture seule) : vous n’avez pas à la configurer manuellement.
Chaque fois qu’un répondant sélectionne un produit et choisit une quantité, le montant correspondant (prix unitaire × quantité) est ajouté à cette variable Price.
Si votre formulaire comporte plusieurs champs Product, toutes les sélections sont additionnées dans la même variable :
ℹ️ L’ID de la variable de prix est toujours price. Vous pouvez y faire référence n’importe où dans votre formulaire avec @price, par exemple sur la page de fin, dans un e-mail de confirmation ou dans un modèle PDF. C’est utile pour montrer leur total aux répondants à n’importe quel moment du parcours.
Comment ajouter des coûts ou des options supplémentaires à vos champs Product
Si votre formulaire comprend des frais ou options supplémentaires en plus des produits (options de produit, emballage, livraison ou tout autre extra), vous pouvez aussi les intégrer au prix total.
Contrairement aux champs Product, les montants issus d’autres types de champs (champs à choix ou listes déroulantes, par ex.) ne sont pas ajoutés automatiquement à la variable Price. Vous devrez configurer des règles personnalisées dans Advanced logic : lorsqu’une option précise est sélectionnée, ajouter le montant correspondant à la variable Price.
Ensuite, le fonctionnement est identique : le montant est inclus dans le total, transmis à la page de paiement si un moyen de paiement est connecté, et peut être repris avec @price n’importe où dans le formulaire.
💡 Pour une présentation détaillée de ce fonctionnement, consultez comment calculer le prix supplémentaire dans votre bon de commande.
Comment connecter une passerelle de paiement et accepter les paiements à la soumission
Si vous souhaitez que les répondants paient après avoir sélectionné vos produits et soumis le formulaire, activez l’option Form with payment dans la section Form payment des paramètres de votre formulaire. Une fois l’option activée, vous pourrez sélectionner un moyen de paiement dans la liste déroulante.
ℹ️ Les moyens de paiement se configurent séparément, via l’icône de votre profil → Apps & integrations. Créez-y d’abord votre moyen de paiement : il apparaîtra ensuite dans la liste déroulante des moyens de paiement des paramètres de votre formulaire.
Une fois un moyen de paiement connecté, les répondants sont redirigés vers la page de paiement à la soumission.
Le total de la variable Price est transmis directement à la page de paiement pour qu’ils puissent finaliser leur achat.
💡 Vous souhaitez choisir la page sur laquelle arrivent vos répondants après le paiement ?
💡 Vous souhaitez proposer un paiement par abonnement pour un produit ?
Activez l’option Stripe subscription (beta) dans les paramètres du champ Product. Stripe doit être connecté comme moyen de paiement. Consultez comment créer un paiement par abonnement.
Comment afficher le prix total calculé avant (ou sans) passer au paiement
Vous n’êtes pas obligé de connecter une intégration de paiement pour utiliser les champs Product ou la variable Price.
Si vous créez un formulaire de précommande, un calculateur de devis ou tout parcours dans lequel vous souhaitez afficher le total sans traiter de paiement, vous pouvez quand même utiliser les champs Product et la variable Price pour calculer et afficher le prix estimé.
Reprenez simplement @price là où vous en avez besoin (dans le formulaire lui-même, sur ses pages de fin, dans un e-mail de suivi ou dans un modèle PDF) et les répondants verront leur total calculé sans passer au paiement proprement dit.
Comment gérer le stock et la disponibilité dans votre formulaire
Le champ Product ne propose pas encore de limite intégrée de stock ou de disponibilité. Quelques options peuvent vous aider si vous devez limiter le nombre de commandes acceptées :
Quantité maximale dans le champ Product
Limite le nombre d’exemplaires d’un produit qu’un même répondant peut sélectionner par soumission.
Nombre maximum de réponses au formulaire
Ferme automatiquement le formulaire dès qu’un nombre défini de soumissions est atteint, quels que soient les produits sélectionnés.
Limites de réservation et de disponibilité
Si vous utilisez des champs à choix unique ou des listes déroulantes en plus de vos champs Product, ces types de champs prennent en charge des limites de disponibilité intégrées.
Vous cherchez une autre façon d’encaisser des paiements ?
Si encaisser un paiement en fonction des produits ou options sélectionnés ne correspond pas à votre besoin, et que vous souhaitez facturer un montant fixe à chaque soumission quelles que soient les réponses, vous pouvez plutôt définir un montant de paiement fixe dans votre formulaire.
C’est idéal pour collecter des dons, des frais d’inscription à un événement ou un atelier, des cotisations, des frais de dossier ou des réservations de consultation : toute situation où chacun paie le même montant.
En résumé
Le champ Product gère au même endroit l’affichage des produits, le panier et les prix, et s’intègre directement aux fonctionnalités de paiement et de reprise des réponses de Formaloo. Une fois vos produits configurés, la variable Price effectue automatiquement les calculs, que vous redirigiez les répondants vers le paiement ou utilisiez le total dans un e-mail de suivi ou sur une page de fin.