Comment ajouter une calculatrice hypothécaire dans WordPress (étape par étape)

Une calculatrice hypothécaire peut vraiment améliorer l'efficacité de votre site web. Et la vérité est que, sans calculatrice hypothécaire sur votre site, vous perdez probablement des clients potentiels au profit d'autres sites web.

Nous l'avons vu se produire encore et encore : les visiteurs viennent sur votre site, s'y intéressent, puis partent pour calculer leurs paiements ailleurs — souvent pour ne jamais revenir.

C'est pourquoi avoir votre propre calculatrice est si important. Elle permet de maintenir l'engagement des visiteurs et de les transformer en prospects. 🙌

Dans ce guide étape par étape, nous vous montrerons exactement comment ajouter une calculatrice hypothécaire à votre site WordPress. Nous avons trouvé les méthodes les plus fiables et les plus conviviales qui fonctionnent pour tout le monde, quelle que soit votre expérience technique.

Pourquoi ajouter une calculatrice hypothécaire dans WordPress ?

Une calculatrice hypothécaire permet aux utilisateurs d'obtenir des estimations de leurs paiements hypothécaires, avec le taux d'intérêt et la période d'amortissement.

Les visiteurs peuvent simplement ajouter des informations telles que la valeur de leur maison, l'acompte, les taux d'intérêt, etc. Après cela, la calculatrice déterminera combien ils doivent payer par mois.

Si vous créez un site web immobilier avec des annonces immobilières IDX, alors une calculatrice hypothécaire aidera également à la génération de prospects. Les visiteurs peuvent utiliser la calculatrice, mais ils devront entrer leur adresse e-mail afin de sauvegarder leurs résultats.

Cela peut également réduire votre taux de rebond car les visiteurs n'ont pas à visiter un autre site pour obtenir un calcul hypothécaire.

Les conseillers financiers, les courtiers hypothécaires, les banques et les éducateurs en finances personnelles peuvent également bénéficier de l'ajout d'un calculateur hypothécaire à leur site.

Cela étant dit, examinons comment créer facilement un calculateur hypothécaire dans WordPress. Ce tutoriel vous montrera deux méthodes adaptées aux débutants avec deux plugins de calculateur hypothécaire différents : WPForms et Formidable Forms.

Vous pouvez utiliser ces liens rapides pour accéder à un plugin spécifique :

• Méthode 1 : Ajouter un calculateur hypothécaire WordPress simple avec WPForms
• Méthode 2 : Ajouter un calculateur hypothécaire WordPress avancé avec Formidable Forms
• Ressources bonus 🔗 : Développez votre site WordPress immobilier

Commençons !

Méthode 1 : Ajouter un calculateur hypothécaire WordPress simple avec WPForms

La première méthode consiste à utiliser WPForms. Avec ses outils d'IA et plus de 2 000 modèles de formulaires, ce plugin de formulaire par glisser-déposer vous permet de créer divers formulaires, y compris un calculateur hypothécaire.

Cette méthode est recommandée pour les personnes qui souhaitent simplement créer un calculateur hypothécaire simple mais réactif, sans calculs supplémentaires pour les taxes ou les assurances.

Chez WPBeginner, nous utilisons WPForms pour créer toutes sortes de formulaires — de notre formulaire de contact à nos enquêtes annuelles auprès des lecteurs. C'est notre outil de prédilection, et nous le recommandons vivement. Consultez notre avis complet sur WPForms pour en savoir plus.

Tout d'abord, allez-y et installez le plugin dans WordPress.

Une fois cela fait, allez dans WPForms » Paramètres et insérez la clé de licence de votre plan Pro depuis votre page de compte WPForms. Ensuite, cliquez simplement sur « Vérifier la clé ».

Choisissez et personnalisez un modèle de formulaire de calculatrice hypothécaire

Une fois la clé de licence activée, vous devrez accéder à WPForms » Ajouter nouveau.

Sur l'écran suivant, vous pouvez donner un nom à votre nouveau formulaire. Il peut s'agir de quelque chose d'aussi simple que « Formulaire de calcul hypothécaire ».

