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

Voulez-vous ajouter un calculateur d’hypothèque dans WordPress ?

Si vous avez un site consacré à l’immobilier ou à la finance, une calculatrice hypothécaire peut aider les internautes à déterminer s’ils peuvent se permettre d’acheter les biens immobiliers que vous proposez. Les visiteurs resteront ainsi plus longtemps sur votre site et vous aiderez à vendre plus de biens.

Dans cet article, nous allons vous afficher comment ajouter facilement un calculateur d’hypothèque dans WordPress.

Pourquoi ajouter une calculatrice hypothécaire dans WordPress ?

Une calculatrice hypothécaire permet aux utilisateurs/utilisatrices d’obtenir une estimation de leurs paiements hypothécaires, avec le taux d’intérêt et la période d’amortissement.

Les internautes peuvent simplement insérer des informations telles que la valeur de leur maison, l’acompte, les taux d’intérêt, etc. Ensuite, la calculatrice de paiements hypothécaires déterminera le montant qu’ils doivent payer par mois en fonction des informations fournies.

Si vous créez un site immobilier avec des listes de propriétés IDX, une calculatrice hypothécaire aidera également à la génération de prospects. Les internautes peuvent utiliser la calculatrice, mais ils devront saisir leur adresse e-mail pour enregistrer leurs résultats.

Il peut également réduire votre taux de rebond, car les internautes n’ont pas à se rendre sur un autre site pour obtenir un calcul de prêt hypothécaire.

Les conseillers financiers, les courtiers en prêts hypothécaires ou les banques, ainsi que les éducateurs en matière de finances personnelles, peuvent également bénéficier d’une calculatrice hypothécaire sur leur site.

Cela étant dit, voyons comment créer facilement une calculatrice hypothécaire sur WordPress. Ce tutoriel vous affichera deux méthodes conviviales pour les débutants avec deux extensions de calculatrice hypothécaire différentes : WPForms et Formidable Forms.

Vous pouvez utiliser ces liens rapides pour aller à/au une extension spécifique :

Méthode 1 : Ajouter une calculatrice hypothécaire WordPress simple avec WPForms

La première méthode consiste à utiliser WPForms. Avec plus de 1700 modèles de formulaires, ce plugin de formulaire par glisser-déposer est parfait pour créer divers formulaires, y compris une calculatrice hypothécaire, pour différents types de sites web.

Cette méthode est recommandée pour les personnes qui souhaitent simplement créer une calculatrice hypothécaire simple mais responsive, sans calculs ajoutés pour les taxes ou les assurances.

Tout d’abord, installez l’extension dans WordPress.

Une fois cela fait, allez dans WPForms  » Réglages et insérez la clé de licence de votre offre Pro depuis votre page de compte WPForms. Ensuite, il vous suffit de cliquer sur  » Vérifier la clé « .

Choisir et personnaliser un modèle de formulaire de calculatrice hypothécaire

Maintenant que la clé de licence est activée, vous devez naviguer vers WPForms  » Add New.

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 de l’hypothèque ».

Défilement vers le bas, utilisez la barre de recherche pour trouver un modèle de formulaire de calculatrice d’hypothèque.

Vous verrez que WPForms propose deux modèles : Formulaire de calcul d’hypothèque et Formulaire de calcul d’hypothèque simple. Les deux modèles offrent des fonctionnalités similaires, mais diffèrent par les champs spécifiques qu’ils incluent.

Le Modèle de formulaire de calcul d’hypothèque simple convient parfaitement aux sites immobiliers qui souhaitent aider les acheteurs potentiels à estimer rapidement le montant de leur hypothèque mensuelle.

D’autre part, le Modèle de formulaire de calcul de l’hypothèque fournit une ventilation complète des détails de l’hypothèque, y compris le total des intérêts payés, le paiement total de l’hypothèque et le montant du paiement annuel. Ce niveau de détail peut être utile aux clients/clientes qui souhaitent comprendre pleinement leurs obligations financières.

C’est à vous de choisir la calculatrice que vous souhaitez utiliser, mais à des fins de démonstration, nous utiliserons le Modèle de formulaire de calcul d’hypothèque.

Vous pouvez cliquer sur « Voir la démonstration » pour voir à quoi ressemble chaque formulaire en action.

