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

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 encourages people to engage with your website.

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 have to write complex mathematical calculations or install a separate real estate plugin.

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, advanced 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.

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

First thing you need to do is to install and activate the Formidable Forms plugin. For detailed instructions, see our step by step guide on how to install a WordPress plugin.

Upon activation, you will see a notification asking for a license key. You can go ahead and click on ‘Add your license key now.’

Add Your Formidable Forms Pro License Key

This will take you to the Global Settings page.

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

Connecting WordPress to your Formidable Forms account

Another option is to select ‘Click to enter a license key manually’ and then paste your license key into the field.

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

Adding a license key to the Formidable Forms plugin

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

Now you can simply refresh your page to load the premium features.

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

Add New Formidable Form

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

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

Formidable Forms' template library

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

Let’s start with the Simple Mortgage Calculator.

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.

Next, 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 on that field. You can then make your changes using the settings in the left-hand menu.

For example, you can change the field label and default value for the ‘Mortgage Amount’ field.

Customizing Simple Mortgage Calculator Field Options

However, if you customize the ‘Monthly Payment’ field, then you should be careful when changing any of the ‘Advanced’ settings 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.

Customizing Monthly Payment Field Options Formidable Mortgage Calculator

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 now now click on the ‘close’ icon to exit the form editor.

Simple Mortgage Calculator Successfully Created

Your simple mortgage calculator is now ready and you can add it 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 that you created earlier.

WordPress will now load the form automatically.

Adding Simple WordPress Mortgage Calculator to Page Editor

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.

Simple WordPress Mortgage Calculator Preview

Creating 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 information. This is perfect if you want to provide visitors with detailed mortgage information.

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

Add New Formidable 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.

The Advanced Mortgage calculator template

This opens an interactive preview.

If you’re happy to use this template, then simply 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.

After that, 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.

Advanced Mortgage Calculator Editor in Formidable Forms

To start, click on the field that you want to customize and the Field Options will appear in the left-hand column.

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

Customizing Field Options in Advanced Mortgage Calculator Form

If you click on any of the fields in the ‘Financial Analysis’ section, then try to avoid changing any of the ‘Advanced Options’ in the left-hand column.

This area contains the calculation formulas, so changing them can completely break the mortgage calculator.

Calculation Fields in Advanced Mortgage Calculator Formidable Forms

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 ‘Close’ icon in the top-right corner.

Your advanced mortgage calculator form is now ready and you can add it to any post or page, or any 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.

Adding an advanced mortgage calculator to your WordPress site

After that, you need to 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’re ready, either publish or update the page. If you visit your site, you’ll see the mortgage calculator live on your page, post, or widget-ready area.

Advanced WordPress Mortgage Calculator Preview

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.

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

6 CommentsLeave a Reply

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

      Admin

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

      Admin

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

      Admin

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.