Après cela, vous choisirez comment construire le formulaire. Avec WPForms, vous pouvez :

• utiliser une toile vierge pour créer des formulaires à partir de zéro
• profiter du générateur de formulaires IA pour créer instantanément des formulaires à l'aide d'une simple invite
• choisir un modèle prédéfini.

Pour ce tutoriel, nous allons vous montrer comment utiliser un modèle et le personnaliser pour répondre à vos besoins à l'aide de l'éditeur glisser-déposer.

Alors faisons défiler la page « Configuration » et utilisons la barre de recherche pour trouver un modèle de formulaire de calcul hypothécaire.

WPForms propose deux modèles : Formulaire de calcul hypothécaire et Formulaire de calcul hypothécaire simple. Les deux modèles offrent des fonctionnalités similaires mais ont des champs légèrement différents.

Le Modèle de formulaire de calcul hypothécaire simple est idéal pour les sites immobiliers qui souhaitent aider les acheteurs potentiels à estimer rapidement leur paiement hypothécaire mensuel.

D'autre part, le Modèle de formulaire de calcul hypothécaire fournit une ventilation complète des détails de l'hypothèque, y compris le total des intérêts payés, le paiement hypothécaire total et le montant du paiement annuel.

Ce niveau de détail peut être utile pour les clients qui souhaitent comprendre pleinement leurs obligations financières.

Vous pouvez cliquer sur « Voir la démo » pour voir chaque formulaire en action. Vous pouvez choisir l'un ou l'autre modèle, mais pour ce tutoriel, nous utiliserons le modèle de formulaire de calcul hypothécaire.

Une fois que vous avez fait votre choix, survolez simplement la boîte et cliquez sur « Utiliser le modèle ».

À ce stade, une fenêtre contextuelle apparaîtra indiquant que vous avez besoin du module complémentaire Calculs.

Cliquez simplement sur « Oui, installer et activer » pour continuer.

Vous arriverez maintenant dans le constructeur de formulaires par glisser-déposer. Comme vous pouvez le voir, le modèle est livré avec les champs de calcul intégrés.

Ce modèle particulier contient des champs où les utilisateurs peuvent saisir la valeur de leur maison (coût total de la maison) et le montant de leur acompte (combien l'acheteur paie d'avance lors de l'achat d'une propriété).

Les utilisateurs peuvent également utiliser les curseurs pour saisir des informations sur le taux d'intérêt de leur prêt hypothécaire et la durée de leur prêt.

Après avoir saisi ces informations, la section inférieure calculera automatiquement le montant du paiement mensuel et annuel de l'hypothèque de l'utilisateur, le total des intérêts payés et le paiement total de l'hypothèque.

Vous pouvez trouver cette formule de calcul en allant dans « Options du champ » et en naviguant vers l'onglet « Avancé » dans le panneau de gauche. En bas, vous trouverez la boîte « Formule ».

Nous vous recommandons de ne pas modifier cette section à moins d'être sûr de ce que vous faites. Cela dit, WPForms dispose d'une feuille de triche pour les calculs que vous pouvez utiliser si vous avez besoin d'aide.

Si vous avez du mal avec la formule, vous pouvez utiliser la fonctionnalité Calculs IA pour vous faciliter la tâche.

Cliquez simplement sur le bouton « Générer la formule » à côté de la boîte Formule.

Cela ouvrira une fenêtre de chat où vous pourrez décrire le type de calcul dont vous avez besoin en langage clair, et l'IA générera instantanément la formule correcte pour vous.

Maintenant, allons-y et personnalisons le formulaire. Pour ajouter un nouveau champ, allez dans la section « Ajouter des champs » dans le panneau de gauche. Ensuite, faites simplement glisser et déposez n'importe quel champ dans le constructeur de formulaire.

Ici, nous avons ajouté un champ « Nom » au formulaire pour capturer le nom de l'utilisateur.

Pour personnaliser un champ, cliquez simplement dessus, et le panneau de gauche affichera l'onglet « Options du champ ». Ici, vous trouverez trois onglets : Général, Avancé et Logique intelligente.