Une fois que vous avez fait votre choix, il vous suffit de cliquer sur « Utiliser le Modèle ».

À ce stade, une fenêtre surgissante indique que le formulaire nécessite le module complémentaire Calculs.

Il suffit de cliquer sur « Oui, installer et activer » pour continuer.

Vous arrivez maintenant au Constructeur de formulaires par glisser-déposer. Comme vous pouvez le voir, les champs de la calculatrice ont déjà été ajoutés au Modèle.

Ce modèle particulier comporte des champs permettant aux utilisateurs/utilisatrices de saisir la valeur de leur logement (coût total de la maison) et le montant de leur acompte (somme versée par l’acheteur lors de l’acquisition d’un bien immobilier).

Les utilisateurs/utilisatrices peuvent également utiliser les diaporamas pour saisir des informations sur le taux d’intérêt et le terme de leur prêt immobilier.

Une fois que le formulaire contient tous les détails de l’hypothèque, la section inférieure calcule automatiquement le montant des paiements mensuels et annuels de l’hypothèque de l’utilisateur, le total des intérêts payés et le total des paiements de l’hypothèque.

Vous pouvez trouver la formule de calcul pour cette section inférieure en allant dans « Options de champ » et en naviguant jusqu’à l’onglet « Avancé » dans le panneau de gauche. En bas, vous trouverez la case « Formule ».

Nous recommandons de ne pas apporter de modifications à cette section à moins que vous ne soyez sûr de vous. Cela dit, WPForms a une feuille de calcul que vous pouvez utiliser si vous avez besoin d’aide.

Allons-y et personnalisons le formulaire. Pour ajouter un nouveau champ, allez dans la section  » Ajouter des champs  » dans le panneau de gauche. Ensuite, il suffit de faire glisser et de déposer n’importe quel champ dans le Constructeur de formulaires.

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

Pour personnaliser un champ, il suffit de cliquer dessus, et le panneau de gauche vous amènera à l’onglet « Options du champ ». Il existe trois onglets que vous pouvez configurer : Général, Avancé et Logique intelligente.

Les possibilités de personnalisation varient selon le type de champ. Si vous souhaitez modifier le libellé du champ, insérer un texte descriptif ou rendre le champ nécessaire, vous devez aller dans la section « Général ».

Ici, nous avons modifié le libellé du champ « Valeur de la maison » en « Prix de la propriété » et ajouté un texte descriptif pour des instructions supplémentaires. Nous avons également rendu le champ nécessaire, de sorte que les utilisateurs/utilisatrices doivent insérer ce champ pour obtenir le calcul de leurs versements hypothécaires.

L’onglet « Avancé » vous permet d’ajouter un texte de remplacement, de spécifier la classe CSS du champ si vous souhaitez utiliser un CSS personnalisé, d’accepter de masquer le libellé du champ et d’activer une fonction de calcul si nécessaire.

Par défaut, le formulaire comporte un signe « $ » comme caractère indicatif pour indiquer aux utilisateurs/utilisatrices que les valeurs doivent être exprimées en dollars américains.

Vous pouvez également insérer un exemple dans le libellé du champ, comme « par exemple 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. Elle est facultative, mais c’est une bonne fonctionnalité avant de rendre votre formulaire de calcul d’hypothèque plus attrayant.

Pour l’utiliser, il suffit de permuter 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 du bien » si l’utilisateur a saisi son adresse e-mail.

Une fois que vous avez fini de personnaliser le formulaire, cliquez sur « Enregistrer » en haut à droite.

Définir les Réglages du Formulaire

Passons maintenant à l’onglet « Réglages », situé à l’extrême gauche du menu.

Dans l’onglet « Général », vous pouvez modifier le nom du formulaire et insérer une description en haut du formulaire. Vous pouvez saisir quelques instructions et un texte d’appel à l’action pour encourager les utilisateurs/utilisatrices à remplir le formulaire.

En outre, vous pouvez personnaliser le texte du bouton envoyer et le texte de traitement du bouton.

Vous devez également passer à l’onglet « Protection contre les indésirables et sécurité ».

WPForms est déjà doté d’une protection anti-spam activée par défaut. Mais vous pouvez également activer Akismet pour des mesures de protection supplémentaires.

