Comment effectuer des calculs dans votre formulaire à l'aide d'un widget

Résumer avec :

Au-delà de la Logique conditionnelle, vous pouvez aussi utiliser le widget Calculatrice pour formulaire pour réaliser des calculs dans votre formulaire. Dans ce guide, nous verrons comment utiliser le widget pour effectuer un calcul. Il est idéal pour calculer des coûts totaux, des scores, appliquer des formules ou créer des résultats personnalisés en fonction des réponses des utilisateurs. Que vous créiez un bon de commande, un devis ou un questionnaire, ce widget automatise les calculs, ce qui vous permet de gagner du temps, de réduire les erreurs et d’offrir une expérience plus fluide à tous.

Ajouter et configurer le widget Calculatrice pour formulaire

Que vous souhaitiez créer un nouveau formulaire ou mettre à jour un formulaire existant, ajouter le widget Calculatrice pour formulaire et configurer des formules de calcul est simple et rapide. Voici comment procéder :

Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur le bouton Ajouter un élément à gauche de la page.

Capture d'écran d'une formulaire de commande dans le Générateur de formulaires Jotform avec une flèche vers le bouton Ajouter une élément

Dans le volet Éléments du formulaire qui s’ouvre à gauche, cliquez sur l’onglet Widgets, recherchez le widget Calculatrice pour formulaire et cliquez dessus. Vous pouvez aussi le glisser-déposer à l’endroit souhaité sur votre formulaire.

Capture d'écran d'un formulaire de commande dans le Générateur de formulaires Jotform avec une flèche vers le widget Calculatrice pour formulaire dans le volet Éléments du formulaire et sous l'onglet Widgets

Ensuite, dans le volet du widget Calculatrice pour formulaire qui s’ouvre à droite, vous pouvez ajouter différents éléments à l’éditeur de formule en fonction de ce que vous souhaitez que le widget calcule pour vous.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec un élément widget Calculatrice pour formulaire ajouté et le volet à droite qui montre l'éditeur de formules du widget

Le bouton Ajout champ situé au-dessus du pavé numérique permet d’inclure des champs de formulaire dans le calcul. Vous pouvez ensuite utiliser la barre de recherche du menu qui s’affiche et sélectionner le champ souhaité.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec une flèche vers le bouton Ajout Champ et un encadré autour des champs du formulaire repris dans le menu du bouton

Dans l’éditeur de formules, un champ de formulaire s’affiche avec son libellé et un fond bleu. L’indicateur situé à sa droite doit afficher un chiffre entre 0 et 9 pour que la valeur du champ soit prise en compte dans le calcul. S’il affiche une lettre entre A et Z, la valeur sera ajoutée sous forme de texte au résultat. Vous pouvez cliquer sur l’indicateur pour basculer entre les formats numérique et textuel.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec une flèche vers le champ de formulaire sélectionné pour la formule de calcul et un encadré autour de l'indicateur numérique

Vous pouvez ajouter des chiffres et nombres, des points décimaux, des parenthèses et des opérateurs de calcul (+, –, ×, ÷) à l’aide de votre clavier ou du pavé numérique de l’éditeur de formules.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec un encadré autour du pavé numérique de l'éditeur de formules du widget Calculatrice pour formulaire

Ces éléments doivent apparaître sur fond gris foncé dans l’éditeur de formules pour être pris en compte dans le calcul. S’ils apparaissent en gris clair, ils sont considérés comme du texte. Vous pouvez cliquer dessus pour changer de format.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec une flèche vers le chiffre 3, le chiffre 0 et l'opérateur * ajoutés dans l'éditeur de formules du widget Calculatrice pour formulaire

Le bouton violet f(x) dans la section Pavé de formules vous permet d’ajouter des fonctions prédéfinies et des propriétés mathématiques à vos calculs. Vous pouvez utiliser la barre de recherche du menu qui s’ouvre et sélectionner la formule souhaitée.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec une flèche vers le bouton violet f(x) et un encadré autour du menu de recherche des formules dans l'éditeur de formules du widget Calculatrice pour formulaire

Dans l’éditeur de formules, les fonctions suivent un format standard, tel que abs(), min(), max() ou round(). Celles-ci s’affichent sur un fond violet et sont automatiquement suivies de parenthèses où vous devez indiquer la valeur ou l’expression sur laquelle elles s’appliquent. Ces fonctions sont utiles pour des calculs plus complexes que les opérations arithmétiques de base. Pour en savoir plus, consultez notre guide intitulé Widget Calculatrice pour formulaire : référence des fonctions mathématiques.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec une flèche vers une fonction violette f(x) count dans l'éditeur de formules du widget Calculatrice pour formulaire

Une fois terminé, cliquez sur Enregistrer.

Capture d'écran du formulaire dans le Générateur de formulaires Jotform avec une flèche vers le bouton Enregistrer du volet Wigdet Calculatrice pour formulaire

Et voilà ! Votre formulaire peut désormais calculer automatiquement les valeurs en fonction des données saisies par l’utilisateur.

Capture d'écran du formulaire Jotform avec des flèches vers les options sélectionnées et un encadré autour du calcul final effectué par le widget Calculatrice pour formulaire

