Mortgage calculator for your website
Free to put on any site. Pick the colour, theme and fields you want, copy the snippet, and paste it wherever the calculator should appear. No account, no fee, no tracking, and nothing to maintain.
Accent colour
Optional rows
Loan amount, term and rate are always shown. Anything left off counts as zero, and any row a visitor leaves at zero is hidden from the results.
The real widget, running here with your settings.
How to install it
Copy the code above and paste it into your page where you want the calculator to show. It is ordinary HTML, so it goes wherever HTML goes.
WordPress
In the block editor, add a Custom HTML block and paste the code into it. In the classic editor, switch from Visual to Text first. For a sidebar, use a Custom HTML widget under Appearance, then Widgets. Some managed hosts strip script tags from posts written by non-administrator accounts, in which case paste it while signed in as an administrator.
Wix, Squarespace and Shopify
Wix: add an Embed HTML element and paste the code into the code panel. Squarespace: add a Code block and turn off Display Source. Shopify: paste it into a section or page written in the code editor rather than the rich text field, which removes scripts.
Plain HTML
Paste both lines into the body of the page. The script tag can sit next to the div or at the end of the document, and it only needs to appear once even if the page holds several calculators.
Settings you can change
Every option is a data attribute on the div, so the script itself never needs editing.
| Attribute | What it does | Example |
|---|---|---|
data-theme | Light or dark surface | dark |
data-accent | Colour of the totals, bar and link | #1d4ed8 |
data-currency | Symbol in front of every amount | £ |
data-title | Heading text, or empty for none | Repayments |
data-fields | Which rows appear | amount,term,rate,tax |
The widget renders inside a shadow root with its own stylesheet, so your site's CSS cannot reach in and break it, and your own rules are equally safe from ours. It caps itself at 420px wide and shrinks to fit anything narrower. To control where it sits, wrap the div in a container of your own.
Terms of use
By using this code you agree:
- The materials are provided as is, without warranty of any kind.
- Not to alter the calculation logic in the script.
- Not to remove the "powered by Calculator Castle" credit link.
- That copyright in the code belongs to calculatorcastle.com.
- Not to remove these terms from the standalone version.
Results are estimates for planning and carry no warranty. Neither you nor your visitors should treat the output as professional advice.
Common questions
Questions about the widget
Is the widget free?
Yes, on any site, including commercial ones. There is no fee, no account and no usage limit. The one condition is that the "powered by Calculator Castle" link stays visible.
Does it slow my page down?
The hosted script is 12 KB, around 4.5 KB compressed over the wire, and it loads with the async attribute so it never blocks rendering. It pulls in no libraries, no fonts and no images.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Every calculation happens in the browser of the person using it, which is why it needs no cookie banner of its own.
Can I change the colours to match my site?
Yes. Set data-accent to any hex colour, switch data-theme between light and dark, and change or remove the heading with data-title. The widget inherits nothing from your stylesheet, so it looks the same wherever it lands.
Can I put more than one on a page?
Yes. Every element with the cc-mortgage-calculator class becomes its own calculator with its own settings, and they do not interfere with each other.
Will it work on WordPress, Wix or Squarespace?
Yes, through any block or field that accepts raw HTML: a Custom HTML block in WordPress, an Embed element in Wix, a Code block in Squarespace. On plans that strip script tags, use the standalone version, and if that is blocked too, link to the calculator instead.
What formula does it use?
The standard amortizing payment: M = P × r / (1 − (1 + r)^−n), where r is the monthly rate and n is the number of months. On $300,000 over 30 years at 6% it returns $1,798.65 a month, $647,514.57 paid in total and $347,514.57 of interest.
What happens if you change the script?
The hosted version updates on your page automatically, and we keep the class name, the data attributes and the calculation stable. If you would rather freeze a version, copy the standalone build instead.
Results are estimates. Nobody should treat the output as a loan offer, and neither you nor your visitors should rely on it for a lending decision.
Looking for the full version with taxes, PMI, extra payments and an amortization schedule? That is the mortgage calculator on this site, and there are other widgets too.