How to Add a Mortgage Calculator in WordPress (Step by Step)

Do you want to add a mortgage calculator in WordPress?

If you have a real estate website then a mortgage calculator helps visitors see whether they can afford the properties you’re promoting. This can keep people on your website for longer and help you sell more properties.

In this article, we will show you how to easily add a mortgage calculator in WordPress.

Why Add a Mortgage Calculator in WordPress?

A mortgage calculator allows users to get estimates for their mortgage payment, with interest rate and amortization period.

Visitors can simply select a monthly payment or period, and the mortgage calculator will figure out the costs based on a given interest rate.

If you are making a real estate website with IDX property listings, then a mortgage calculator will help you capture more leads and encourages people to engage with your site.

It can also reduce your bounce rate because visitors don’t have to visit a different site to get a mortgage calculation.

That being said, let’s take a look at how to easily create a mortgage calculator in WordPress.

Creating a WordPress Mortgage Calculator – (Step by Step)

Adding a mortgage calculator in WordPress used to be quite difficult. You would either need to write complex mathematical calculations, install a separate real estate plugin, or even hire a WordPress developer.

Now, you can build an advanced mortgage calculator with just a few clicks using Formidable Forms. This popular WordPress contact form plugin comes with two ready-made mortgage calculator templates that you can add to your site.

Formidable Forms also has advanced features like conditional logic, complex calculations, file uploads, repeater fields, dynamic pre-filled fields, and more. This allows anyone to create advanced forms for your real estate website.

Let’s get started.

How to Setup Formidable Forms

To use the mortgage calculator features, you’ll need to buy the Formidable Forms Business or Elite plan.

The first thing you need to do is to install and activate both the Formidable Forms Lite and Formidable Forms premium plugins. The free plugin has limited features, but Formidable Forms Pro uses it as the basis for its more advanced features.

For detailed instructions, see our step-by-step guide on how to install a WordPress plugin. Upon activation, you can click on the ‘Add your license key now’ notice.

Another option is to go to Formidable » Global Settings in the WordPress dashboard.

Here, you can click on ‘Connect an Account’ and follow the instructions to connect WordPress to your Formidable Forms account.

You can also select ‘Click to enter a license key manually’ and then paste your license key into the field.

You’ll find the license key by logging into your account on the Formidable Forms website.

Once you’ve entered this information, click on ‘Save License.’ After a few moments you’ll see a ‘license activation success’ message.

Create a Mortgage Calculator in WordPress

Now you’ve have successfully set up Formidable Forms, you’re ready to add a mortgage calculator form to WordPress.

To start, simply go to Formidable » Forms and then click on ‘Add New.’

A popup will now appear showing all the ready-made templates that you can use on your WordPress website.

To find the mortgage calculator template, open the ‘Calculator’ section.

Inside this category, you’ll see two mortgage calculator templates: Simple Mortgage Calculator and Advanced Mortgage Calculator.

Let’s look at both templates.

How to Add a Simple Mortgage Calculator to WordPress

Let’s start with the Simple Mortgage Calculator template.

To preview how the form will look on your site, simply hover your mouse over the ‘Simple Mortgage Calculator’ template and then click on the little icon that looks like an eye.

Formidable Forms will now show a preview of the template that you can interact with.

To build a form using the simple calculator template, just click on ‘Use this template.’

Next, type a title into the ‘Form Name’ field. This is just for your reference so you can use anything you want.

After that, click on the ‘Create’ button to open the form builder.

At this point you may want to customize the template’s fields to better match your needs.

To change a field’s label, default value or placeholder text, simply click to select that field. You can then make your changes using the settings in the left-hand menu.

For example, you might select the ‘Mortgage Amount’ field and then change its field label and default value.

However, be careful when changing any of the settings under ‘Advanced’ as they include the calculation formula.

Unless you’re a mortgage calculation expert, we recommend leaving these settings unchanged so you don’t break anything.

When you’re happy with how the form looks, click on the ‘Update’ button in the top right corner of the screen.

After a few moments you should see a ‘successfully updated’ message. You can now click on the ‘x’ icon to exit the form editor.

After that, you can add the simple mortgage calculator to any page or post. Either create a new page or open an existing one, and then click on the ‘+’ icon.

You can then simply type in ‘Formidable Forms’ and click on the right block when it appears.

After that, just open the ‘Select a form’ dropdown and choose the simple mortgage calculator form you created earlier.

WordPress will now load the form automatically.

When you’re happy with how the page looks, you can either click on ‘Update’ or ‘Publish’ to make it live.

Now, you’ll see the simple mortgage calculator on your WordPress blog or website.

How to Create an Advanced Mortgage Calculator in WordPress

The simple mortgage calculator template allows visitors to quickly and easily get a basic mortgage calculation. However, if your visitors want a more detailed calculation including taxes, insurance payments, PMI, loan-to-value ratio, and more, then you’ll need a more advanced mortgage calculator.

The good news is that Formidable Forms also has an Advanced Mortgage Calculator that lets visitors enter the home value, plus loan information including amount, interest rate, amortization schedule, annual taxes, insurance, and PMI.

The form will then calculate the data and show monthly payments, duration, and other advanced information. This is perfect if you want to provide detailed mortgage information.

To create an advanced calculator, go to Formidable » Forms and click on the ‘Add New’ button to create a new form.

After that, simply open the ‘Calculator’ category and then find the ‘Advanced Mortgage Calculator’ template.

To preview this advanced template, simply hover over the template and then click on the little eye icon.

This opens an interactive preview.

If you’re happy to use this template, then click on the ‘Use this template’ button.

After that, type a title into the ‘Form Name’ field. This is just for your reference so you can use anything that will help you identify the form in your WordPress dashboard.

With that done, click on the ‘Create’ button.

This will open the advanced mortgage calculator template in the drag-and-drop form editor.

At this point, you may want to customize the form to match your needs.

To start, click on the field that you want to customize and then select the ‘Field Options’ tab.

From there you can change the field label, default value, whether the field is mandatory or optional, and many other things.

If you click on any of the fields in the ‘Financial Analysis’ section, then try to avoid changing any of the ‘Advanced Options.’ This area contains the calculation formulas, so changing them can completely break the mortgage calculator.

When you’re happy with how the form looks, click on ‘Update’ to save your changes. You can then exit the Formidable Forms editor by clicking on the ‘X’ icon in the top-right corner.

Your advanced mortgage calculator form is now ready and you can add it to any post, page, or widget-ready area of your WordPress theme.

In our example we’ll add the calculator to a page, but the steps will be similar when adding the form to other areas of your site.

To start, go to Pages » Add New and then click on the ‘+’ button.

In the popup that appears, type ‘Formidable Forms’ to find the right block, and then add the block to your post.

After that, just open the ‘Select a form’ dropdown and choose the advanced mortgage calculator you created earlier.

WordPress will now load the form automatically.

Now you can add any other content to the page, including any categories and tags that you want to use.

When you’re ready, either click on ‘Publish’ or ‘Update.’ Now if you visit your site, you’ll see the mortgage calculator live on your page, post, or widget-ready area.

We hope this article helped you learn how to add a mortgage calculator in WordPress. You may also want to see our expert pick of the best email marketing services and how to create an email newsletter.

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.