Comment créer un calculateur de devis dans WordPress (étape par étape)

Voulez-vous créer un calculateur de devis dans WordPress ?

Un calculateur de devis permet à vos clients de sélectionner les produits/services qu'ils souhaitent pour obtenir un devis ou un prix instantané.

Dans ce tutoriel, nous vous montrerons comment créer un calculateur de devis dans WordPress, étape par étape sans écrire de code.

Créer un calculateur de devis avec WordPress

Avec un calculateur de devis, vos clients peuvent sélectionner différents produits ou services et appliquer des filtres pour vérifier les prix avant de soumettre leurs commandes.

Pour créer un calculateur de devis, le plugin Formidable Forms est le meilleur constructeur disponible.

Il existe de nombreux constructeurs de formulaires pour WordPress tels que WPForms et Gravity Forms, mais lorsqu'il s'agit de créer des calculateurs de devis, Formidable Forms arrive en tête.

Voici quelques raisons pour lesquelles Formidable Forms se démarque des autres :

• Créez facilement un formulaire de devis complexe ou un formulaire de commande avec trop de variables.
• Créez un formulaire de commande autonome et affichez instantanément le prix total.
• Intégrez avec WooCommerce pour créer une expérience d'achat transparente.

Le plugin Formidable Forms est livré avec plusieurs modèles de formulaires que vous pouvez utiliser pour créer rapidement n'importe quel formulaire. Ces modèles de formulaires sont faciles à personnaliser grâce au constructeur par glisser-déposer. Vous pouvez également utiliser le modèle vierge pour ajouter des champs personnalisés et configurer le formulaire de votre choix.

Regardons ce guide étape par étape sur la façon de créer correctement un calculateur de devis dans WordPress.

Étape 1 : Créer un formulaire de devis

Bien sûr, la première chose à faire est d'installer Formidable Forms sur votre site. Il propose un modèle que vous pouvez utiliser pour créer votre formulaire de devis instantanément.

Mais avant de faire cela, assurez-vous d'avoir ajouté les produits / services que vous souhaitez vendre et de spécifier leurs coûts. Il existe plusieurs façons d'afficher les options de prix sur votre formulaire. Vous pouvez utiliser des cases radio, des cases à cocher ou des listes déroulantes pour ajouter les produits.

Utilisez le constructeur de formulaires par glisser-déposer pour ajouter des types de champs afin d'afficher vos options.

Ensuite, vous pouvez cliquer sur n'importe quel champ pour voir les options sur le côté gauche de l'écran. Les options par défaut seront « Option 1 », « Option 2 », etc. Vous pouvez continuer et remplacer le texte par les noms de vos produits.

Maintenant, cochez l'option Utiliser des valeurs séparées pour ajouter les prix à côté de chaque produit. N'hésitez pas à ajouter plus d'options à la liste si vous le souhaitez.

Ces valeurs seront utiles pour calculer automatiquement les prix totaux des produits sélectionnés.

Vous pouvez utiliser les options avancées pour personnaliser les paramètres de style des différents champs.

Étape 2 : Ajouter un champ en lecture seule pour afficher le prix total

Ensuite, vous devez ajouter un champ Numérique sur votre formulaire pour afficher le prix total. Ce champ numérique doit être défini sur lecture seule afin que les utilisateurs ne puissent pas modifier le prix total.

Dans la section Options avancées, vous trouverez une option Valeur par défaut. Vous devez cliquer sur l'icône de calculatrice, puis cliquer sur l'icône du menu.

Cela affichera les options Calculer la valeur par défaut. Dans cette section, vous devez ajouter des décimales. La valeur suggérée est « 2 » pour le calcul du prix.

Dans la section Liste des champs ci-dessous, vous pouvez rechercher les champs que vous voulez calculer dans le formulaire. Sélectionnez le nom ou l'identifiant des champs pour les ajouter à la liste.

Vous pouvez voir un exemple de la façon dont le plugin affichera les prix totaux en fonction de la sélection de produits de l'utilisateur.

Chaque fois que l'utilisateur change de produits ou de catégories, le prix dans le calculateur de devis sera mis à jour automatiquement.

Étape 3 : Ajoutez des méthodes de paiement à votre formulaire de calculateur de devis

Après avoir calculé et affiché le prix total, vous devez ajouter le mode de paiement pour que les utilisateurs puissent finaliser l'achat. Le plugin Formidable Forms est livré avec plusieurs extensions pour ajouter des options de paiement, notamment Stripe, Authorize.net, PayPal, etc.

Vous pouvez sélectionner une méthode de paiement. La plupart de ces méthodes utilisent la carte de crédit comme option pour collecter les paiements en ligne.

Ajoutez le champ de carte de crédit et personnalisez-le dans la section Options de champ.

Étape 4 : Publiez et affichez le calculateur de devis dans WordPress

Votre formulaire de calculateur de devis est maintenant prêt. Vous pouvez le publier et l'afficher sur n'importe quelle page produit dans WordPress.

Pour publier le formulaire dans l'éditeur de blocs Gutenberg, vous pouvez ajouter un nouveau bloc et choisir Formidable Forms. Ensuite, vous pouvez sélectionner votre formulaire de calculateur de devis.

Si vous utilisez l'éditeur classique, cliquez sur l'icône Formidable au-dessus de l'éditeur. Une fenêtre contextuelle s'ouvrira, et vous pourrez sélectionner le formulaire de calculateur de devis. Cliquez sur le bouton Insérer pour ajouter le formulaire sur votre page.

C'est tout.

Nous espérons que cet article vous a aidé à apprendre comment créer un formulaire de calculateur de devis dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment soumettre un formulaire sans actualiser la page dans WordPress.