Comment ajouter un calculateur de coût à votre site Web WordPress

Si vous avez déjà utilisé un calculateur de prêt ou un estimateur de prix, vous vous êtes peut-être demandé s'il existait un moyen d'ajouter un calculateur de coût à votre site WordPress. Il y en a, et c'est super facile.

Bien sûr, vous pouvez apprendre du JavaScript et assommer une calculatrice décente en quelques mois - ou vous pouvez économiser une tonne de temps et de maux de tête en utilisant un plugin. C'est pourquoi nous aimons WordPress, n'est-ce pas ?

Restez dans les parages, et je vous montrerai comment c'est fait.

Un calculateur de coût polyvalent pour WordPress

Lorsque vous utilisez un calculateur de prêt sur un site hypothécaire, il peut sembler qu'il y ait un code complexe derrière. Et vous avez peut-être imaginé que c'est hors de portée pour votre site. Embaucher un développeur pour implémenter un formulaire comme celui-ci peut dépasser votre budget.

Et si vous deviez changer quelque chose dans la calculatrice ? Vous devrez ramener le développeur pour le réparer pour vous. Ce serait une douleur et peut-être hors de votre portée financière.

Heureusement, un plugin WordPress vous permettra de gérer tout cela vous-même - aucun code requis.

Le calculateur de coût vous permet de créer tout type de formulaire de calcul dont vous avez besoin, et il aura fière allure pour démarrer.

Premiers pas avec le calculateur de coûts

Bien que le plugin Cost Calculator soit facile à utiliser, je vais vous guider à travers les fonctionnalités et vous montrer un exemple qui peut inspirer vos propres formulaires. Tout d'abord, récupérons le plugin.

Calculateur de coût d'installation

Vous pouvez trouver le calculateur de coûts en recherchant dans votre tableau de bord WordPress sous Plugins > Ajouter un nouveau ou en le téléchargeant sur WordPress.org. De plus, vous pouvez acheter la version Pro, qui propose des options telles que la liste déroulante des images, le téléchargement de fichiers, etc.

Création de calculatrices

Une fois le plugin activé, vous verrez l'icône du calculateur de coût apparaître dans le menu de votre tableau de bord WordPress. Cliquez dessus pour accéder au menu du calculateur de coût.

Initialement, il n'y a pas de formulaires sur la liste. Pour commencer, cliquez simplement sur Créer nouveau en haut à droite. Cependant, puisque vous êtes nouveau dans l'utilisation du plugin, je vous recommande d'essayer l'option Importer des calculatrices . Dans le menu qui s'ouvre, choisissez d' exécuter l'importation de démonstration par défaut . Cela remplira votre liste avec quelques exemples de calculatrices fournies par les auteurs du plugin.

Avant de créer votre première calculatrice, il est utile de creuser dans les exemples de démonstration fournis. Cela vous donnera une idée des menus et de la structure d'une calculatrice. Choisissez une calculatrice et sous l'onglet Action , cliquez sur l'icône en forme de crayon pour passer en mode édition.

Modification des calculatrices

Pour cet exemple, utilisons la calculatrice Photographie. Passez en mode édition, faites défiler vers le bas et cliquez sur Aperçu . Cela vous montre ce à quoi vous pouvez vous attendre lorsque la calculatrice est affichée. Celui-ci aide les clients potentiels en photographie à calculer le coût lors du choix entre différents forfaits.

Revenons au menu d'édition et passons en revue l'onglet Calculatrice .

Sur la droite se trouvent tous les éléments disponibles à utiliser dans notre calculateur. Dans cet exemple, à gauche, nous pouvons voir qu'ils ont utilisé les éléments Drop Down, Quantity et Total. Nous pouvons modifier n'importe lequel d'entre eux en les survolant, où un bouton d'édition apparaîtra.

Le premier élément est une liste déroulante nommée Services. À l'intérieur, nous pouvons voir les champs Nom et Description en haut. Si nous faisons défiler plus loin, nous pouvons spécifier plus d'options pour la liste déroulante.

Cette calculatrice totalise le coût des services de photographie. Nous pouvons configurer tout cela dans cette liste déroulante, y compris les prix.

