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

You can add a mortgage calculator anywhere on your site using a small block of code. Many users place it in the side area of the page to give visitors quick access while browsing listings. This guide shows you how to insert the calculator, adjust the interest rate, and make sure it displays correctly.

 

Quick Reference

  • Add the calculator using the Custom Content option.
  • You must paste the code into the source code (<>) view.
  • You can change the default interest rate by editing the number in the code.
  • The calculator on property detail pages cannot be edited.
  • Works with any page that allows custom HTML.

Table of Contents

  1. Get the Calculator Code
  2. Add the Calculator to a Page
  3. Add the Calculator to the Side Area
  4. Change the Interest Rate
  5. Best Practices
  6. Troubleshooting
  7. Frequently Asked Questions
  8. Need Help?
  9. Metadata and SEO

 


Get the Calculator Code

Use this block of code for your mortgage calculator.

<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


Add the Calculator to the Content of Your Page

  1. Open your website editor by adding /admin to the end of your website address (e.g. www.website.com/admin)
  2. Open the page you want to edit.
  3. Click the source code (<>) button.
  4. Paste the calculator code into the content area.
  5. Click Save.
  6. View the page to confirm the calculator appears and functions.

    Back to top


    Add the Calculator to the Side Area

    The side area of the page (often called the sidebar) is a common place to display the calculator.

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

    2. Open your Side Area or Sidebar settings.

    3. Add a new item.

    4. Set the item type to Custom Content.

    5. Click the source code (<>) button.

    6. Paste the calculator code.

    7. Save your changes.

    Back to top


    Change the Default Interest Rate

    You can set your own default interest rate by editing one value in the code.

    Quick Version: Change value="4.5" → Save

    1. Locate this in the code: <input type="text" name="annual_interest_rate" value="4.5">
    2. Replace the value "4.5" with your preferred starting rate
    3. Click Save

    Back to top


    Best Practices

    • Use the side area if you want the calculator visible on many pages.

    • Avoid stacking multiple calculators on the same page.

    • Include a short note reminding visitors that calculations are estimates.

    • Test the calculator on desktop and mobile after placing it.

    Back to top


    Troubleshooting

    The calculator isn’t showing up.

    • Make sure you pasted the code into the source code (<>) view.

    • Confirm the item type is set to Custom Content (side area only).

    The calculator looks distorted.

    • Check for missing brackets or formatting changes added by the editor.

    • Re-paste the original code if needed.

    The property page calculator doesn’t match.

    • The mortgage calculator on property detail pages cannot be edited or replaced.

    Back to top


    Frequently Asked Questions

    Can I change the design or colors?
    Not through the calculator code itself. A designer can update your stylesheet if needed.

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

    Does it calculate taxes or insurance?
    No. It provides loan-only estimates.

    Back to top


    Need Help?

    Call us at 844-311-4969 (Mon–Fri, 8 AM–8 PM CST)

    Email support@realgeeks.com

    Visit learn.realgeeks.com for free courses

    Join the Real Geeks Mastermind on Facebook for peer advice

    Back to top