Mortgage Calculator Script - Free Mortgage Calculator Widget

Home Value: $

Loan amount: $

Interest rate: %

Loan term: years

Start date:

Property tax: $/yr

PMI: %

Output parameters »

Free Mortgage Calculators

Javascript Calculator Widget

Mortgage Rates Widgets

Place our free mortgage calculator (example to the right) on your sites using any of the following formats. We offer static text links, images, and fully functional calculators that you can embed in your website - including raw HTML, Javascript, and Wordpress Widgets.

Pick the style you would like below
Click "Copy to Clipboard"
Find a location to put it in your website's source code
Hit Control+V to paste the code
Save your page and upload it to your server
Visit your page and verify it works!

All link codes are designed to open in a new window, so your customers do not have to leave your site to use these value added tools.

Fully Functional Mortgage Calculator (Example to the Right)

Insert the code in the box below into your website.

All calculators on this page are widgets which can be placed in a website's sidebar. We also offer a
full page JavaScript mortgage calculator offering interactive graphs and featuring responsive design.

Javascript Mortgage Calculator Widget

									Cut and paste the following code to install this fully functional mortgage calculator on your website. You can change the background color of the calculator by changing the background-color:#F4F7F9; setting in the opening P element to whatever color you like.
 
									<div style="width:170px; text-align:center;"><p style="background-color:#F4F7F9;"><a href="https://www.mortgagecalculator.org/" target="_blank"><img src="https://www.mortgagecalculator.org/free-tools/calculator/mortgage-calculator-logo.png" alt="MortgageCalculator.org."></a><br><iframe src="https://www.mortgagecalculator.org/free-tools/calculator/caller.html" frameborder="0" width="170px" height="400" scrolling="no"></iframe><br><a href="https://www.mortgagecalculator.org/free-tools/"><font color="#000000">www.MortgageCalculator.org</font></a></p></div>

text link

Insert the following code in your web page.
Mortgage Calculator

Calculator Image

Mini Logo

Full Size Logo

Full HTML

This code is similar to the code at the top of the page, however it uses straight HTML rather than an iframe, so you can customize it to remove variables or design it to match the rest of your site design.

<div align="center">
<form method="post" action="https://www.mortgagecalculator.org" target="_blank">
<input type="hidden" name="param[action]" value="calculate">
<input type="hidden" name="mortgage-calculator-plus" value="2b0b2e2f885a8e63c88ab2efb3775a11">
<table cellpadding="0" cellspacing="0"><tr><td id="params" valign="top">
<table cellpadding="3" cellspacing="0" width="100%">
<tr><th colspan="2" align="center">
</th></tr>
<tr><td align="right">Home Value:</td><td><input type="number" name="param[homevalue]" value="300000" size="10"> $</td></tr> 
<tr><td align="right">Loan amount:</td><td><input type="number" name="param[principal]" value="250000" size="10"> $</td></tr>
<tr><td align="right">Interest rate:</td><td><input type="number" name="param[interest_rate]" value="5.0" size="4"> %</td></tr>
<tr><td align="right">Loan term:</td><td><input type="number" name="param[term]" value="30" size="4"> years</td></tr>
<tr><td align="right">Start date:</td><td><select name="param[start_month]" id="p_start_month">
<option label="Jan" value="1">Jan</option>
<option label="Feb" value="2">Feb</option>
<option label="Mar" value="3">Mar</option>
<option label="Apr" value="4">Apr</option>
<option label="May" value="5">May</option>
<option label="Jun" value="6">Jun</option>
<option label="Jul" value="7">Jul</option>
<option label="Aug" value="8">Aug</option>
<option label="Sep" value="9">Sep</option>
<option label="Oct" value="10">Oct</option>
<option label="Nov" value="11">Nov</option>
<option label="Dec" value="12">Dec</option>
</select>
<select name="param[start_year]" id="p_start_year">
<option label="2018" value="2018">2018</option>
<option label="2019" value="2019">2019</option>
<option label="2020" value="2020">2020</option>
<option label="2021" value="2021">2021</option>
<option label="2022" value="2022">2022</option>
<option label="2023" value="2023">2023</option>
<option label="2024" value="2024">2024</option>
<option label="2025" value="2025">2025</option>
<option label="2026" value="2026">2026</option>
<option label="2027" value="2027">2027</option>
<option label="2028" value="2028">2028</option>
<option label="2029" value="2029">2029</option>
<option label="2030" value="2030">2030</option>
<option value="2031" label="2031">2031</option>
<option value="2032" label="2032">2032</option>
</select>
</td></tr>
<script>
	var timestamp = new Date();
	try {
		document.getElementById("p_start_month").selectedIndex = +timestamp.getMonth();
		document.getElementById("p_start_year").selectedIndex = +timestamp.getFullYear() - 2018;
	} catch (_) {
	}
</script>
<tr><td align="right">Property tax:</td><td><input type="number" step="any" name="param[property_tax]" value="1.25" size="4"> %</td></tr>
<tr><td align="right">PMI:</td><td><input type="number" step="any" name="param[pmi]" value="0.5" size="4"> %</td></tr>
<tr><td colspan="2" align="center" id="calculate_btn"><input type="submit" value="Calculate"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" id="output_params">
<tr><th colspan="2" align="center"><a href="#" onclick="elems = new Array('draw_charts', 'show_m_vs_w', 'show_annual', 'show_monthly'); for(i in elems) document.getElementById(elems[i]).style.display = (document.getElementById(elems[i]).style.display == 'none') ? '' : 'none'; document.getElementById('outArrow').innerText = (document.getElementById('outArrow').innerText == '»') ? '«' : '»'; return false;" style="text-decoration:none; color:#000000 ">Output parameters <span id="outArrow">»</span></a></th></tr>
<tr style="display: none" id="draw_charts"><td width="10"><input type="checkbox" name="param[draw_charts]" value="1" checked="checked"></td><td><label for="draw_charts">Draw charts</label></td></tr>
<tr style="display: none" id="show_m_vs_w"><td width="10"><input type="checkbox" name="param[show_m_vs_w]" value="1" checked="checked"></td><td><label for="show_m_vs_w">Monthly vs bi-weekly payments</label></td></tr>
<tr style="display: none" id="show_annual"><td width="10"><input type="checkbox" name="param[show_annual]" value="1"></td><td><label for="show_annual">Show annual amortization table</label></td></tr>
<tr style="display: none" id="show_monthly"><td width="10"><input type="checkbox" name="param[show_monthly]" value="1"></td><td><label for="show_monthly">Show monthly amortization table</label></td></tr>
<tr>
</tr>
</table>
</td></tr>
</table></form>
</div>
<p><font size="1"><a href="https://www.mortgagecalculator.org/free-tools/" >Free Mortgage Calculators</a></font></p>
</div>

Wordpress Widget Plug in

Publish a Wordpress blog? Install this free gadget today.

Image of an installed copy of this Wordpress widget plug in (you can test it out before installing it by checking out our blog