Comment créer une calculatrice personnalisée dans WordPress (étape par étape)

Le contenu interactif est l'un des meilleurs moyens d'augmenter l'engagement et de garder les visiteurs plus longtemps sur votre site. Un calculateur personnalisé peut répondre instantanément aux questions de vos utilisateurs tout en vous aidant à générer plus de prospects.

Nous avons testé des dizaines de plugins de création de formulaires pour trouver la solution la plus conviviale pour ajouter des calculateurs. D'après notre expérience, le bon outil vous permet de créer tout, des estimateurs d'IMC aux calculateurs de frais d'expédition sans écrire de code.

Dans cet article, nous vous montrerons comment créer facilement un calculateur personnalisé dans WordPress étape par étape.

Pourquoi ajouter un calculateur personnalisé dans WordPress ?

Un calculateur personnalisé permet aux utilisateurs de calculer rapidement des choses sans quitter votre site web.

Par exemple, si vous avez un blog sur la santé et le fitness, vous pourriez ajouter un calculateur d'IMC afin que les utilisateurs puissent voir leur IMC et décider quel plan d'abonnement ou quel produit acheter sur votre site web.

Si vous vendez dans le monde entier, un calculateur en ligne qui convertit les unités métriques en unités impériales peut également vous permettre de réaliser plus de ventes en aidant les clients à vérifier si un produit a la taille ou le poids souhaité.

Vous pouvez également renforcer la confiance et réduire l'abandon de panier en proposant un calculateur d'expédition. Ainsi, les clients ne seront pas surpris par des coûts imprévus lors du paiement.

Ou, vous pouvez ajouter un calculateur hypothécaire à votre site immobilier ou un calculateur de paiement de voiture à votre site de concession automobile.

Ces calculateurs personnalisés sont également un excellent moyen de générer des prospects. Par exemple, vous pouvez demander aux utilisateurs de saisir leur adresse e-mail afin de leur envoyer leurs résultats. De cette façon, un calculateur peut vous aider à constituer une liste d'e-mails dans WordPress.

Cela dit, examinons comment créer facilement un calculateur personnalisé dans WordPress.

Comment créer un calculateur personnalisé dans WordPress

Vous pouvez facilement créer un calculateur personnalisé dans WordPress avec WPForms. C'est le meilleur plugin de calculateur personnalisé et créateur de formulaires du marché. Il est livré avec un constructeur par glisser-déposer, plus de 2000 modèles préfabriqués et une protection complète contre le spam.

En fait, nous aimons tellement WPForms que nous l'utilisons pour tous les formulaires de contact sur notre site, ainsi que pour notre sondage annuel.

Le plugin dispose également d'un module complémentaire Calculs qui facilite la création de tout calculateur que vous souhaitez, y compris un calculateur de prêt hypothécaire, une remise sur les frais d'expédition, un calculateur d'âge, et plus encore. Pour en savoir plus, consultez notre avis sur WPForms.

Tout d'abord, vous devez installer et activer le plugin WPForms. Pour des instructions détaillées, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Une fois activé, visitez la page WPForms » Paramètres depuis la barre latérale d'administration de WordPress pour saisir votre clé de licence.

Vous pouvez obtenir cette clé depuis votre compte sur le site Web de WPForms.

Après cela, rendez-vous sur la page WPForms » Modules complémentaires depuis le tableau de bord WordPress et trouvez le ‘Module complémentaire Calculs’.

Une fois que vous avez fait cela, cliquez simplement sur le bouton ‘Installer le module complémentaire’ pour l'activer sur votre site.

Ensuite, rendez-vous sur la page WPForms » Ajouter nouveau depuis votre tableau de bord d'administration.

Cela vous mènera à la page ‘Sélectionner un modèle’, où vous pouvez commencer par taper un nom pour le formulaire que vous êtes sur le point de créer.

Après cela, vous pouvez cliquer sur l'option ‘Calculatrice’ dans la colonne de gauche pour ouvrir les plus de 87 modèles de calculatrices préconçus proposés par WPForms, y compris :

• Modèle de calculatrice hypothécaire
• Modèle de calculatrice de pourboire
• Modèle de calculatrice de bail
• Modèle de calculatrice d'IMC
• Modèle de calculatrice d'épargne et d'investissements

À partir d'ici, vous pouvez cliquer sur le bouton « Utiliser le modèle » sous le modèle de formulaire de votre choix. Pour ce tutoriel, nous allons créer un simple formulaire « Calculatrice de remise sur la livraison ».

Cela ouvrira le constructeur de formulaires sur votre écran. Vous remarquerez ici un aperçu du formulaire sur le côté droit avec les champs du formulaire dans la colonne de gauche.

Vous pouvez maintenant facilement ajouter d'autres champs depuis le panneau de gauche et les faire glisser pour réorganiser leur ordre.