En outre, n’hésitez pas à définir un nombre minimum de secondes que l’utilisateur doit passer avant de pouvoir envoyer le formulaire. Les utilisateurs/utilisatrices ont ainsi suffisamment de temps pour remplir le formulaire, mais pas assez pour qu’un robot indésirable puisse l’envoyer rapidement.

En défilant vers le bas, vous pouvez également activer un filtre de pays pour permettre aux utilisateurs/utilisatrices de certains pays de remplir le formulaire. Nous vous recommandons de le faire si votre site immobilier vend uniquement dans un certain pays.

Une fois que vous avez activé le bouton « Activer le filtre pays », il vous suffit de cliquer sur « Autoriser » sous le filtre pays et de sélectionner le pays dans lequel vous vendez.

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

Si vous descendez dans la page, vous pouvez également activer une fonctionnalité CAPTCHA pour empêcher les entrées de formulaires frauduleux.

WPForms permet de personnaliser les CAPTCHA, reCAPTCHA et hCAPTCHA.

Passons maintenant à l’onglet « Notifications ». C’est ici que vous pouvez vous envoyer un e-mail à chaque fois qu’il y a une nouvelle entrée de formulaire.

Pour activer cette fonction, il suffit de cliquer sur  » Activer les notifications « . Nous vous recommandons également d’utiliser WP Mail SMTP pour vous assurer de toujours recevoir ces e-mails de notification, car les e-mails envoyés depuis WordPress sont susceptibles de se perdre.

En plus de cela, consultez notre guide sur comment corriger le problème de WordPress qui n’envoie pas d’e-mail.

N’hésitez pas à modifier le contenu de l’e-mail si nécessaire.

Vous pouvez également créer un e-mail de confirmation personnalisé à l’utilisateur dans ces Réglages, aussi. Pour ce faire, vous pouvez suivre notre tutoriel sur l’envoi d’e-mails de confirmation après l’entrée d’un formulaire WordPress.

Comme précédemment, n’oubliez pas de cliquer sur « Enregistrer » une fois que vous avez défini les Réglages.

Contenu embarqué du calculateur de coûts hypothécaires sur votre site WordPress

Vous êtes maintenant prêt à afficher le formulaire de calcul de l’hypothèque sur votre blog ou site WordPress. Il vous suffit de cliquer sur le bouton « Contenu embarqué » dans le menu supérieur.

Une fenêtre surgissante apparaît alors, vous demandant de sélectionner une page existante ou d’en créer une nouvelle pour y ajouter le formulaire.

Vous pouvez également utiliser un code court.

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

Si vous choisissez l’option « Sélectionner une page existante », l’écran suivant vous demandera de sélectionner une page à laquelle ajouter le formulaire. Cliquez ensuite sur « Let’s Go ! ».

Si vous choisissez l’option nouvelle page, l’écran suivant vous demandera de nommer cette nouvelle page afin que WPForms puisse la créer pour vous.

Comme pour la méthode précédente, cliquez sur « Let’s Go ! » pour continuer.

Ces deux options vous amèneront à l’éditeur de blocs Gutenberg.

Maintenant, cliquez sur le bouton « + » d’ajout de module n’importe où sur la page et sélectionnez le bloc WPForms.

Une fois le bloc créé, ouvrez le menu déroulant « Sélectionné un formulaire ».

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

Vous verrez maintenant votre formulaire nouvellement créé s’afficher dans l’éditeur/éditrices de blocs.

Dans la colonne latérale des Réglages, vous pouvez personnaliser davantage le design du formulaire, comme la couleur d’arrière-plan et la bordure du champ. Vous pouvez également cliquer sur « Modifier le formulaire » pour revenir au constructeur de WPForms si nécessaire.

Lorsque vous êtes satisfait de l’aspect du formulaire, il vous suffit de cliquer sur « Mettre à jour » ou « Publier » pour officialiser les modifications.

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

Si vous utilisez un thème WordPress classique, non bloqué, et que vous souhaitez afficher le formulaire dans une zone compatible avec les widgets, comme les en-têtes, les pieds de page ou les colonnes latérales, vous pouvez également le faire.

Il suffit d’aller dans Apparence  » Widgets et de cliquer sur le bouton d’ajout de bloc ‘+’ dans n’importe quelle zone prête pour les widgets. Comme précédemment, ajoutez-y le bloc WPForms et sélectionnez le formulaire que vous venez de créer.