Si vous souhaitez modifier l'étiquette du champ, insérer un texte descriptif ou rendre le champ obligatoire, vous devrez sélectionner « Général ».

Dans l'image suivante, nous avons changé l'étiquette du champ « Valeur de la maison » en « Prix de la propriété » et ajouté des instructions supplémentaires. Nous avons également rendu le champ obligatoire, de sorte que les utilisateurs doivent remplir cette section afin d'obtenir le calcul de leur paiement hypothécaire.

L'onglet « Avancé » est l'endroit où vous pouvez ajouter du texte de substitution, spécifier les classes CSS que vous souhaitez utiliser, masquer l'étiquette du champ et activer une fonction de calcul si nécessaire.

Par défaut, le formulaire affiche un signe « $ » pour que les utilisateurs sachent qu'ils doivent saisir leurs valeurs en dollars américains.

Alternativement, vous pouvez insérer un exemple dans l'étiquette du champ, comme « par ex. 500 000 », afin que l'utilisateur sache comment insérer le prix correctement.

L'onglet « Logique intelligente » vous permet d'activer la logique conditionnelle dans le champ. C'est facultatif, mais c'est une bonne fonctionnalité pour rendre votre formulaire de calcul hypothécaire plus attrayant.

Pour l'utiliser, activez simplement le bouton « Activer la logique conditionnelle ».

Ensuite, vous pouvez choisir d'afficher ou de masquer le champ en fonction de certains critères. Dans l'exemple ci-dessous, nous avons choisi d'afficher le champ « Prix de la propriété » si l'utilisateur saisit son adresse e-mail.

Une fois que vous avez terminé de personnaliser le formulaire, cliquez simplement sur « Enregistrer » dans le coin supérieur droit.

Configurer les paramètres du formulaire

Passons maintenant à l'onglet « Paramètres » sur le côté gauche.

Dans l'onglet « Général », vous pouvez modifier le nom du formulaire et ajouter une description en haut du formulaire. Vous pouvez même taper des instructions et ajouter un appel à l'action pour encourager les utilisateurs à remplir le formulaire.

De plus, vous pouvez personnaliser l'étiquette et le texte de traitement du bouton de soumission.

Vous voudrez également passer à l'onglet « Protection contre le spam et sécurité ».

WPForms est déjà équipé d'une protection anti-spam activée par défaut. Cependant, vous pouvez activer Akismet pour des mesures de protection supplémentaires.

De plus, n'hésitez pas à définir un nombre minimum de secondes qu'un utilisateur doit attendre avant de soumettre le formulaire. Cela donne aux utilisateurs légitimes suffisamment de temps pour remplir le formulaire, mais pas assez pour qu'un bot de spam puisse le soumettre rapidement.

En faisant défiler vers le bas, vous pouvez également activer un filtre de pays, qui limite le formulaire aux utilisateurs de pays spécifiques. Nous recommandons ce réglage si votre site immobilier ne vend que dans un certain pays.

Une fois que vous avez activé le bouton « Activer le filtre de pays », cliquez simplement sur « Autoriser » sous le Filtre de pays et sélectionnez le pays auquel vous vendez.

Vous pouvez également personnaliser le message du filtre de pays si nécessaire.

Si vous descendez la page, vous pouvez également empêcher les soumissions de formulaires indésirables à l'aide d'un CAPTCHA.

WPForms prend en charge les CAPTCHA, reCAPTCHA et hCAPTCHA personnalisés.

Passons maintenant à l'onglet « Notifications ».

WPForms peut vous envoyer un e-mail chaque fois que quelqu'un remplit le formulaire. Pour activer cette fonction, cliquez simplement sur « Activer les notifications ».

Vous pouvez modifier le contenu de l'e-mail selon vos besoins. De plus, vous pouvez envoyer des e-mails de confirmation après la soumission d'un formulaire WordPress.

Lorsque vous êtes satisfait de ces paramètres, n'oubliez pas de cliquer sur « Enregistrer » pour sauvegarder vos modifications.

Intégrez le calculateur de coût hypothécaire sur votre site WordPress

