Comment créer un calculateur de prix pour votre site Web

Publié: 2024-01-18

Vous vous demandez comment créer un calculateur de prix pour votre site Web qui permet aux utilisateurs de sélectionner des produits et d'effectuer des paiements instantanément ?

Vous serez heureux d'apprendre que WPForms permet aux utilisateurs de créer des formulaires de commande pour une variété d'entreprises et de cas d'utilisation qui calculent automatiquement les prix.

Créez votre calculateur de prix maintenant

Alors, sans plus tarder, examinons les étapes à suivre pour créer un calculateur de prix pour votre site Web !

Comment créer un calculateur de prix pour votre site Web

Créer un calculateur de prix pour votre site Web à l'aide de WPForms est incroyablement simple. Suivez les étapes ci-dessous pour commencer !

Dans cet article

  • 1. Installez et activez le plugin WPForms
  • 2. Connectez WPForms à Stripe
  • 3. Sélectionnez un modèle de formulaire de commande
  • 4. Utilisez des formules personnalisées pour les totaux avancés
  • 5. Publiez votre formulaire de facturation/commande

1. Installez et activez le plugin WPForms

WPForms est un excellent outil pour créer des formulaires tels que des formulaires de contact et des formulaires de commande. Il propose plus de 1 300 modèles de formulaires WordPress que vous pouvez utiliser.

Pour utiliser le module complémentaire Calculations, vous devez obtenir WPForms Pro. Cela vous offre plus de fonctionnalités telles que des formulaires de commande avec des champs de total personnalisables.

the wpforms homepage

Pour commencer, achetez la licence Pro. Ensuite, installez WPForms sur votre site Web. Si vous avez besoin d'aide, suivez ces instructions pour ajouter un plugin à WordPress.

2. Connectez WPForms à Stripe

Après avoir WPForms, vous devez ajouter le module complémentaire Stripe Pro.

Si vous le souhaitez, vous pouvez installer le module complémentaire pour un autre processeur de paiement, tel que PayPal ou Square, mais nous recommandons Stripe pour créer des formulaires de calcul de prix.

Cela dit, allez dans WPForms dans votre menu WordPress et cliquez sur Addons .

add new addon wpforms

Recherchez le module complémentaire Stripe Pro et installez-le sur votre site Web. Pour cela, cliquez simplement sur le bouton Installer puis sur le bouton Activer .

activate stripe pro addon

Ensuite, allez dans WPForms » Paramètres et cliquez sur Paiements . Ici, vous pouvez choisir le type de devise que vous souhaitez utiliser.

wpforms currency settings

Ensuite, connectez votre site à Stripe en cliquant sur le bouton bleu et en saisissant vos informations Stripe. Si vous n'avez pas de compte Stripe, vous pouvez en créer un maintenant.

connect with stripe

Une fois connecté à Stripe, revenez à WPForms » Paramètres » Paiements . Vous devriez voir une coche verte indiquant que vous êtes connecté.

stripe connection status

Désormais, vous pouvez créer votre formulaire de commande avec une fonction de calcul de prix et obtenir des paiements avec Stripe instantanément !

3. Sélectionnez un modèle de formulaire de commande

Créons votre formulaire de commande maintenant. Accédez à WPForms depuis votre tableau de bord WordPress et cliquez sur l'option Ajouter un nouveau .

wpforms add new

Après cela, donnez un nom à votre formulaire et choisissez un modèle. Pour ce guide, nous choisirons le Formulaire de facturation/commande pour accélérer la création du formulaire.

select billing form

Ce modèle comporte un champ Éléments multiples et un champ Total . Vous pouvez modifier le formulaire pour ajouter différents types de produits et déterminer le prix total.

Apporter des modifications au champ Éléments multiples

Dans ce guide, nous commençons par un champ Plusieurs articles normal et le modifions pour inclure différents types de chemises.

Cliquez sur le champ Éléments multiples pour modifier le contenu. Voici ce que vous pouvez faire pour rendre le formulaire plus pertinent pour votre entreprise :

  • Étiquette : C'est le nom des choix.
  • Articles : ce sont les différentes choses que vous pouvez choisir et leurs coûts.
  • Afficher le prix après les étiquettes des articles : cochez cette option si vous souhaitez afficher le prix de chaque article.

multiple item field order form

Une fois que vous avez terminé, chaque fois que quelqu'un choisit un produit, le prix total change immédiatement pour correspondre à ce qu'il a choisi.

