How to add a custom mortgage calculator

How to Add a Custom Mortgage Calculator to Your Website

Editorial Note: We may earn a commission when you visit links on our website.

Want to create a custom mortgage calculator for your website?

By using an online mortgage calculator, loan officers can pre-screen applicants faster and reduce messy paperwork.

In this tutorial, we’ll show you how to make a custom mortgage calculator by using a template in WordPress.

Create Your Custom Mortgage Calculator

How to Add a Custom Mortgage Calculator to Your Website

As a mortgage lender, you’ll find that having a mortgage calculator form online will save time, and they’re much better than using a PDF template. Follow this step-by-step guide to make your mortgage calculator form easily.

Step 1: Install the WPForms Plugin

Using WPForms is the easiest way to create an online mortgage calculator for your financial institution. WPForms Pro has a ton of pre-built calculation templates for every type of industry, including price calculators for eCommerce stores and more.

The WPForms homepage

The first thing you’ll want to do is install and activate the WPForms plugin. For more details, check out this step-by-step guide on how to install a plugin in WordPress.

Step 2: Activate the Calculations Addon

The next step is to install the Calculations Addon, which helps create and implement the calculations responsible for determining the fixed-rate mortgage payments, mortgage insurance, and any other additional payments.

All you have to do is click on WPForms from your WordPress dashboard and click on Addons.

WPForms addons

Type “Calculations” in the Search Addons field. Next, click on the Install Addon button and then click on the Activate button.

Activate Calculations Addon

Excellent job! In the next section, we will demonstrate how to generate leads by customizing a mortgage calculator form.

Step 3: Choose the Mortgage Calculator Template

To do this, go to WPForms » Add New and type in the name of your form. We’ll name ours “Mortgage Calculator.”

Name your form

Then scroll down to the section labeled Select a Template and type “mortgage” in the search bar. After that, choose the Mortgage Calculator Form Template.

Click Use Template

Next, you’ll be sent to the redirected to the Fields screen. The fields that are currently available are displayed on the left side of this screen.

WPForms fields menu

On the right side, you’ll see a preview of your form that you can customize. The fields will be added instantly since we chose a template.

Calculator form preview

Once the mortgage calculator form template has loaded, you’ll see that most of the work is done for you. You’ll find the following fields are already in the form:

  • Home Value
  • Down Payment
  • Interest Rate
  • Mortgage Period
  • Monthly Mortgage Payment
  • Annual Payment Amount
  • Total Interest Paid
  • Total Mortgage Payment

You can now use WPForms’ easy-to-use drag-and-drop builder to modify, rearrange, or add fields to customize the form to your liking.

Step 4: Customize the Mortgage Calculator Form

If you’re looking for some creative ways to use the template, there are other ways you can customize it based on the unique needs of your business.

For instance, you can change calculations, add more relevant fields, or insert a logo to the header. Below, you’ll find how to achieve these customizations.

Change Calculations in Fields

The Calculations addon allows you to easily perform basic arithmetic operations, including addition, subtraction, multiplication, and division.

Since we’re using a template, all calculations will be automatically added, but you can still change them or add a new calculation.

To do this, you’ll need to add one of the supported calculation fields to your form. Below, we’ve highlighted the compatible fields:

  • Single Line Text
  • Paragraph Text
  • Number
  • Hidden
  • Single Item

After you have added any of the supported fields, you may obtain access to the Field Options panel by selecting the field.

select field

Following that, select the Advanced tab and move the Enable Calculation option to the on position by using the toggle switch.

enable calculations

Once you have enabled calculation mode for a form, you will notice a text editor below the toggle. This text editor is used for constructing formulas.

The Insert Field button enables you to select a field from your form that can be used as a variable in your calculation formula.

insert field button

You will find icons next to the Insert Field button that allow you to add arithmetic operators to the formula builder easily. Supported arithmetic operators include:

  • Addition (+)
  • Subtraction ()
  • Multiplication (*)
  • Division (/)
  • Modulo (%)

arithmetic operators

Once you’re done making your formula, you should validate it to make sure the syntax and formulas are correct. Simply click on the Validate Formula link.

validate formula

Add More Relevant Fields

If you’d like, you can add additional fields to your amortization form by dragging them from the left-hand panel to the right-hand panel.

To change a field’s label, description, and other attributes, you can open its options by clicking on the field.

For instance, you can add two Dropdown fields to determine the purpose of the mortgage or monthly payments and the type of property being considered:

  • Purpose of Mortgage or Loan
    • Home Loan
    • Refinance
    • Debt Consolidation Loan
    • Second Mortgage
    • Home Equity Loan
    • Home Improvement Loan
    • Bad Credit Home Mortgage
  • Type of Property
    • House
    • Condo
    • Town House
    • Duplex
    • Land

