Free Mortgage Calculator Widget

Feel free to embed this mortgage calculator widget into any of your web pages by copying and pasting the provided code. It will automatically adjust to fit your page.

Embedding This Mortgage Calculator Widget

Embed This Calculator on Your Website (copy & paste):


Linking to This Mortgage CALC Widget

Link to Widget Page (copy & paste):

Linking to this mortgage loan payment calculator widget is so simple anyone can do it. All you need to do is click in the box above, copy the text and add it to any website, web page, or blog post by pasting it into your html code. Otherwise, just copy the link in your browser's address bar and add it to the appropriate form field in your content management system. Let us know when you do, then we'll share your web site on social media!

Have you ever wanted to let your customers estimate the costs of buying a home on your own website or blog? Well now you can! Here’s a free mortgage calculator widget that you can easily put on any of your web site’s pages. It makes it easy for home buyers to calculate their monthly mortgage payments and interest without having to ever leave your website!

Simply copy the embed code provided and paste it into your blog posts, web pages, articles, or sidebar, and it will automatically adjust to fit your content. However, you may want to make a few simple edits to make it look the best.

Styling Tips – (HTML/CSS)

If you want to change the way the mortgage calculator displays on your page, you can make design edits using HTML and CSS. Here are some simple styling tips:

Most of your editing can be done by adding CSS styling to this div tag:

<div id="mort_calc_cont">

By adding some simple styling elements, you will be able to change the calculator’s layout and display position to best fit on your page.

Changing the Calculator’s Width

If you want to make the calculator thinner, simply use code similar to this:

<div id="mort_calc_cont" style="width: 500px;">

Change 500 to the width you want it to display, down to 250px – below that may look garbled.

Move it Right or Left Using Float

If you’re adding the calculator to a blog post or other article and want to include text to the left of it, you can use the ‘float’ property.

<div id="mort_calc_cont" style="width: 300px; float: right;">

Moving it Using Margins

If you want to move the calculator right, left, up or down, but don’t want the text to wrap around it, then we recommend using margin properties.

<div style="width: 500px; margin-left: 25px;">

Centering with Margins

You can center the calculator on your page by using auto-width margins.

<div style="width: 500px; margin: 0px auto;">

Fully Coded Example

Here’s what a fully coded example might look:

<script src="https://www.aprfinder.com/mort-calc.js"></script>
<div id="mort_calc_cont" style="width: 300px; margin-top: 30px; margin-left 25px;">
<p class="credit_details">
<a href="https://www.aprfinder.com/mortgage-payment-calculator" target="_blank">
Mortgage Calculator</a> courtesy of <a href="https://www.aprfinder.com" target="_blank">
APRfinder.com</a></p></div>

Just copy and paste the above embed code to try it out for yourself!

Bugs, Technical Issues, Help

This is version 2 of our mortgage payment calculator and widget. If you are having trouble with either or would like help getting it to display correctly on your page, feel free to send us a message using our contact form. We typically respond within one business day.