Vous êtes maintenant prêt à afficher le calculateur hypothécaire sur votre blog WordPress ou votre site Web. Pour ce faire, cliquez sur le bouton « Intégrer » dans le menu supérieur.

Vous pouvez maintenant ajouter le formulaire à une page existante ou créer une page entièrement nouvelle.

Alternativement, vous pouvez utiliser un shortcode.

Le processus d'ajout du formulaire à une page existante ou nouvelle est assez similaire.

Si vous cliquez sur « Sélectionner une page existante », vous pouvez alors choisir la page que vous souhaitez utiliser. Ensuite, cliquez sur « C'est parti ! »

Si vous choisissez de créer une nouvelle page, vous devrez alors saisir un titre de page.

Similaire à la méthode précédente, cliquez sur « C'est parti ! » pour continuer.

Les deux options vous amèneront à l'éditeur de blocs WordPress standard.

Ici, cliquez sur le bouton de bloc « + » et sélectionnez le bloc WPForms.

Dans le nouveau bloc, ouvrez le menu déroulant « Sélectionner un formulaire ».

Ensuite, choisissez simplement le formulaire que vous avez créé précédemment.

Vous verrez maintenant votre formulaire nouvellement créé.

Dans la barre latérale des paramètres de bloc, vous pouvez personnaliser davantage le design du formulaire.

Par exemple, vous pouvez modifier la couleur d'arrière-plan et la bordure des champs. Vous pouvez également revenir à l'éditeur WPForms en sélectionnant « Modifier le formulaire ».

Lorsque vous êtes satisfait de l'apparence du formulaire, cliquez simplement sur « Mettre à jour » ou « Publier » pour rendre les modifications publiques.

Voici à quoi ressemble notre formulaire de calculatrice hypothécaire :

Si vous utilisez un thème WordPress classique, non basé sur des blocs, vous pouvez également afficher le formulaire dans une zone prête pour les widgets.

Allez simplement dans Apparence » Widgets et cliquez sur le bouton « + » pour ajouter un bloc dans n'importe quelle zone prête pour les widgets. Vous pouvez maintenant ajouter le bloc WPForms et sélectionner le formulaire que vous venez de créer.

Dans l'éditeur de widgets, vous pouvez également modifier les paramètres de bloc du widget de calculatrice hypothécaire.

Lorsque vous êtes satisfait de l'apparence du formulaire, cliquez simplement sur « Mettre à jour ».

Alternativement, si ces méthodes ne fonctionnent pas, vous pouvez utiliser la méthode du shortcode pour insérer les formulaires dans des pages, des articles et d'autres parties de modèle.

Revenez simplement à l'éditeur WPForms et cliquez sur « utiliser un shortcode » dans la fenêtre contextuelle d'intégration.

Vous pouvez ensuite copier le shortcode et l'ajouter à n'importe quelle page, publication ou zone prête pour les widgets.

Pour plus d'informations, consultez notre guide sur comment ajouter un shortcode dans WordPress.

Méthode 2 : Ajouter un calculateur hypothécaire WordPress avancé avec Formidable Forms

Cette méthode suivante est excellente si vous souhaitez créer un calculateur hypothécaire WordPress avancé qui prend en compte vos impôts fonciers annuels, votre assurance et votre assurance hypothécaire privée (PMI).

Une fois que le formulaire dispose de ces données, ainsi que du prix de la maison de l'utilisateur, du montant du prêt, de la durée du prêt et du taux d'intérêt, il peut afficher la répartition des paiements de l'utilisateur, également appelée tableau d'amortissement.

Pour cette méthode, nous utiliserons le plugin Formidable Forms. Ce plugin de formulaire de contact WordPress convivial est livré avec un modèle de calculateur hypothécaire avancé que vous pouvez ajouter à votre site.

Nous avons examiné en profondeur ce plugin et l'avons mis à l'épreuve. Vous pouvez trouver tout ce qu'il faut savoir dans notre avis détaillé sur Formidable Forms !

La première chose à faire est d'installer et d'activer les plugins Formidable Forms Lite et Formidable Forms Premium (plan Business).