add new fields to mortgage calculator

Insert a Form Header Image/Logo

Including an image is an excellent method to add a personal touch to your form, provide users with a better understanding of the form’s purpose, or showcase your business logo.

The Content field in WPForms makes it easy to upload text and media, such as images or logos, directly into your forms.

Once the content field is in the preview area, click on it to open its Field Options. From there, click on Add Media to insert your logo or use the editor to change the text.

customize content field for mortgage calculator

When your form looks the way you want it to, make sure to hit the Save button to avoid losing any changes.

Save the form

If you want to match the aesthetics of your form and your website, check out our tutorial on how to edit the header of your WordPress website.

Step 5: Configure Your Mortgage Form Notifications

Notifications are a superb way to email others when a mortgage application form is submitted on your website.

Accessing a form's notifications settings

This assures your clients who are applying for a mortgage that their form has gone through and will get a response regarding their extra payments soon.

For help with this step, check out our documentation on how to set up form notifications in WordPress. This should help your visitors with their home purchase.

An email notification with a custom header image

Once you configure your form notifications, the next step is to customize your form confirmations, which are messages that are displayed to those applying for a home, land, or other real estate loans once they submit your mortgage application.

WPForms has three confirmation types to choose from:

  1. Message: This is the default confirmation type in WPForms. When a homebuyer submits your form, a simple message will appear, letting them know their mortgage application is being processed. Check out some great success messages to help build positive relationships with your clients.
  2. Show Page: This confirmation type will take your customers to a specific web page on your site thanking them for applying for a mortgage loan or can tell them the next steps in the fixed-rate loan process. For help doing this, check out our tutorial on redirecting customers to a “Thank You” page.
  3. Go to URL (Redirect): This option is for when you want to send site visitors to a different website with relevant information, possibly about determining their down payment amount, property taxes, homeowners insurance, amortization schedule, credit score check, closing costs, and the list goes on.

Let’s see how to set up a simple form confirmation in WPForms so you can customize the message your refinancing applicants will see when they apply for a loan. To start, click on the Confirmations tab in the form builder under Settings.

Customizing your mortgage application form confirmation message

Then, once you’ve customized the confirmation message to your liking, click Save.  For help with other confirmation types, see our documentation on setting up form confirmations. Now, you can add your mortgage application form to your website.

Step 6: Add the Custom Mortgage Calculator to Your Website

Now that you’ve built your online mortgage application using the template, you can add it to your WordPress website.

WPForms lets you add your forms to other locations on your site, including your blog posts, pages, and even sidebar widgets.

To begin, create a new page or post in WordPress, or simply update an existing one for your simple loan application form. After that, add a new block and select the WPForms icon.

Click WPForms IconThe easy-to-use WPForms widget will appear inside your block. Click on the WPForms dropdown and pick the form you want to insert into your page.

Select Mortgage FormNow, click Preview, and you’ll see your mortgage application form as it’ll appear on your website.

Preview Mortgage Form

If you’re satisfied with the way your mortgage borrower form looks, hit Publish, and your form will go live on the Internet.

To view mortgage application form entries after they’re submitted, check out this complete guide to form entries.

For example, you can view, search for, filter, print, and delete any mortgage application entries, making the pre-qualification process that much easier.

More Questions about Custom Mortgage Calculators

Learning how to create a custom mortgage calculator is a popular topic among our readers. Here are answers to some common questions about it.

How do I create a mortgage calculator in WordPress?

To create a mortgage calculator in WordPress, you can use WPForms Pro along with its Calculations Addon.

You can customize the form fields for loan amount, interest payments, loan term, and more, while the Calculations Addon will handle the math automatically.

How do I create a custom calculator in WordPress?

Creating a custom calculator in WordPress is straightforward with WPForms Pro and its Calculations Addon.

Start by adding a new form, then use the drag-and-drop builder to insert and customize fields relevant to your calculator .

How do I create a cost calculator in WordPress?

First, create a new form with WPForms Pro and use the drag-and-drop feature to add fields for each element you want to include in the cost calculation.

Then, with the Calculations Addon, you can define formulas that will automatically compute costs based on the data entered by users, providing them with instant cost estimates.

Next, Build an Online Travel Request Form

And there it is! You now know how to make a mortgage application form online using a template and publish it on your WordPress website.

This will, in turn, help you generate some good quality leads for your business. You can also check out our guide for more tips on mortgage lead generation.

If your employees need to travel to meet mortgage clients, an online travel request form will help you manage and reimburse their expenses.

Create Your Mortgage Calculator Now

So what are you waiting for? Get started with the most powerful WordPress forms plugin today. WPForms Pro includes a free online mortgage application form template and offers a 14-day money-back guarantee.

And if you enjoyed this post, follow us on Facebook and  Twitter for more free WordPress tutorials.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.