How to build a Gravity Forms mortgage calculator

How to Build a Gravity Forms Mortgage Calculator

Written by Casey Burridge Marketing Coordinator at GravityKit since 2021, Casey is an expert on Gravity Forms, WordPress, and marketing.

Last updated:

Categories GravityMath

Tags

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 [gv_math]
  • Calculating Monthly Loan Payments
  • Creating the Loan Calculator Form in Gravity Forms
  • Displaying the Monthly Payment amount in the Confirmation message
  • Using [gv_math] inside a View

Okay, let’s get started.

What You’ll Need

To build the Gravity Forms mortgage calculator in this tutorial, you’ll need Gravity Forms as well as GravityMath.

Advanced Gravity Forms Calculations With [gv_math]

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 plugin! The plugin adds a powerful shortcode that you can use to perform advanced calculations anywhere on your website.

Installing GravityMath 

First, you’ll need to install the Math plugin. If you have a GravityView All Access license, you can do this by hovering over Views in your admin panel, clicking on Manage Add-Ons, and installing Math.

The GravityView manage add-ons screen inside the wordpress admin menu, with the Math by GravityView plugin highlighted

Alternatively, you can purchase Math as a standalone plugin from our website.

Using [gv_math]

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

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

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

[gv_math] 10 * 10 [/gv_math]

This would output 100.

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

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 [gv_math] to write our own formula.

The formula used to calculate the monthly payment on a mortgage

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

To calculate the monthly payment on a loan, we’re going 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)

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. 

Log into your WordPress site, hover over Forms and click New Form. Under Standard Fields, select the Number field and add four of them to your form – one for each of the points above.

The Gravity Forms edit page with an arrow pointing to the Number field.

Here’s what our finished form looks like:

A Gravity Forms mortgage calculator form with four fields for Home Price, Total Years, Annual Interest Rate and Number of Payment Per Year

Displaying the Monthly Payment in the Default Confirmation

Now we can write a formula using [gv_math] 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.

The Gravity Forms default confirmation

Here’s our full formula:

Gravity Forms confirmation text box with the mortgage payment formula inside

It looks pretty complicated, but it’s actually quite simple. Let’s break it down into manageable chunks.

Note: Anything wrapped in curly braces, like this {t:4} is a Gravity Forms merge tag that corresponds to a user input field. Merge tags can be added to your confirmation by clicking the {..} button on the right side of the text editor.

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 above, except 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…

A form on the front end with four fields: the home price, total years, interest rate and number of payments per year

After submitting the form, they will see this…

The Gravity Forms confirmation message on the front end showing the  monthly payment amount

If you want to use this formula, you can copy and paste the code below, just remember to replace the merge tags.

$[gv_math]

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)

[/gv_math]

Using [gv_math] Inside a View

You can also use the [gv_math] shortcode inside a View to display calculations on the front end of your website.

To perform calculations inside a View, click the Add Table Column button and select the Custom Content field.

Place the formula inside the Custom Content text editor. You’ll also need to add scope="entry" to ensure that calculations are done using data from a single entry.

GravityView custom content field with the mortage payment formula inside

Here’s an example of a Table Layout, displaying the monthly payment amount in the right-hand column.

A GravityView table displaying the loan information including the monthly payment in the right-hand column

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 [gv_math] shortcode that you can use anywhere on your site. 

Using it together with 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. 

But why not take this example and run with it? You can build a calculator for anything you want – the sky’s the limit. And when you do, be sure to let us know! 

What are you waiting for? Get GravityMath today.

If you found this post interesting, check out How to Create an Advanced Quote Calculator.