Dans l’éditeur de widgets, vous pouvez également modifier les Réglages du widget de calculatrice hypothécaire, comme vous le feriez dans l’éditeur de blocs.

Une fois que vous êtes satisfait du formulaire, cliquez simplement sur « Mettre à jour ».

Si les méthodes ci-dessus ne fonctionnent pas, vous pouvez utiliser la méthode du code court pour insérer les formulaires dans les pages, les publications et d’autres éléments de modèle. Cliquez simplement sur le lien « Utiliser un code court » dans la fenêtre surgissante.

Ensuite, allez-y, copiez le code court et collez-le où vous le souhaitez.

En savoir plus, lisez comment ajouter un code court dans WordPress.

Méthode 2 : Ajouter un calculateur d’hypothèque WordPress avancé avec Formidable Forms

Cette méthode suivante est excellente si vous souhaitez créer une calculatrice hypothécaire WordPress avancée qui prend en compte vos taxes foncières annuelles, votre assurance et votre PMI (assurance hypothécaire privée).

Une fois que le formulaire dispose de ces données, ainsi que du prix du logement, du montant du prêt, du terme du prêt et du taux d’intérêt de l’utilisateur, il peut prévisualiser la répartition des paiements de l’utilisateur, également appelée plan d’amortissement.

Pour cette méthode, nous allons utiliser l’extension Formidable Forms. Cette extension de formulaire de contact WordPress simple/simple d’utilisation est livrée avec un modèle de calculatrice hypothécaire avancée que vous pouvez ajouter à votre site.

La première chose à faire est d’installer et d’activer les extensions Formidable Forms Lite et Formidable Forms premium (Business plan).

L’extension gratuite 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, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, allez dans Formidable  » Réglages globaux dans le tableau de bord WordPress. Ici, vous pouvez cliquer sur  » Connecter un compte « .

Sur l’écran suivant, il vous suffit de vous connecter à votre compte Formidable Journaliser.

Vous devez disposer des informations relatives à votre compte après avoir souscrit une offre.

Vous arrivez alors sur une page qui vous demande votre droit d’installer Formidable Forms Pro.

Cliquez sur ‘Connecter et installer Formidable Formulaires Pro’ pour activer votre clé de licence.

Maintenant que vous avez bien configuré Formidable Forms, vous êtes prêt à ajouter un formulaire de calculatrice hypothécaire sur WordPress.

Utiliser le modèle de formulaire de la calculatrice hypothécaire avancée

Pour commencer, il suffit de se rendre sur Formidable  » Formulaires, puis de cliquer sur  » Ajouter une nouvelle « .

Une fenêtre surgissante s’affiche alors, affichant tous les modèles prêts à l’emploi que vous pouvez utiliser sur votre site WordPress.

Pour trouver le modèle de formulaire de calcul d’hypothèque, il suffit de taper « Calculatrice hypothécaire avancée » dans la barre de recherche. Survolez ensuite le modèle et cliquez sur « Utiliser le modèle ».

Vous arrivez maintenant au Constructeur de formulaires Formidable. À ce stade, vous pouvez personnaliser le formulaire en fonction de 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 le libellé du champ, choisir si le champ est obligatoire ou facultatif, ajouter un texte de remplacement, et bien d’autres choses encore.

Ce qui est intéressant avec Formidable Forms, c’est que vous pouvez insérer une valeur par défaut dans la calculatrice, ce qui permet aux utilisateurs/utilisatrices de voir ultérieurement à quoi ressemble le calcul.

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

Cette zone contient les formules de calcul, de sorte que leur modification peut entraîner une panne totale de la calculatrice hypothécaire.

Lorsque vous êtes satisfait de l’aspect du formulaire, cliquez sur « Enregistrer » dans le coin supérieur droit pour enregistrer vos modifications.

Saisissez ensuite un nom pour votre formulaire afin de pouvoir l’identifier ultérieurement. Cliquez ensuite sur « Enregistrer ».

Outil de personnalisation du formulaire de calcul de l’hypothèque

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

Si vous n’aimez aucun des styles proposés, cliquez simplement sur le bouton « + Nouveau style ».