L'élément suivant, Hours , est un élément Quantity. Pour cela, il suffit de définir l'unité de quantité pour que le calcul fonctionne. Puisque nous calculons le temps, nous n'avons pas besoin de modifier les paramètres de devise. Bien que la valeur par défaut ne soit pas obligatoire, elle peut aider à orienter les visiteurs vers un choix que vous pourriez préférer.

L'élément Total est l'endroit où le calcul sera effectué. Dans le champ Formule de la calculatrice, nous pouvons voir ce qui ressemble à du code compliqué. Ce n'est vraiment pas le cas. Si vous supprimez tout dans ce champ, vous pouvez le recréer facilement. Sous Champs disponibles, vous verrez que nous n'avons que deux champs que nous pouvons utiliser dans la formule. Cliquez sur le premier et il apparaît dans le champ Formule. Ensuite, nous avons besoin d'un opérateur, alors cliquez sur l'astérisque ci-dessous pour signifier que nous voulons multiplier les deux valeurs de champ. Cliquez sur l'autre option Champ disponible et votre formule est terminée.

Maintenant que nous voyons comment la calculatrice est configurée, examinons les conditions, les paramètres et la personnalisation.

Les conditions

Vous n'avez peut-être pas besoin de la fonctionnalité Conditions pour chaque formulaire, mais lorsque vous le faites, c'est une fonctionnalité fantastique à avoir. Le système conditionnel vous permet de lier différents champs et d'y ajouter des conditions. Vous pouvez afficher, masquer ou désactiver des champs spécifiques selon qu'une condition est remplie ou non. Par exemple, si vous disposez d'un calculateur de prêt, vous pouvez définir le taux d'intérêt pour qu'il n'apparaisse que lorsque l'utilisateur saisit un montant de prêt spécifique.

Réglages

Le menu des paramètres du calculateur de coût est l'endroit où vous ajusterez vos paramètres de devise ou configurerez les intégrations de la passerelle de paiement.

La plupart des paramètres sont intuitifs ici, mais je vais en couvrir quelques-uns importants.

Si vous avez une boutique WooCommerce, le calculateur de coûts s'y intègre. Il s'agit d'une fonctionnalité pratique qui peut augmenter votre taux de conversion lorsqu'elle est mise en œuvre. Par exemple, vous pouvez configurer un formulaire de tarification afin que lorsque les utilisateurs cliquent sur le bouton Soumettre, ils soient directement redirigés vers votre page de paiement Woo. Vous pouvez également ajouter un bouton Ajouter au panier à votre formulaire.

Send Form vous permet d'ajouter un formulaire d'envoi en s'intégrant au plugin Contact 7. Une fois qu'un utilisateur clique sur Soumettre sur le formulaire de la calculatrice, il aura la possibilité d'envoyer les résultats du formulaire par e-mail.

Si vous ne voulez pas qu'une légion de robots spammeurs vous envoient des formulaires indésirables, vous pouvez inclure un bouton ReCaptcha. Vous devrez d'abord configurer cela via Google, mais vous serez prêt à partir une fois que vous aurez votre clé de site et votre clé secrète.

Personnaliser

Le menu Personnaliser est littéralement la cerise sur le gâteau de la calculatrice. Vous pouvez modifier à peu près n'importe quel aspect de la conception de vos formulaires à l'aide de simples curseurs et sélecteurs de couleurs.

Ajoutez des bordures aux cases, modifiez la couleur et la taille des polices, ou créez même votre propre couleur d'arrière-plan dégradé. Le menu de personnalisation facilite le style de vos formulaires en fonction de l'image de marque de votre site.

Présentez un superbe calculateur de coûts sur votre site Web

Si vous avez besoin d'un moyen d'ajouter un formulaire de calculatrice à votre site, le plugin Cost Calculator n'est pas seulement indolore, il est amusant à utiliser. Sans engager de développeur ni écrire de code, vous pouvez créer de superbes formulaires pour votre site WordPress en quelques minutes seulement.

Tarification

Cost Calculator est gratuit à installer et à utiliser. La version Pro contient des fonctionnalités telles que la passerelle de paiement, le paiement WooCommerce, les conditions, les téléchargements de fichiers et un sélecteur de date. Le prix commence à 29,99 $ pour une seule licence annuelle.