How to build a Gravity Forms mortgage calculator

Did you know that over 6 million homes are sold each year in the US? And just over 60% of those buyers take out a mortgage.

The monthly payment is one of the most important aspects of any home loan, but calculating it can be tedious!

So why not build a calculator that does the hard work for you?

In this post, we’ll show you how to use the GravityMath plugin to build a powerful Gravity Forms mortgage calculator that calculates the monthly payment amount for any given loan.

Here’s what we’ll cover in this post:

• Advanced Gravity Forms Calculations with a shortcode
• Calculating monthly loan payments
• Creating the loan calculator form in Gravity Forms
• Displaying the monthly payment amount in the confirmation message
• Bonus: Managing mortgage applications and visualizing data

Let’s dive in!

What you’ll need

To build the Gravity Forms mortgage calculator in this tutorial, you will need the following two plugins:

• Gravity Forms
• GravityMath

Advanced Gravity Forms calculations with GravityMath

Calculating monthly payments on a loan is not a straightforward process. The calculations are complex and doing it by hand is difficult and time-consuming.

That’s why we’re going to use the GravityMath add-on for Gravity Forms! GravityMath adds a powerful shortcode that you can use to perform advanced calculations using your form data.

Using the [gravitymath] shortcode

The [gravitymath] shortcode integrates with Gravity Forms and GravityView enabling you to perform calculations based on user input values.

You can use [gravitymath] in posts, pages, confirmations, notifications, Views – anywhere!

Here’s a basic example of how [gravitymath] works:

[gravitymath] 10 * 10 [/gravitymath]

This would output 100.

[gravitymath] 10 - (2 + 3) [/gravitymath]

This would output 5.

The shortcode has several available parameters and functions. To learn more about it, check out our documentation.

Calculating monthly mortgage payments

We can make use of the below formula to calculate the monthly payments for a given loan. 

Note that in the below formula, ‘r‘ equates to the monthly interest rate (not annual) and ‘n‘ equates to the total number of payments (i.e. payments per year multiplied by the number of years). We have to keep this in mind for later when we use the [gravitymath] shortcode to write our own formula.

So we have the following:

• M (The monthly payment)
• P (Price of the home)
• r (Annual interest rate divided by the number of payments per year)
• n (Number of payments per year multiplied by the total number of years)

Now we can create a form in Gravity Forms that allows us to capture this information. After that, we can write a formula to calculate the monthly payment amount!

Creating the mortgage calculator form in Gravity Forms

First, we’ll log in to our WordPress site, hover over “Forms” and click “New Form”. Now we can start building our calculator form using the Gravity Forms visual editor.

To calculate the monthly payment on a loan, we need to capture the following information in our form:

• The price of the home (P)
• The annual Interest rate (r)
• Total years to pay back the loan (t)
• Number of payments per year (n)

Under “Standard Fields”, we’ll select the “Number” field and add four of them to our form (one for each of the metrics above).

This makes things really easy for the user as they will only have to input four values, which they can easily find on their loan agreement!

Here’s what our finished form looks like on the front-end:

Now that we have our form set up, we need to calculate the monthly payment amount and display it to the user! That’s what we’re going to tackle in the next step.

Displaying the monthly payment in the default confirmation

Now we can write a formula using the [gravitymath] shortcode to calculate the monthly payment amount based on the information entered by the user. In this example, we’ll display the monthly payment in the Gravity Forms Default Confirmation, so that the user can see it after they submit the form.

We’ll start by navigating to the form settings page and then clicking on the “Confirmations” tab on the left.

Next, we’ll hover over “Default Confirmation” and click “Edit”. Inside the confirmation message box, we’re going to copy and paste the below formula that calculates the monthly payment amount on the loan.

$[gravitymath]

round(({P:1} * (((({r:5}/100) / {n:6}) * pow( (1 + (({r:5}/100) / {n:6})) , ({t:4} * {n:6}) )) / (pow( (1+(({r:5}/100) / {n:6})) , ({t:4} * {n:6})) -1 ))) , 2)

[/gravitymath]

Here’s what it looks like:

After copying and pasting the formula, make sure to replace the merge tags with your own! Anything in curly brackets is a merge tag that enables you to reference user input values. To replace the merge tags with your own, click on the {..} icon above the message box and insert the merge tags in the correct spots.

💡 Pro tip: Learn more about dynamic content in Gravity Forms by reading our ultimate guide to Gravity Forms merge tags!

You might think the formula above looks complicated, but it’s actually quite simple. Let’s break it down into manageable chunks:

We start with the round() function, which rounds the result of our calculation to 2 decimal places. After that, the rest of the formula is the same as the one we reviewed previously. The only difference is that we’re dividing r by n to get the monthly interest rate. We’re also multiplying t by n to get the total number of payments.

To raise a number to the power of another number, we use the pow() function which takes two variables, the base and the exponent, like so:

pow(base , exponent)

That’s it!

So when a user inputs the details of their loan, like this…

After submitting the form, they will see this…

Pretty neat, huh?

Bonus: Creating loan tables

We offer another Gravity Forms add-on called GravityView, which enables you to display form entries on the front end of your site. You can use GravityView to build smart tables, lists, and directories!

Let’s take a quick look at how we can use GravityView and GravityMath together to create helpful tables to visualize mortgage data.

You can extend this further to build a mortgage application system, a fintech database, or any other app for managing data!

Gravity Forms mortgage calculator: Final thoughts

GravityMath is a powerful plugin that allows you to do advanced calculations on your WordPress website. Math gives you access to the [gravitymath] shortcode that you can use anywhere on your site. 

Using GravityMath and Gravity Forms, you can create a simple but powerful mortgage calculator. In this example, we built a form that calculates the monthly payment on a standard, fixed-rate loan. 

So what are you waiting for? Get GravityMath today. Alternatively, check out How to create an advanced quote calculator.