Le plugin gratuit a des fonctionnalités limitées, mais Formidable Forms Pro l'utilise comme base pour ses fonctionnalités plus avancées.

Pour des instructions détaillées, veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans Formidable » Paramètres globaux dans le tableau de bord WordPress. Ici, vous pouvez cliquer sur « Connecter un compte ».

Sur l'écran suivant, connectez-vous simplement à votre compte Formidable Forms.

Formidable Forms vous demandera désormais l'autorisation d'installer le plugin Pro. Cliquez simplement sur « Connecter et installer Formidable Forms Pro » pour activer votre clé de licence.

Maintenant que vous avez configuré Formidable Forms avec succès, vous êtes prêt à ajouter un formulaire de calcul hypothécaire à WordPress.

Utiliser le modèle de formulaire de calcul hypothécaire avancé

Pour commencer, allez dans Formidable » Formulaires, puis cliquez sur « Ajouter un nouveau ».

Une fenêtre contextuelle apparaîtra, montrant tous les modèles prêts à l'emploi que vous pouvez utiliser sur votre site Web WordPress.

Pour trouver le modèle de formulaire de calcul hypothécaire, tapez simplement « Calculateur hypothécaire avancé » dans la barre de recherche. Ensuite, placez votre curseur sur le modèle et cliquez sur « Utiliser le modèle ».

Vous arriverez maintenant dans le constructeur de Formidable Forms.

À ce stade, vous pouvez personnaliser le formulaire pour qu'il corresponde à vos besoins.

Pour commencer, cliquez sur le champ que vous souhaitez personnaliser, puis sélectionnez l'onglet « Options du champ ».

À partir de là, vous pouvez modifier l'étiquette du champ, choisir si le champ est obligatoire ou facultatif, ajouter du texte d'espace réservé, et bien plus encore.

Avec Formidable Forms, vous pouvez également insérer une valeur par défaut dans le calculateur. Cela permet aux utilisateurs de voir à quoi peut ressembler leur calcul.

Si vous cliquez sur l'un des champs de la section « Analyse financière », essayez d'éviter de modifier les « Options avancées ».

Cette zone contient les formules de calcul, donc les modifier peut casser complètement le calculateur hypothécaire.

Lorsque vous êtes satisfait de l'apparence du formulaire, cliquez simplement sur « Enregistrer » dans le coin supérieur droit pour sauvegarder vos modifications.

Après cela, tapez un nom pour votre formulaire afin de pouvoir l'identifier facilement plus tard. Ensuite, cliquez sur « Enregistrer ».

Personnaliser le style du formulaire de calcul hypothécaire

Passons maintenant à l'onglet « Style » dans le menu supérieur. C'est ici que vous pouvez choisir un design pour le formulaire.

Si aucun des styles ne vous plaît, cliquez simplement sur le bouton « + Nouveau style ».

Après cela, une fenêtre contextuelle apparaîtra. Tapez simplement un nom pour ce nouveau style et cliquez sur « Créer un nouveau style ».

Vous serez maintenant dirigé vers une page où vous pourrez personnaliser le style du formulaire.

N'hésitez pas à modifier la typographie, le schéma de couleurs, les styles de boutons, les cases à cocher, etc.

Une fois que vous êtes satisfait du design, cliquez simplement sur le bouton « Mettre à jour » dans le coin supérieur droit.

Configurer les paramètres de Formidable Forms

À ce stade, vous pouvez naviguer vers le menu « Paramètres » en haut.

Tout d'abord, vous pouvez personnaliser le titre et la description du formulaire dans l'onglet « Général ». C'est un bon endroit pour insérer des instructions sur la façon d'utiliser le formulaire.

Vous pouvez également styliser le texte en utilisant HTML.

En faisant défiler vers le bas, vous trouverez un paramètre qui active le Honeypot et JavaScript.

Nous recommandons d'activer les deux paramètres car ils peuvent empêcher les entrées de spam fausses et malveillantes.

L'onglet « Actions & Notifications » est l'endroit où vous pouvez personnaliser l'e-mail de confirmation que Formidable Forms envoie à l'utilisateur.

