Step By Step Way To Add a Mortgage Calculator in a WordPress Website

Imagine this: a potential buyer visits your real estate website. They’re excited but maybe a little overwhelmed. What kind of properties can they afford? Wouldn’t it be amazing if they could answer that question right there, on your site?

If you’re in the real estate business, adding a mortgage calculator to your website can give you a significant advantage over the competition. It allows potential homebuyers to estimate their monthly payments and positions you as a knowledgeable and helpful resource.

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 payments, considering the interest rate and amortization period. Visitors can input information like home value, down payment, and interest rates, and the calculator will determine their monthly payments.

Adding a mortgage calculator can help reduce your bounce rate since visitors won’t need to visit another site for mortgage calculations. It can also aid in lead generation by requiring visitors to enter their email addresses to save their results.

Now, let’s look at how to create a mortgage calculator in WordPress using two different plugins: WPForms and Formidable Forms.

Method 1: Add a Simple WordPress Mortgage Calculator With WPForms

WPForms is a drag-and-drop form plugin with over 1700 form templates, including a mortgage calculator. This method is recommended for those who want a simple and responsive mortgage calculator without additional calculations for taxes or insurance.

Step 1: Install and Activate WPForms

First, install and activate the WPForms plugin in WordPress. You will need the Pro plan for this tutorial, as it includes the Calculations addon.

Step 2: Verify Your License Key

Navigate to WPForms » Settings and insert your Pro plan’s license key from your WPForms account page. Then, click ‘Verify Key.’

Step 3: Create a Mortgage Calculator Form

1. Go to WPForms » Add New.
2. Give your form a name, like ‘Mortgage Calculator Form.’
3. Use the search bar to find and select the ‘Mortgage Calculator Form’ template.
4. Click ‘Use Template.’

Step 4: Customize the Form

You will arrive at the drag-and-drop form builder, where the template comes with pre-built calculator fields. Customize these fields as needed by clicking on them and adjusting the settings in the left-hand panel.

For example, you can:

• Change field labels.
• Add placeholder text.
• Make fields mandatory.

Step 5: Configure Form Settings

Switch to the ‘Settings’ tab:

• In the ‘General’ tab, customize the form’s name, description, and submit button text.
• In the ‘Spam Protection and Security’ tab, enable additional spam protection measures like Akismet.
• In the ‘Notifications’ tab, set up email notifications for form submissions.

Step 6: Embed the Mortgage Calculator

Click the ‘Embed’ button in the top menu. You can add the form to an existing page, create a new page, or use a shortcode.

For existing or new pages:

1. Select or create a page.
2. Use the block editor to add the WPForms block and select your form.
3. Click ‘Publish’ or ‘Update’ to make the form live.

Method 2: Add an Advanced WordPress Mortgage Calculator With Formidable Forms

This method is ideal for creating an advanced mortgage calculator that includes calculations for annual property taxes, insurance, and PMI (private mortgage insurance).

Step 1: Install and Activate Formidable Forms

Install and activate both the Formidable Forms Lite and Formidable Forms premium (Business plan) plugins.

Step 2: Verify Your License Key

Go to Formidable » Global Settings in the WordPress dashboard and click on ‘Connect an Account.’ Log into your Formidable Forms account and allow the plugin to install the Pro version.

Step 3: Create a Mortgage Calculator Form

1. Go to Formidable » Forms and click on ‘Add New.’
2. Search for and select the ‘Advanced Mortgage Calculator’ template.
3. Click ‘Use Template.’

Step 4: Customize the Form

Use the drag-and-drop builder to customize the form fields. Avoid changing the ‘Advanced Options’ in the ‘Financial Analysis’ section to prevent breaking the calculator’s functionality.

Step 5: Customize the Form’s Style

Switch to the ‘Style’ tab to choose a design for the form. You can create a new style and customize typography, color schemes, button styles, and more.

Step 6: Configure Form Settings

In the ‘Settings’ menu:

• Customize the form title and description in the ‘General’ tab.
• Enable spam protection features in the ‘General’ tab.
• Customize the confirmation email in the ‘Actions & Notifications’ tab.
• Adjust the submit button settings in the ‘Buttons’ tab.

Step 7: Embed the Mortgage Calculator

Click the ‘Embed’ button in the top right corner. You can add the form to an existing page, create a new page, or use a shortcode.

For existing or new pages:

1. Select or create a page.
2. Use the block editor to add the Formidable Forms block and select your form.
3. Click ‘Publish’ or ‘Update’ to make the form live.

Alternatively, you can use a shortcode or PHP code to insert the form into any page, post, or widget-ready area.

By following these steps, you can easily add a mortgage calculator to your WordPress site, providing a valuable tool for your visitors and enhancing your real estate website.