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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.