Free Mortgage Calculator For Your Website

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Albert+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<div id="tmm-mpw">
<style>
#tmm-mpw { font-family:'Albert Sans',Arial,sans-serif; color:#2A2B2D; background:#FDF9F5; border:1px solid #E4DACC; max-width:400px; box-sizing:border-box; }
#tmm-mpw * { box-sizing:border-box; margin:0; }
#tmm-mpw .w-head { background:#313C30; padding:16px 20px; }
#tmm-mpw .w-head h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#FDF9F5; }
#tmm-mpw .w-body { padding:18px 20px 20px; }
#tmm-mpw .w-lab { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:12px; color:#313C30; margin:0 0 5px; }
#tmm-mpw .w-fld { margin-bottom:12px; }
#tmm-mpw .w-wrap { position:relative; }
#tmm-mpw .w-in, #tmm-mpw .w-sel { width:100%; border:1px solid #D3C7B8; background:#FFFFFF; padding:10px 12px; font-family:'Albert Sans',Arial,sans-serif; font-size:14px; color:#2A2B2D; }
#tmm-mpw .w-in:focus, #tmm-mpw .w-sel:focus { border-color:#313C30; outline:none; }
#tmm-mpw .w-in.dol { padding-left:24px; }
#tmm-mpw .w-in.pct { padding-right:26px; }
#tmm-mpw .w-ad { position:absolute; top:50%; transform:translateY(-50%); font-size:13px; color:#586A6A; }
#tmm-mpw .w-ad.l { left:11px; } #tmm-mpw .w-ad.r { right:11px; }
#tmm-mpw .w-row { display:flex; gap:10px; }
#tmm-mpw .w-row .w-fld { flex:1; }
#tmm-mpw .w-out { background:#F4EDE3; border:1px solid #E4DACC; padding:16px 18px; text-align:center; margin:4px 0 12px; }
#tmm-mpw .w-out .v { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; color:#313C30; }
#tmm-mpw .w-out .k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#586A6A; margin-top:2px; }
#tmm-mpw .w-sub { display:flex; justify-content:space-between; font-size:12.5px; color:#586A6A; padding:3px 2px; }
#tmm-mpw .w-sub b { font-family:'Space Grotesk',sans-serif; color:#313C30; }
#tmm-mpw .w-cta { display:block; text-align:center; background:#313C30; color:#FDF9F5 !important; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:13px 10px; margin-top:14px; }
#tmm-mpw .w-cta:hover { background:#10202B; }
#tmm-mpw .w-brand { text-align:center; font-size:11px; color:#586A6A; padding:12px 16px 4px; }
#tmm-mpw .w-brand a { color:#313C30; font-weight:600; text-decoration:none; }
#tmm-mpw .w-brand a:hover { text-decoration:underline; }
#tmm-mpw .w-fine { text-align:center; font-size:9.5px; line-height:1.5; color:#8a8378; padding:6px 16px 14px; }
</style>
<div class="w-head"><h3>Mortgage Payment Calculator</h3></div>
<div class="w-body">
  <div class="w-fld"><div class="w-lab">Home Price</div><div class="w-wrap"><input class="w-in dol" type="text" data-wk="price" value="350,000" inputmode="decimal"><span class="w-ad l">$</span></div></div>
  <div class="w-row">
    <div class="w-fld"><div class="w-lab">Down Payment</div><div class="w-wrap"><input class="w-in pct" type="text" data-wk="down" value="20" inputmode="decimal"><span class="w-ad r">%</span></div></div>
    <div class="w-fld"><div class="w-lab">Interest Rate</div><div class="w-wrap"><input class="w-in pct" type="text" data-wk="rate" value="7" inputmode="decimal"><span class="w-ad r">%</span></div></div>
  </div>
  <div class="w-fld"><div class="w-lab">Loan Term</div><select class="w-sel" data-wk="term"><option value="30" selected>30 years</option><option value="20">20 years</option><option value="15">15 years</option><option value="10">10 years</option></select></div>
  <div class="w-out"><div class="v" id="tmmMpwTotal">$0</div><div class="k">Est. Principal &amp; Interest / mo</div></div>
  <div class="w-sub"><span>Loan amount</span><b id="tmmMpwLoan">$0</b></div>
  <div class="w-sub"><span>Down payment</span><b id="tmmMpwDown">$0</b></div>
  <a class="w-cta" href="https://www.texasmademortgage.com/mortgage-calculators/mortgage-payment/" target="_blank" rel="noopener">See Full Payment Breakdown &rarr;</a>
</div>
<div class="w-brand">Powered by <a href="https://www.texasmademortgage.com/" target="_blank" rel="noopener">Texas Made Mortgage</a> &middot; Frisco, TX</div>
<div class="w-fine">Estimates only — not a loan offer or commitment to lend. Colton Chase NMLS #2040073 &middot; Texas Made Mortgage NMLS #2676326 &middot; Equal Housing Opportunity. All loans subject to credit approval.</div>
<script>
(function(){
var s=document.getElementById('tmm-mpw');
var n=function(k){ var el=s.querySelector('[data-wk="'+k+'"]'); var x=parseFloat(String(el?el.value:'').replace(/[^0-9.]/g,'')); return isNaN(x)?0:x; };
var f=function(x){ if(!isFinite(x))x=0; return '$'+Math.round(x).toLocaleString('en-US'); };
function calc(){
  var price=n('price'), dp=price*n('down')/100, P=Math.max(0,price-dp);
  var r=n('rate')/100/12, m=n('term')*12, pay=m<=0?0:(r===0?P/m:P*r/(1-Math.pow(1+r,-m)));
  document.getElementById('tmmMpwTotal').textContent=f(pay);
  document.getElementById('tmmMpwLoan').textContent=f(P);
  document.getElementById('tmmMpwDown').textContent=f(dp);
}
s.querySelectorAll('.w-in,.w-sel').forEach(function(el){ el.addEventListener(el.tagName==='SELECT'?'change':'input',calc); });
calc();
})();
</script>
</div>