wpforms total amount display

Choisir plus d'un produit

Peut-être souhaitez-vous laisser les gens choisir plus d’un produit. Vous pouvez le faire facilement avec divers champs et options de personnalisation.

Par exemple, si quelqu’un souhaite acheter un T-shirt et un sweat-shirt, il peut choisir les deux sur le même formulaire.

Accédez à la section Champs de paiement et utilisez le champ Éléments de case à cocher . Ici, vous pouvez lister tous les produits.

wpforms choose products

Désormais, lorsque quelqu'un choisit plus d'un produit, le prix total additionnera tous ses choix.

total amount multiple products

Ajout d'un champ de carte de crédit Stripe

La partie la plus importante d'un bon de commande est de permettre aux clients de payer facilement en ligne pour garantir que vous recevez les paiements et que vous puissiez procéder à l'expédition de la commande.

Auparavant, nous avons ajouté Stripe Pro et l'avons connecté à WPForms pour vous permettre d'accepter des paiements sur votre site. Il est maintenant temps d'ajouter Stripe à votre formulaire.

Pour configurer les paiements Stripe sur votre formulaire, recherchez le champ Carte de crédit Stripe sous Champs de paiement et ajoutez-le à votre formulaire.

add stripe credit card field

Ensuite, allez dans la section Paiements et regardez les paramètres Stripe . Activez l'option pour les paiements uniques.

enable one time payments stripe

Désormais, vos clients peuvent choisir différents produits, voir le prix total et effectuer leurs paiements sur un seul formulaire !

4. Utilisez des formules personnalisées pour les totaux avancés

Si vous souhaitez en faire plus avec les prix totaux affichés à vos clients sur le formulaire de commande, vous pouvez utiliser le module complémentaire de calcul.

Accédez à WPForms »Addons et recherchez le module complémentaire Calculations . Ensuite, cliquez sur le bouton Installer le module complémentaire . Après cela, cliquez sur le bouton Activer .

activate calculations addon

Désormais, vous pouvez créer des formules complexes pour votre prix total. Par exemple, vous pouvez ajouter un champ pour la quantité ou insérer une déduction fiscale standard.

Ajout d'un champ de quantité

Vous voulez permettre aux gens de choisir le nombre de produits qu’ils souhaitent ? Ajoutez un champ de quantité à votre formulaire. Déplacez simplement un champ déroulant vers la zone de formulaire à droite.

select dropdown field

Ensuite, accédez aux options de champ pour ce champ déroulant . Changez son nom en « Quantité » et indiquez les nombres parmi lesquels les gens peuvent choisir.

wpforms dropdown quantity field

Maintenant, ajoutez un champ Élément unique à votre formulaire. Vous pouvez le faire en le faisant glisser et en le déposant sur l'aperçu ou simplement en cliquant dessus.

single item field

Remplacez l' étiquette de ce champ d'article unique par quelque chose comme « Prix total ». Ensuite, accédez à l'onglet Avancé et activez Activer le calcul .

enable calculation option

Dans la zone Formule , connectez le champ Articles multiples au champ Liste déroulante des quantités. Vous pouvez le faire avec une simple formule de multiplication.

$FX_amount * $FX

Ici, $FX est la valeur du champ avec l'ID #X et $FX_amount est la valeur du prix du champ de paiement avec l'ID #X.

Ouvrez le champ Éléments multiples et notez son ID de champ. Vous le trouverez dans Options de champ sous l'onglet Général .

multiple items field id

Faites de même pour le champ déroulant nommé « Quantité ». C’est important pour la prochaine étape, car c’est là que nous créons la formule.

dropdown quantity field id

Maintenant, tout ce que vous avez à faire est de mettre ces identifiants dans la formule (prix du produit multiplié par la quantité). Ainsi, $FX_amount * $FX deviendra $F5_amount * $F10 .

Tapez la formule $F5_amount * $F10 dans la case Formule du champ « Prix total » pour un seul article . Ensuite, cliquez sur Valider la formule pour vous assurer qu'elle est correcte.

validate formula option

Désormais, lorsque quelqu'un sélectionne un produit et sa quantité, le prix total sera automatiquement calculé, grâce à la formule personnalisée que vous avez ajoutée !

Insérer une déduction fiscale standard