Une fenêtre surgissante apparaît ensuite. Il suffit d’écrire un nom pour ce nouveau style et de cliquer sur « Créer un nouveau style ».

Vous êtes maintenant dirigé vers une page où vous pouvez personnaliser la conception du style de formulaire.

N’hésitez pas à modifier la typographie, le jeu de couleurs, le style des boutons, des cases à cocher, etc.

Une fois que vous êtes satisfait du design, il vous suffit de cliquer sur le bouton « Mettre à jour » en haut à droite.

Définir les Réglages de Formidable Forms

À ce stade, vous pouvez naviguer vers le menu « Réglages » en haut de la page.

Tout d’abord, dans l’onglet « Général », vous pouvez personnaliser le titre et la description du formulaire et choisir de les afficher ultérieurement sur le site. Il peut s’agir d’un bon endroit pour insérer des instructions sur la manière d’utiliser le formulaire.

Note : si vous voulez donner un style au texte, vous devez utiliser le langage HTML.

En défilant vers le bas, vous trouverez un réglage permettant d’activer Honeypot et JavaScript pour la prévention des indésirables.

Nous vous recommandons de les activer tous les deux afin d’éviter les entrées de faux spams et de spams malveillants.

L’onglet « Actions et notifications » vous permet de personnaliser l’e-mail de confirmation envoyé à l’utilisateur.

Vous pouvez afficher un message de remerciement personnalisé, rediriger les utilisateurs/utilisatrices vers une URL spécifique ou les envoyer vers une page différente.

Un autre onglet que nous vous recommandons de consulter est celui des « boutons ».

C’est ici que vous pouvez personnaliser le texte et la position du bouton d’envoi et même activer un bouton « Recommencer » au cas où l’utilisateur voudrait vider le formulaire et recommencer.

Après avoir défini les réglages du formulaire, il suffit de cliquer sur le bouton « Mettre à jour ».

Contenu embarqué du formulaire de la calculatrice hypothécaire avancée sur votre site

Maintenant que votre formulaire de calculatrice hypothécaire avancée est prêt, vous pouvez l’ajouter à n’importe quelle publication, page ou zone prête à recevoir des widgets de votre thème WordPress.

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

Une fenêtre surgissante vous indique que vous pouvez ajouter le formulaire de trois manières différentes.

Vous pouvez embarquer le formulaire dans une page existante, l’insérer dans une nouvelle page ou utiliser un code court.

Si vous choisissez l’option page existante, vous sélectionnerez une page dans l’écran suivant.

Cliquez ensuite sur « Insérer un formulaire ».

En revanche, choisir l’option nouvelle page vous permettra de créer et de nommer une nouvelle page.

Une fois cette étape franchie, cliquez sur « Créer une page ».

Avec ces deux options, Formidable Forms insérera automatiquement le bloc de formulaire dans l’éditeur/éditrices de blocs de la page. Tout ce que vous avez à faire est de le réarranger.

Si vous devez modifier le formulaire directement à partir de l’éditeur de blocs, il vous suffit d’ouvrir la colonne latérale des Réglages du bloc et de cliquer sur « Aller au formulaire ».

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

Voici à quoi ressemble le formulaire de notre calculatrice d’hypothèque Formidable Forms :

Vous pouvez également ajouter la calculatrice hypothécaire à l’aide d’un code court ou d’un code PHP.

Dans la fenêtre surgissante, cliquez sur « Insérer manuellement ».

Ensuite, vous pouvez copier soit le code court, soit le code PHP. Là encore, pour la première option, vous pouvez consulter notre article sur l ‘ajout d’un code court dans WordPress.

Quant au code PHP, nous vous recommandons de l’utiliser uniquement si vous êtes à l’aise avec le travail avec des extraits de code. Nous vous recommandons d’utiliser WPCode pour cela, car cette extension permet d’insérer facilement et en toute sécurité du code dans WordPress.

En savoir plus, vous pouvez consulter notre guide sur l’insertion d’extraits de code dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une calculatrice hypothécaire sur WordPress. Vous pouvez également consulter notre article sur la façon de créer un prêt automobile ou un calculateur de paiement de voiture dans WordPress et notre choix d’experts des meilleurs services de marketing e-mail pour les petites entreprises.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.