Remarque

L’icône flèche vers le bas située à côté du nom d’un champ dans l’éditeur de formules ouvre une liste qui vous permet de passer à un autre champ de formulaire.
L’icône flèche vers le bas située à côté du nom de la fonction dans l’éditeur de formules ouvre une liste permettant de sélectionner une autre fonction.
Vous pouvez placer votre curseur n’importe où dans l’éditeur de formules pour insérer de nouveaux éléments ou supprimer ceux existants.
Lorsque vous utilisez votre clavier, appuyez sur la touche Entrée pour saisir rapidement l’élément suivant dans l’éditeur de formules, et utilisez les touches Retour arrière ou Suppr pour supprimer facilement des éléments.
Les parenthèses ajoutées à l’aide du pavé numérique de formule dans la fenêtre du widget Calculatrice pour formulaire sont ajoutées sous forme de nombres, tandis que les parenthèses saisies au clavier sont ajoutées par défaut sous forme de chaînes de caractères.

Configurer les options du widget Calculatrice pour formulaire

Vous pouvez configurer les paramètres qui contrôlent le fonctionnement de votre calcul et l’affichage du résultat. Voici comment procéder :

Dans le Générateur de formulaires Jotform, cliquez sur votre widget Calculatrice pour formulaire, puis sur l’icône en forme de baguette magique située à sa droite.
Ensuite, dans le volet du widget Calculatrice de formulaire à droite, cliquez sur Options en dessous de la section Clavier de formules.

Capture d'écran du formulaire Jotform avec l'élément widget Calculatrice pour formulaire, une flèche vers l'icône de baguette magique et une autre vers Options dans le volet de droite

Dans la section Options, cochez les cases correspondant aux éléments suivants pour les activer selon vos besoins :
- Ajouter un champ à l’équation comme texte par défaut : lorsque cette option est activée, les champs de formulaire, les nombres, les opérateurs et les fonctions sont ajoutés à l’éditeur de formules sous forme de texte. Même s’ils apparaissent comme des chaînes de caractères, le calcul fonctionne correctement tant que le format est correct.
  - Les champs de formulaire sont indiqués entre accolades (ex., {8}), qui font référence à leurs identifiants de champ uniques.
  - Les fonctions sont écrites entre symboles ©, suivis de parenthèses (ex., ©abs©({8})).
  - Les équations complètes sont encadrées par des crochets (ex., [©abs©({8}) + ©min©(9,6)]).
- Le champ de résultat est en lecture seule : cette option empêche les utilisateurs de modifier le résultat. La valeur calculée reste ainsi verrouillée et ne se met à jour que selon la formule.
- Afficher les décimales vides : cette option affiche des zéros après la virgule (par exemple, 5,00 au lieu de 5), ce qui peut être utile pour la mise en forme des prix ou d’autres valeurs décimales fixes.
- Ignorer les champs masqués : cette option exclut les champs masqués du calcul. Seuls les champs visibles ou actifs ont ainsi une incidence sur le résultat.
- Utiliser des virgules au lieu du point décimal : cela change le symbole décimal du point (.) à la virgule (,), comme cela est la règle en France et dans d’autres régions du monde.
- Décimales dans les résultats numériques : cette option vous permet de définir le nombre de chiffres après la virgule dans le résultat. Vous pouvez choisir entre 0 et 10 décimales, selon la précision souhaitée.
Une fois que vous avez terminé, cliquez sur le bouton Retour.

Capture d'écran du formulaire Jotform avec l'élément widget Calculatrice pour formulaire, avec un encadré vers les options et une flèche vers le bouton Retour

Cliquez ensuite sur Enregistrer pour appliquer les modifications.

Et voilà ! Votre calcul est maintenant configuré et prêt à afficher les résultats comme vous le souhaitez. Pour voir comment cela fonctionne sur un formulaire réel, consultez notre formulaire de démo.

Capture d'écran du formulaire Jotform avec les champs remplis et une flèche vers le montant total calculé automatiquement par le widget Calculatrice pour formulaire

Conseils de pro

Vous pouvez attribuer des valeurs de calcul aux options de texte des champs de type Liste déroulante, Choix unique ou Choix multiples afin de les inclure dans le calcul. Consultez notre guide Comment attribuer une valeur de calcul à un champ pour en savoir plus.
Assurez-vous d’inclure les deux parenthèses dans vos fonctions : sans parenthèse ouvrante, aucun résultat ne sera généré et sans parenthèse fermante, la fonction sera ignorée.
Lorsque vous utilisez des fonctions comme atan2(), max(), min(), pow(), avg(), avgNoZero(), addDays(), subtractDays() et nth(), veillez à saisir les virgules comme des nombres (en gris foncé). Si elles sont saisies comme des chaînes de caractères, la fonction ne fonctionnera pas.
Évitez d’utiliser des opérateurs consécutifs sans nombre entre eux, car ils ne renverront aucun résultat.
Pour afficher un symbole ou une unité comme $ ou kg à côté du résultat, assurez-vous d’utiliser des chaînes de caractères (gris clair), afin qu’elles apparaissent comme du texte brut dans le résultat.