Lorsque vous souhaitez calculer les taxes, vous multipliez généralement le sous-total (prix de l'article multiplié par le nombre d'articles) par le taux de taxe.

Comme vous l'avez appris à la dernière étape, la formule pour la somme de notre cas d'utilisation (prix de l'article multiplié par le nombre d'articles) est :

$F5_amount * $F10

Supposons que le montant de la taxe soit calculé à 10 % du sous-total. La formule standard de calcul de la taxe est la suivante :

0.10 * ($F5_amount * $F10)

Le total général, qui intègre la taxe, est déterminé en additionnant le sous-total et la taxe. Ce qui suit représentera l’équation :

($F5_amount * $F10) + (0.10 * ($F5_amount * $F10))

Cela peut être ajouté partout où vous souhaitez afficher le montant final. Nous utiliserons le champ Article unique que nous avons nommé « Prix total + taxes ».

standard tax formula

N'oubliez pas que lorsque vous créez une formule, vous devez utiliser le bon identifiant de champ pour que les calculs fonctionnent correctement. Pour plus d'informations et de l'aide pour créer des formules, consultez cette aide-mémoire pour les calculs.

5. Publiez votre formulaire de facturation/commande

WPForms facilite la publication de votre formulaire et sa mise en ligne sur votre site Web. Après avoir terminé de créer votre formulaire, cliquez sur le boutonEnregistrer .

save form

Ensuite, cliquez sur Intégrer à côté du bouton Enregistrer . Vous pouvez choisir de publier votre formulaire sur une nouvelle page ou sur une page existante.

create new page

WPForms vous amènera à l’éditeur WordPress sans que vous ayez quoi que ce soit à faire. Votre formulaire sera déjà là sur la nouvelle page.

Pour activer votre bon de commande et votre calculateur en ligne avec les calculs WPForms, il vous suffit de cliquer sur le bouton Publier .

publish form

Après la publication, par mesure de précaution, testez le formulaire intégré pour vous assurer qu'il fonctionne comme prévu et écartez tout problème.

form preview

FAQ sur la création d'un calculateur de prix pour votre site Web

Les calculs sont un sujet populaire parmi nos lecteurs. Voici les réponses à plusieurs questions fréquemment posées à ce sujet.

Comment créer une calculatrice personnalisée pour mon site Web ?

Pour créer une calculatrice personnalisée pour votre site Web, vous pouvez utiliser WPForms Pro avec le module complémentaire Calculations. Tout d’abord, installez WPForms Pro sur votre site WordPress.

Ensuite, utilisez le générateur glisser-déposer pour ajouter des champs pour les entrées telles que les quantités et les sélections de produits afin de compléter votre formulaire de commande.

Une fois terminé, activez le module complémentaire de calcul pour effectuer des opérations telles que l'addition ou la multiplication en fonction des entrées de l'utilisateur.

Comment ajouter des calculs à un site Web ?

Pour ajouter des calculs à un site Web, envisagez d'utiliser un générateur de formulaires comme WPForms Pro, qui propose un module complémentaire de calculs.

Après avoir installé WPForms, créez un nouveau formulaire et utilisez la fonction Calculs pour ajouter des opérations mathématiques à vos champs.

Vous pouvez créer diverses formules à l'aide d'expressions arithmétiques de base ou complexes pour calculer des valeurs de manière dynamique en fonction des entrées de l'utilisateur, ce qui est idéal pour les formulaires de commande, les formulaires de réservation, etc.

Comment créer une formule de prix ?

Pour créer une formule de prix sur votre site Web, vous pouvez utiliser WPForms Pro avec le module complémentaire de calcul.

Commencez par créer un formulaire avec des champs pour les articles ou services que vous proposez. Attribuez des prix à ces articles.

Ensuite, utilisez le module complémentaire de calcul pour créer une formule qui multiplie les prix des articles par les quantités et ajoute les frais ou remises supplémentaires.

Ensuite, découvrez comment créer un calculateur hypothécaire personnalisé

Vous souhaitez créer un calculateur hypothécaire personnalisé pour votre site Web ? En utilisant un calculateur de prêt hypothécaire en ligne, les agents de crédit peuvent présélectionner les candidats plus rapidement et réduire la paperasse compliquée. Consultez ce guide pour savoir comment créer un calculateur hypothécaire personnalisé à l’aide d’un modèle WordPress.

Créez votre calculateur de prix maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd’hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro comprend de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.