Dans ce tutoriel, vous apprendrez à créer un formulaire d’estimation de prestation avec de la logique pour calculer le prix total estimé à partir des saisies des utilisateurs.
Le formulaire comprend des variables pour le type de prestation, le nombre d’heures, le nombre de personnes nécessaires et l’urgence ; chacun de ces champs contribue au calcul du coût final.
ℹ️ Si votre formulaire est relié à un moyen de paiement en ligne comme Stripe ou PayPal, veillez à utiliser la variable par défaut Price pour les calculs de prix.
Cette variable est automatiquement disponible et utilisable dans la logique lorsque vous avez un champ produit ou que vous avez activé les paramètres de paiement avec un moyen de paiement sélectionné.
Pour les formulaires sans intégration de paiement en ligne, vous pouvez utiliser des champs de variable personnalisés pour vos calculs de prix.
Suivez ce guide étape par étape pour créer un formulaire d’estimation avec calcul du prix :
Étape 1 : connectez-vous à votre tableau de bord Formaloo
Ouvrez votre tableau de bord, ou inscrivez-vous gratuitement si vous n’avez pas encore de compte.
Créez votre formulaire en cliquant sur + New → Form pour partir de zéro.
🧩 Si vous préférez partir d’un modèle prêt à l’emploi, explorez notre galerie de modèles : choisissez celui qui correspond le mieux à votre cas et personnalisez-le en quelques minutes !
Formulaire de calcul de devis de prestation
Estimez facilement le coût d’un projet avant de commencerCalculateur de devis dynamique
Générez rapidement et sans effort des devis personnalisés pour vos servicesCalculateur de coût d’application
Découvrez en moins d’une minute combien coûtera votre applicationFormulaire d’estimation
Calculez des estimations en quelques secondes
Étape 2 : ajouter et personnaliser vos champs
Grâce au générateur intuitif par glisser-déposer de Formaloo, vous pouvez ajouter rapidement tous les champs nécessaires à votre formulaire d’estimation.
Dans cet exemple, nous inclurons des champs tels que :
Type de service (Dropdown) :
permettez aux utilisateurs de choisir le service dont ils ont besoin (par ex. « Réparation », « Nettoyage », etc.).Décrivez votre demande (champ texte) :
ajoutez un champ de texte long ou court pour que les utilisateurs précisent leurs besoins particuliers ou des détails spécifiques.Nombre d’heures estimé (champ Number) :
collectez une estimation du nombre d’heures nécessaires à la prestation.
Astuce : vous pouvez définir des valeurs minimale et maximale si les prestations ont généralement une durée prévisible.Nombre de personnes nécessaires (champ Number) :
permettez aux utilisateurs d’indiquer combien de personnes sont nécessaires pour réaliser la prestation.Quand ? (Single Choice) :
permettez aux utilisateurs d’indiquer l’urgence avec des options comme « Dès que possible », « Cette semaine », « Ce mois-ci » ou « Plus tard ».
Astuce : vous pourrez ensuite utiliser la logique pour ajuster le prix selon l’urgence.Total à payer (champ Content) :
utilisez un bloc de contenu pour afficher le montant total dû, en reprenant le montant calculé depuis le champ de variable grâce au report de réponses (par ex. « Votre total est de : {{total}} »).
Astuce : placez ce champ à la fin de votre formulaire pour donner aux utilisateurs un retour clair et immédiat avant la soumission.
Étape 3 : ajouter un champ de variable pour le montant total à payer
Ce champ de variable sert de conteneur pour le prix total estimé, calculé en temps réel.
En lui attribuant un ID, vous vous assurez que tous les calculs logiques (comme l’ajout ou la soustraction de valeurs selon les sélections de l’utilisateur) mettent à jour ce champ.
Ainsi, lorsque le formulaire atteint la dernière étape ou affiche le prix total, le champ indique le bon montant, ce qui rend le processus d’estimation fluide et dynamique.
Ajouter un champ Variable :
dans l’éditeur de formulaire, ajoutez un champ de variable de type entier qui stockera le montant total à payer.
Nommez ce champ, par exemple, « Montant total à payer » pour indiquer clairement que c’est ici que le prix final sera calculé et stocké.
Attribuer un ID au champ :
donnez à ce champ un ID (par ex. « total ») afin de pouvoir y faire facilement référence lors de l’application de la logique.
L’ID indique au système où stocker les valeurs calculées selon les conditions que vous définirez dans la logique.
💡Astuce :
Pour éviter des valeurs inattendues, initialisez votre variable en définissant sa valeur par défaut sur 0. Le total sera ainsi calculé correctement, même si certaines questions restent sans réponse.
📝 Informations complémentaires :
Vous pouvez modifier à tout moment le nom ou l’ID d’un champ de variable en cliquant sur le champ dans la barre latérale droite. Si vous modifiez l’ID, pensez à le mettre à jour partout où vous l’avez utilisé.
Cet ID peut être utilisé pour le report de réponses, qui permet d’afficher la valeur de la variable dans des messages, des pages de confirmation, des e-mails, des PDF, et plus encore.
Étape 4 : configurer la logique de calcul du prix
Ouvrez Settings → Advanced Logic, puis utilisez l’onglet Field.
Configurer la logique selon le type de prestation :
Ajoutez une condition :
si le Type de service est « Réparation », ajoutez 20 $ au Montant total à payer.Ajoutez une autre condition :
si le Type de service est « Nettoyage », ajoutez 15 $ au Montant total à payer.
Répétez l’opération pour chaque service proposé.
Configurer la logique selon le nombre d’heures :
Ajoutez une condition :
Si Heures est supérieur à 10 → Ajouter 30 à Montant total à payer
Si Heures est inférieur ou égal à 10 ET supérieur à 5 → Ajouter 20 à Montant total à payer
Si Heures est inférieur ou égal à 5 → Ajouter 10 à Montant total à payer
Configurer la logique selon le nombre de personnes :
Ajoutez une condition :
Si Personnes est supérieur à 5 → Ajouter 50 à Montant total à payer
Si Personnes est inférieur ou égal à 5 → Ajouter 20 au Montant total à payer
Configurer la logique selon l’urgence :
Ajoutez une condition :
si Quand ? est « Dès que possible », ajoutez 25 $ au Montant total à payer.
Si Quand ? est « Cette semaine », ajoutez 5 au Montant total à payer.
Étape 5 : afficher le prix total estimé
Créez un champ Content pour afficher le prix total :
ajoutez un champ Content à la fin ou au début du formulaire, à l’endroit où le prix total sera affiché.Utilisez le report de réponses pour afficher le prix :
dans la description du champ, utilisez la fonctionnalité de report de réponses en insérant {{total}} ou @total.
Le prix calculé selon la logique que vous avez définie s’affichera automatiquement.
📝 Informations complémentaires :
Comment ajouter une devise au champ produit : découvrez comment ajouter une devise au champ produit dans les paramètres de votre formulaire et activer les fonctionnalités de paiement.
Comment créer un nouveau moyen de paiement : connectez vos passerelles de paiement à Formaloo en créant un moyen de paiement dans les paramètres du profil et en activant les paiements dans les paramètres de votre formulaire.
Dernière étape : prévisualiser et tester votre formulaire
Une fois toute la logique ajoutée et la passerelle de paiement connectée, prévisualisez votre formulaire pour vérifier que tout fonctionne comme prévu.
Le formulaire calcule désormais automatiquement le prix total estimé à partir des saisies des utilisateurs et permet aux clients de passer au paiement si nécessaire.
