Mortgage Calculator
Give your real estate or mortgage website a valuable tool that keeps visitors engaged. This calculator lets potential buyers calculate monthly payments including principal, interest, taxes, insurance, PMI, and HOA fees. They can compare different down payments, loan terms, and see how much house they can afford. When visitors spend time using your calculator, they're more likely to reach out for your services. Capture their information and convert them into clients.
Try the Calculator
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
export function mortgageCalculator(form: FormTs) {
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'Mortgage Payment Calculator',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Loan Details Section
const loanSection = form.addSubform('loan', { title: '💵 Loan Details' });
loanSection.addRow(row => {
row.addMoney('homePrice', {
label: 'Home Price',
currency: '$',
min: 50000,
max: 10000000,
defaultValue: 350000,
isRequired: true
}, '1fr');
row.addMoney('downPayment', {
label: 'Down Payment',
currency: '$',
min: 0,
max: () => loanSection.money('homePrice')?.value() || 0,
defaultValue: 70000,
isRequired: true
}, '1fr');
});
loanSection.addRow(row => {
row.addPriceDisplay('downPaymentPercent', {
label: 'Down Payment Percentage',
computedValue: () => {
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
return (downPayment / homePrice) * 100;
},
currency: '',
suffix: '%',
decimals: 1,
variant: 'default'
}, '1fr');
row.addPriceDisplay('loanAmount', {
label: 'Loan Amount',
computedValue: () => {
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
return homePrice - downPayment;
},
variant: 'highlight'
}, '1fr');
});
// Interest & Term Section
const termsSection = form.addSubform('terms', { title: '📊 Interest & Loan Term' });
termsSection.addRow(row => {
row.addDecimal('interestRate', {
label: 'Interest Rate (Annual %)',
min: 0.1,
max: 20,
step: 0.125,
defaultValue: 6.5,
isRequired: true
}, '1fr');
row.addDropdown('loanTerm', {
label: 'Loan Term',
options: [
{ id: '10', name: '10 Years' },
{ id: '15', name: '15 Years' },
{ id: '20', name: '20 Years' },
{ id: '25', name: '25 Years' },
{ id: '30', name: '30 Years' }
],
defaultValue: '30',
isRequired: true
}, '1fr');
});
termsSection.addRow(row => {
row.addRadioButton('loanType', {
label: 'Loan Type',
options: [
{ id: 'fixed', name: 'Fixed Rate' },
{ id: 'arm', name: 'Adjustable Rate (ARM)' }
],
defaultValue: 'fixed',
orientation: 'horizontal'
});
});
// Additional Costs Section
const additionalSection = form.addSubform('additional', { title: '📝 Additional Monthly Costs' });
additionalSection.addRow(row => {
row.addMoney('propertyTax', {
label: 'Property Tax (Annual)',
currency: '$',
min: 0,
max: 100000,
defaultValue: 4200,
placeholder: 'Annual property tax'
}, '1fr');
row.addMoney('homeInsurance', {
label: 'Home Insurance (Annual)',
currency: '$',
min: 0,
max: 50000,
defaultValue: 1800,
placeholder: 'Annual insurance premium'
}, '1fr');
});
additionalSection.addRow(row => {
row.addMoney('pmi', {
label: 'PMI (Monthly)',
currency: '$',
min: 0,
max: 1000,
defaultValue: 0,
placeholder: 'Private Mortgage Insurance',
computedValue: () => {
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
const downPaymentPercent = (downPayment / homePrice) * 100;
if (downPaymentPercent >= 20) return 0;
const loanAmount = homePrice - downPayment;
return Math.round(loanAmount * 0.007 / 12);
}
}, '1fr');
row.addMoney('hoaFees', {
label: 'HOA Fees (Monthly)',
currency: '$',
min: 0,
max: 2000,
defaultValue: 0,
placeholder: 'Homeowners association'
}, '1fr');
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Results Section
const resultsSection = form.addSubform('results', { title: '💳 Your Monthly Payment', isCollapsible: false });
// Helper function for mortgage calculation (PMT formula)
const calculateMonthlyPayment = () => {
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
const principal = homePrice - downPayment;
const annualRate = (termsSection.decimal('interestRate')?.value() || 6.5) / 100;
const monthlyRate = annualRate / 12;
const termYears = parseInt(termsSection.dropdown('loanTerm')?.value() || '30');
const numPayments = termYears * 12;
if (monthlyRate === 0) return principal / numPayments;
const payment = principal *
(monthlyRate * Math.pow(1 + monthlyRate, numPayments)) /
(Math.pow(1 + monthlyRate, numPayments) - 1);
return payment;
};
resultsSection.addRow(row => {
row.addPriceDisplay('principalInterest', {
label: 'Principal & Interest',
computedValue: () => Math.round(calculateMonthlyPayment()),
variant: 'default'
}, '1fr');
row.addPriceDisplay('monthlyTax', {
label: 'Property Tax',
computedValue: () => {
const annualTax = additionalSection.money('propertyTax')?.value() || 0;
return Math.round(annualTax / 12);
},
variant: 'default',
suffix: '/mo'
}, '1fr');
});
resultsSection.addRow(row => {
row.addPriceDisplay('monthlyInsurance', {
label: 'Home Insurance',
computedValue: () => {
const annualInsurance = additionalSection.money('homeInsurance')?.value() || 0;
return Math.round(annualInsurance / 12);
},
variant: 'default',
suffix: '/mo'
}, '1fr');
row.addPriceDisplay('monthlyPmiHoa', {
label: 'PMI + HOA',
computedValue: () => {
const pmi = additionalSection.money('pmi')?.value() || 0;
const hoa = additionalSection.money('hoaFees')?.value() || 0;
return Math.round(pmi + hoa);
},
variant: 'default',
suffix: '/mo'
}, '1fr');
});
// Loan Summary Section
const summarySection = form.addSubform('summary', { title: '📈 Loan Summary', isCollapsible: false });
summarySection.addRow(row => {
row.addPriceDisplay('totalPrincipal', {
label: 'Total Principal',
computedValue: () => {
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
return homePrice - downPayment;
},
variant: 'default'
}, '1fr');
row.addPriceDisplay('totalInterest', {
label: 'Total Interest Paid',
computedValue: () => {
const monthlyPayment = calculateMonthlyPayment();
const termYears = parseInt(termsSection.dropdown('loanTerm')?.value() || '30');
const totalPayments = monthlyPayment * termYears * 12;
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
const principal = homePrice - downPayment;
return Math.round(totalPayments - principal);
},
variant: 'default'
}, '1fr');
});
summarySection.addRow(row => {
row.addPriceDisplay('totalCost', {
label: 'Total of All Payments',
computedValue: () => {
const monthlyPayment = calculateMonthlyPayment();
const termYears = parseInt(termsSection.dropdown('loanTerm')?.value() || '30');
return Math.round(monthlyPayment * termYears * 12);
},
variant: 'highlight'
}, '1fr');
row.addTextPanel('payoffDate', {
label: 'Payoff Date',
computedValue: () => {
const termYears = parseInt(termsSection.dropdown('loanTerm')?.value() || '30');
const payoffYear = new Date().getFullYear() + termYears;
const payoffMonth = new Date().toLocaleString('default', { month: 'long' });
return `${payoffMonth} ${payoffYear}`;
},
customStyles: { 'font-weight': '500', 'color': '#059669' }
}, '1fr');
});
// PMI Warning
summarySection.addRow(row => {
row.addTextPanel('pmiWarning', {
computedValue: () => {
const homePrice = loanSection.money('homePrice')?.value() || 350000;
const downPayment = loanSection.money('downPayment')?.value() || 0;
const downPaymentPercent = (downPayment / homePrice) * 100;
if (downPaymentPercent < 20) {
return `Tip: Increase your down payment to ${Math.ceil(homePrice * 0.2).toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })} (20%) to avoid PMI.`;
}
return 'Great! With 20%+ down payment, you avoid PMI.';
},
customStyles: { 'font-size': '0.9rem', 'color': '#64748b', 'background': '#f8fafc', 'padding': '12px', 'border-radius': '6px' }
});
});
const finalSection = form.addSubform('final', {
title: '🧾 Summary',
isCollapsible: false,
sticky: 'bottom'
});
finalSection.addRow(row => {
row.addPriceDisplay('totalMonthly', {
label: 'Total Monthly Payment',
computedValue: () => {
const pi = calculateMonthlyPayment();
const tax = (additionalSection.money('propertyTax')?.value() || 0) / 12;
const insurance = (additionalSection.money('homeInsurance')?.value() || 0) / 12;
const pmi = additionalSection.money('pmi')?.value() || 0;
const hoa = additionalSection.money('hoaFees')?.value() || 0;
return Math.round(pi + tax + insurance + pmi + hoa);
},
variant: 'large',
suffix: '/month'
});
});
finalSection.addRow(row => {
row.addTextPanel('payoffInfo', {
computedValue: () => {
const termYears = parseInt(termsSection.dropdown('loanTerm')?.value() || '30');
const payoffYear = new Date().getFullYear() + termYears;
return `Payoff: ${payoffYear}`;
},
customStyles: { 'font-size': '0.85rem', 'color': '#64748b', 'font-style': 'italic' }
});
});
form.configureSubmitButton({
label: 'Get Pre-Approved',
isVisible: false
});
}
Frequently Asked Questions
Can I customize the default values for my local market?
Yes. You can set default home prices, down payment amounts, interest rates, property tax rates, and insurance costs to match your local market, making the calculator immediately relevant to your visitors.
How can this help me generate mortgage or real estate leads?
Visitors using financial calculators are actively researching purchases. Add a 'Get Pre-Approved' or 'Schedule Consultation' button that collects their contact information. These are high-intent leads who are ready to talk.
Can I remove or hide certain fields?
Absolutely. If you don't want to show PMI calculations or HOA fees, you can hide those fields. You can simplify the calculator for quick estimates or keep all details for sophisticated buyers.
Can I embed this on individual property listings?
Yes. You can pre-fill the home price for each listing, so visitors see the monthly payment for that specific property immediately. This works great on MLS integrations and property detail pages.
Does it work with my real estate CRM?
Yes. You can connect the calculator to popular real estate CRMs like Follow Up Boss, LionDesk, or any system that accepts webhooks. Lead data flows directly into your sales pipeline.