Skip to content
English
Submit a Ticket
  • There are no suggestions because the search field is empty.

Add a Mortgage Calculator to Your Website

Place a custom mortgage calculator on your website for leads

A mortgage calculator helps visitors estimate monthly payments while browsing homes on your website. It adds value to your home search tool and keeps leads engaged longer. You can place the calculator inside page content or in the side area of a page for easy access.

Need to Know

  • Add the calculator using the Custom Content option

  • Paste the code inside the source code (<>) view

  • You can change the default interest rate inside the code

  • The calculator on property details pages cannot be edited

  • Works on any page that allows custom HTML

Table of Contents

Mortgage Calculator Code

This is the standard code block used to display the mortgage calculator on your website. You will paste this into the source code (<>) of any page on your website.

<div class="mortgage_calculator side_captions">
<h3>Mortgage Calculator</h3>
<form action="#">
<dl>
<dt>Amount of Loan</dt>
<dd><input type="text" name="loan_amount" class="full" value="4975000"></dd>
<dt>Annual Interest Rate</dt>
<dd><input type="text" name="annual_interest_rate" value="4.5"> %</dd>
<dt>Term of Loan</dt>
<dd><input type="text" name="term_of_loan" value="30"> Years</dd>
<dt><!-- NOTHING HERE --></dt>
<dd>
<div><a href="#" class="button button_calculate"><span>Calculate</span></a></div>
</dd>
</dl>
<div class="spacer"><!-- NOTHING HERE--></div>
<div class="monthly_loan_payment"></div>
<div class="disclaimer">
<p>Does not include any taxes or fees.<br>
Please consult a financial professional.</p>
</div>
</form>
</div>

Back to top

Adding the Calculator to a Page

You can place the calculator directly inside the main content area of any page that allows custom HTML.

  1. Open your website editor by adding /admin to the end of your website address (e.g. www.yourwebsite.com/admin)

  2. Open the page you want to edit

  3. Click the source code (<>) button

    source-code-pdf-png

  4. Paste the calculator code

  5. Click Save

Open the page and make sure the calculator shows up, looks correct, and all the buttons and fields work as expected before sharing it to anyone.

Back to top

Adding the Calculator to the Sidebar

The side area of the page is a popular location because it keeps the calculator visible while visitors browse homes.

  1. Open your website editor by adding /admin to the end of your website address (e.g. www.yourwebsite.com/admin)

  2. Open your Sidebars settings

  3. Add a new item

  4. Set the item type to Custom Content

  5. Click the source code (<>) button

    source-code-pdf-png

  6. Paste the calculator code

  7. Click Save

Back to top

Editing the Default Interest Rate

You can customize the starting interest rate shown in the calculator.

  1. Locate this line in the calculator code:

    • <input type="text" name="annual_interest_rate" value="4.5"

  2. Replace 4.5 with your preferred rate.

    • Example:
      Change value="4.5" to value="6.75"

Back to top

Best Practices

  • Place the calculator in the page sidebar if you want it visible on multiple pages

  • Add a short sentence reminding visitors these are estimates only

  • Test the calculator on desktop and mobile after publishing

  • Use it on buyer-focused pages to increase engagement and time on site

Back to top

Troubleshooting

  • The calculator is not showing
    Make sure you pasted the code inside the source code (<>) view.

  • The calculator doesn't look right
    The code might not have been added to your page properly. Make sure that you copy the calculator code as-is.

  • The calculator on property details pages looks different
    The mortgage calculator on property details pages cannot be edited or replaced

Back to top

Frequently Asked Questions

  • Can I change the design or colors?
    Not at this time. A designer would need to update this for you.

  • Can I add more fields?
    No. The calculator only supports the fields shown in the code.

  • Does it include taxes or insurance?
    No. It calculates loan payments only.

Back to top

Need Help?

Back to top

Related Articles

Back to top