Vous pouvez soit afficher un message de remerciement personnalisé, rediriger les utilisateurs vers une URL spécifique, soit les envoyer vers une autre page.

Un autre onglet que nous vous recommandons de consulter est « Boutons ».

C'est ici que vous pouvez personnaliser l'étiquette et la position du bouton de soumission. Vous pouvez même ajouter un bouton « Recommencer » au cas où l'utilisateur souhaiterait relancer la soumission de son formulaire.

Une fois que vous avez configuré les paramètres du formulaire, cliquez simplement sur le bouton « Mettre à jour » pour enregistrer vos modifications.

Intégrez le formulaire de calcul hypothécaire avancé sur votre site web

Maintenant que votre formulaire de calcul hypothécaire avancé est prêt, vous pouvez l'ajouter à n'importe quel article, page ou zone prête pour les widgets.

Pour commencer, cliquez sur le bouton « Intégrer » dans le coin supérieur droit.

Vous verrez maintenant une fenêtre contextuelle indiquant que vous pouvez ajouter le formulaire de trois manières.

Vous pouvez ajouter le formulaire à une page existante, créer une nouvelle page ou utiliser un shortcode.

Si vous choisissez l'option de page existante, vous sélectionnerez une page à l'écran suivant.

Ensuite, cliquez sur « Insérer le formulaire ».

D'autre part, si vous choisissez l'option de nouvelle page, vous pouvez taper un nom pour la nouvelle page.

Une fois cela fait, cliquez sur « Créer la page ».

Avec les deux options, Formidable Forms insérera automatiquement le bloc de formulaire dans l'éditeur de blocs de la page.

Si vous avez besoin de modifier le formulaire directement depuis l'éditeur de contenu, ouvrez simplement la barre latérale des paramètres du bloc et cliquez sur « Aller au formulaire ».

Lorsque vous êtes prêt, cliquez sur « Publier » ou « Mettre à jour ».

Voici à quoi ressemble notre formulaire de calcul hypothécaire Formidable Forms :

Alternativement, vous pouvez ajouter le calculateur hypothécaire en utilisant un shortcode ou un code PHP.

Dans la fenêtre contextuelle d'intégration précédente, cliquez sur « Insérer manuellement ».

Ensuite, vous pouvez copier le shortcode ou le code PHP. Encore une fois, pour la première option, vous pouvez lire notre article sur comment ajouter un shortcode dans WordPress.

Quant au code PHP, nous recommandons cette méthode uniquement si vous êtes à l'aise avec les extraits de code. Nous vous recommandons d'utiliser WPCode pour cela, car ce plugin permet d'insérer du code dans WordPress de manière sûre et facile.

Pour plus d'informations, vous pouvez lire notre guide sur comment insérer des extraits de code dans WordPress.

Et pour en savoir plus sur le plugin, consultez notre avis complet sur WPCode. Certains de nos partenaires commerciaux l'utilisent pour insérer et gérer des extraits de code personnalisés, et cela fonctionne exceptionnellement bien !

Ressources bonus 🔗 : Développez votre site WordPress immobilier

Vous cherchez à améliorer encore votre site immobilier ? De l'attraction de plus de prospects à l'accélération de vos pages, ces ressources triées sur le volet peuvent vous aider à développer et à optimiser votre site WordPress :

• Meilleurs plugins immobiliers WordPress
• Meilleurs thèmes WordPress immobiliers pour agents immobiliers
• Comment intégrer une carte Google avec une épingle sur les formulaires WordPress
• Comment ajouter correctement un curseur de contenu mis en avant dans WordPress
• Comment créer un annuaire web dans WordPress
• Conseils pour développer votre entreprise en ligne
• Le référencement local WordPress ultime pour améliorer votre classement
• Le guide ultime pour améliorer la vitesse et les performances de WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter une calculatrice de prêt hypothécaire dans WordPress. Vous voudrez peut-être aussi consulter notre article sur comment créer une calculatrice de prêt automobile ou de paiement de voiture dans WordPress et nos conseils d'experts sur les meilleures façons de créer des formulaires plus interactifs.

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.