Ensuite, faites défiler vers le bas jusqu'à la section « Articles disponibles » et cliquez sur ce champ pour ouvrir ses paramètres dans la barre latérale.

Une fois que vous avez fait cela, vous pouvez ajouter le titre, l'image et les prix de tous les articles que vous vendez dans votre boutique de commerce électronique.

Cependant, gardez à l'esprit que si vous souhaitez ajouter des images pour les articles que vous vendez, vous devrez activer l'option « Utiliser les choix d'images ».

Vous pouvez également cliquer sur le bouton « + » pour ajouter d'autres articles ou sur le bouton « - » pour supprimer un article de la section.

Ensuite, cliquez sur le champ intitulé « Expédition » pour ouvrir ses paramètres dans la colonne de gauche. Ce champ calcule la remise sur les frais d'expédition en fonction du total de votre produit. Ce champ contient la formule nécessaire au calcul, il est donc important de ne pas le supprimer.

Par défaut, ce modèle inclut une formule pré-écrite qui calcule une remise sur les frais d'expédition en fonction du prix total de la commande.

Cependant, si vous souhaitez modifier la remise sur la livraison, passez à l'onglet « Avancé » dans la colonne de gauche et faites défiler jusqu'à la section « Formule ».

Ici, vous pouvez remplacer la valeur de 10 par le pourcentage de remise que vous souhaitez offrir. Vous pouvez également modifier les totaux des produits.

Si vous souhaitez personnaliser davantage la remise sur les frais de port, vous pouvez cliquer sur le lien « Aide-mémoire » en haut. Cela vous mènera à la page « Aide-mémoire des formules de calcul », où vous pourrez mieux comprendre les règles et les chaînes à utiliser.

Après cela, vous pouvez également configurer les paramètres de toutes les autres options de champ de la même manière.

Nouveau : Vous souhaitez un moyen plus simple de créer vos formules de calcul ? WPForms propose désormais une puissante fonctionnalité de calculs par IA qui fait le travail difficile pour vous.

Cliquez simplement sur le bouton « Générer la formule » à côté de la zone de formule pour commencer à discuter avec l'assistant IA.

Ensuite, vous pouvez simplement décrire ce que vous voulez calculer en langage clair.

Par exemple, vous pourriez taper : « Appliquer une remise de 15 % sur les frais de port pour les commandes de plus de 100 $ et augmenter ensuite la remise de 0,25 % pour chaque tranche supplémentaire de 50 $ dépensée ».

Après avoir appuyé sur le bouton « Entrée », l'IA générera automatiquement la formule correcte, que vous pourrez ajouter à votre formulaire en 1 clic.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer » en haut pour sauvegarder vos paramètres.

Ouvrez maintenant la page ou l'article WordPress où vous souhaitez ajouter le formulaire de calculateur d'expédition dans l'éditeur de blocs.

À partir de là, cliquez sur le bouton « + » d'ajout de bloc en haut à gauche pour ouvrir le menu des blocs et intégrer le bloc WPForms.

Une fois que vous avez fait cela, choisissez simplement le formulaire de calcul de remise sur les frais de port dans le menu déroulant du bloc lui-même.

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut pour enregistrer vos paramètres. Vous pouvez maintenant visiter votre site Web WordPress pour voir le formulaire de calcul personnalisé en action.

Ici, le champ d'expédition calculera automatiquement les frais d'expédition en fonction des prix des différents articles que votre client commande sur votre site.

Personnalisation de votre formulaire de calculatrice dans WordPress

À un moment donné, vous pourriez essayer de modifier la calculatrice pour voir si vous pouvez obtenir plus de conversions. Par exemple, vous pourriez vouloir rendre le champ « E-mail » obligatoire.

Pour apporter ces modifications, visitez simplement la page WPForms » Tous les formulaires depuis le tableau de bord WordPress.

Une fois sur place, cliquez sur le lien « Modifier » sous le nom du formulaire pour le lancer à nouveau dans le constructeur de formulaires.

Vous pouvez maintenant personnaliser les champs du formulaire ou en ajouter de nouveaux en suivant le processus décrit ci-dessus.

Lorsque vous avez terminé, cliquez simplement sur le bouton « Enregistrer », et ces modifications apparaîtront automatiquement sur votre site Web d'entreprise ou votre blog.

Afficher les entrées de votre formulaire de calculatrice

Chaque fois que quelqu'un remplit un formulaire sur votre site Web, WPForms enregistre automatiquement son entrée dans votre base de données WordPress. Cela vous permet de voir comment les gens utilisent le formulaire et de consulter les informations de contact de vos visiteurs.

Pour voir ces informations, allez simplement sur la page WPForms » Entrées dans le tableau de bord WordPress et faites défiler jusqu'à la section « Nom du formulaire ».

