Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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 are 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.

Adding 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 encourage 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 Advanced WordPress form plugin

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 Set Up 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.

Add Your Formidable Forms Pro License Key

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.

Connecting 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 in to your account on the Formidable Forms website.

Adding a license key to the Formidable Forms plugin

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 successfully set up Formidable Forms, you are ready to add a mortgage calculator form to WordPress.

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

Creating a new form using Formidable Forms

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.

Formidable Forms' calculator templates

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.

Previewing the Formidable Forms simple mortgage calculator template

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.’

Adding a simple mortgage calculator to WordPress

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.

Adding a name to the mortgage calculator form

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.

Customizing a form using the Formidable Forms editor

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

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

Creating an advanced mortgage calculator using Formidable Forms

When you are 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.

Publishing a mortgage calculator in WordPress

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.

The Formidable Forms block

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.

Adding Simple WordPress Mortgage Calculator to Page Editor

When you are 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.

Simple WordPress Mortgage Calculator Preview

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 the 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.

How to create an advanced mortgage calculator for your WordPress blog or website

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.

The Advanced Mortgage calculator template

This opens an interactive preview.

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

Previewing the advanced mortgage calculator template

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.

Creating a new form using the advanced mortgage template

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.

The Formidable Forms user-friendly editor

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.

Customizing the ready-made mortgage calculator template

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 are 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 will 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.

Adding an advanced mortgage calculator to your WordPress site

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.

Add Advanced WordPress Mortgage Calculator to Page Editor

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

When you are ready, either click on ‘Publish’ or ‘Update.’ Now, if you visit your site, then 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

7 CommentsLeave a Reply

  1. Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Hi there, I want to know if the currency in a different country will affect the mortgage calculator? I see in the screenshots only $, but I would like it to be South African Rand (R), will that be possible?

    • Changing the currency should not cause an issue, if you reach out to Formidable Forms’ support they can assist you with any questions you may have about how to set it up.


  3. Hi. Since we work with different banks and each of them have their own amount of interest rates, is it possible to have an option for the clients to select their preferred bank based on their interest rate or can I only use 1 specific predefined interest rate?

    • You would want to reach out to the plugin’s support for the specifics and you could likely set that up how you are wanting.


    • Depending on the theme it could have some effect, but it shouldn’t be a large effect


Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.