How to Make a Mortgage Application Form Online [TEMPLATE]

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.

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.

In This Article

Step 1: Install the WPForms Plugin
Step 2: Activate the Calculations Addon
Step 3: Choose the Mortgage Calculator Template
Step 4: Customize the Mortgage Calculator Form
Step 5: Configure Your Mortgage Form Notifications
Step 6: Add the Custom Mortgage Calculator to Your Website

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

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

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

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.

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.

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.

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.

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

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.

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 (%)

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.

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

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.

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

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.

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.

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:

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

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.

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

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

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.

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.

How to Add a Custom Mortgage Calculator to Your Website