Après cela, cliquez sur le formulaire de calculatrice pour voir les entrées.

Cela ouvrira une liste de toutes les entrées du formulaire sur votre page. À partir de là, vous pouvez cliquer sur l'icône circulaire pour marquer une entrée comme lue.

Vous pouvez également cliquer sur le lien « Voir » à côté de chaque entrée pour afficher tous les détails du formulaire, y compris l'adresse e-mail, le numéro de téléphone, les articles commandés, la réduction d'expédition, et plus encore.

Parfois, vous voudrez peut-être partager les données d'un formulaire avec des personnes qui n'ont pas accès à votre tableau de bord WordPress. Par exemple, vous pourriez gérer une agence de développement WordPress et gérer plusieurs sites Web pour des clients.

Avec WPForms, vous pouvez exporter vos données sous forme de fichier CSV ou XLSX. Cliquez simplement sur le lien « Exporter tout » en haut pour ouvrir l'outil d'exportation.

Cela ouvrira un nouvel écran où vous pourrez sélectionner tous les champs du formulaire dont vous souhaitez exporter les données. Ensuite, cliquez sur le bouton « Télécharger le fichier d’exportation » pour enregistrer vos données de formulaire au format XLSX.

Bonus : Créez des calculateurs personnalisés complexes avec Formidable Forms

Si vous cherchez à créer des calculateurs plus complexes sur votre site WordPress, nous vous recommandons d’utiliser Formidable Forms. C’est un plugin de formulaire avancé qui est livré avec un constructeur par glisser-déposer, des modèles préfabriqués et des champs dynamiques.

De plus, le plugin peut effectuer des calculs avancés à l'aide de formules, de la logique conditionnelle et même de calculs basés sur les dates, ce qui en fait un excellent choix pour les projets complexes.

Vous pouvez utiliser le plugin pour créer différents types de calculateurs tels qu’un calculateur de pourcentage, un calculateur de prix, un calculateur de prêt, un calculateur d’âge, un calculateur d’assurance vie et un calculateur d’intérêts composés.

Par exemple, si vous vendez des cours en ligne, vous pourriez ajouter un formulaire de calculateur de ROI pour montrer aux utilisateurs comment l’achat de votre cours peut augmenter leur potentiel de revenus.

Parmi les autres fonctionnalités de Formidable Forms, citons la logique conditionnelle, les indicateurs de progression, les formulaires multipages et un champ ChatGPT qui aide les utilisateurs à remplir le formulaire plus rapidement.

Formidable Forms peut même s’intégrer à différents services de marketing par e-mail pour développer votre liste d’e-mails. Pour plus d’informations, consultez notre examen complet de Formidable Forms.

Foire aux questions sur les calculateurs WordPress

Voici quelques-unes des questions les plus fréquentes que nos lecteurs nous posent sur l'ajout de calculateurs personnalisés à leurs sites Web.

1. Puis-je créer un calculateur personnalisé dans WordPress sans plugin ?

Oui, mais cela nécessite des compétences techniques avancées. Vous devrez écrire du code JavaScript et PHP personnalisé pour gérer les calculs et la logique. Pour la plupart des utilisateurs, l'utilisation d'un plugin comme WPForms est beaucoup plus sûre, plus rapide et plus facile.

2. Ai-je besoin de connaître des formules mathématiques complexes ?

Non. Bien que vous puissiez écrire vos propres formules, WPForms inclut désormais une intégration d'IA. Vous pouvez simplement décrire ce que vous voulez que le calculateur fasse en langage clair, et le plugin écrira la formule pour vous.

3. Puis-je accepter des paiements basés sur les résultats du calculateur ?

Absolument. Si vous créez un calculateur de devis ou d'expédition, vous pouvez intégrer des passerelles de paiement comme Stripe ou PayPal. Cela vous permet de collecter instantanément le montant exact indiqué dans le champ de calcul.

4. Puis-je enregistrer les données saisies dans le calculateur ?

Oui. Les plugins comme WPForms enregistrent chaque soumission de formulaire dans votre base de données WordPress. Vous pouvez afficher ces entrées, les exporter dans une feuille de calcul ou les connecter à votre service de marketing par e-mail pour assurer le suivi des prospects.

Ressources supplémentaires

Nous espérons que cet article vous a aidé à ajouter un calculateur personnalisé dans WordPress. Vous voudrez peut-être également consulter quelques ressources supplémentaires :

• Comment générer plus de prospects avec des calculateurs en ligne gratuits (conseils de pro)
• Meilleurs plugins de calculatrice pour votre site WordPress
• Comment ajouter un calculateur d'IMC dans WordPress
• Comment ajouter un calculateur d'expédition à votre site WordPress
• Comment ajouter un calculateur de prêt hypothécaire dans WordPress
• Comment créer un calculateur de prêt auto / de paiement de voiture

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.