Mortgage Payment Calculator Starter Kit 1.0.0

• Full-page mortgage payment calculator homepage.
• Optional embed.html page that contains the calculator, required assets, and an optional link back to the full site.
• Optional homepage embed-code panel for visitors, partners, or team members who should be able to copy the iframe code.
• Inputs for purchase price, down payment, financed fees, interest rate, amortization, payment frequency, property tax, insurance, HOA/condo fees, mortgage insurance, closing costs, extra principal, and optional income/debt details.
• Estimates for loan amount, principal and interest, recurring ownership costs, monthly equivalent, cash to close, payoff timing, total interest, interest saved, and optional payment-ratio snapshots.
• Readiness scoring across budget clarity, loan assumptions, property costs, cash to close, and next steps.
• Result bands, metric cards, category bars, top gaps, copy action, and text report download.
• Optional result form that posts calculator details to your HTTPS form endpoint.
• Responsive static template files with a customizer-selectable default theme, dark mode, and light mode.
• Privacy, terms, contact, robots, sitemap, manifest, service worker, app icons, and third-party notices.
• Customizer metadata for brand, domain, SEO text, colors, lead form settings, embed output, embed backlink, app details, optional code snippets, and optional ad placements.

Static website means the generated site is made from normal files: HTML, CSS, JavaScript, images, icons, robots.txt, sitemap.xml, and related assets. It does not need WordPress, a database, or a custom server app.

Mortgage payment means an estimate built from visible assumptions such as purchase price, down payment, loan amount, interest rate, amortization, taxes, insurance, HOA or condo fees, mortgage insurance, closing costs, and extra principal payments. It is a planning estimate, not lender approval.

Payment frequency controls how often payments are made. Standard weekly and bi-weekly estimates convert the monthly principal-and-interest payment. Accelerated weekly and accelerated bi-weekly estimates use one quarter or one half of the monthly payment, before any extra principal.

Embeddable output means the generated ZIP can include an embed.html page that removes the full homepage frame and leaves the interactive calculator for iframe embeds or focused landing-page sections. It can also show a small link back to your canonical homepage.

Lead form action URL is the HTTPS endpoint from your form provider, CRM, or static-form service. The template does not include a backend of its own.

The customizer reads the template package in your browser and builds the form from the included metadata. Enter your brand name, short mark, domain, contact method, SEO title, description, calculator copy, default theme, theme colors, app name, cache prefix, and lead form settings.

The embed page toggle is on by default. Leave it enabled if you want embed.html in the generated ZIP. Turn it off when you only need the full-page site. The embed backlink toggle is also on by default and adds a small link from embed.html to your canonical homepage.

The public embed-code toggle is off by default. Enable it only when the full homepage should show a public panel with an embed link, iframe code, and copy buttons. This panel does not create embed.html; the tool-only embed page toggle does that.

The selected default theme and accent colors are used by both the full pages and embed.html, so embedded placements keep the same visual identity as the main site.

Optional code and ad fields are disabled by default. Enable only the spots you need, paste complete script, style, meta, or ad tags, and leave everything else off so no empty ad containers appear in the generated site.

Lead capture is optional. When enabled, the generated form posts the visitor's name, email, message, readiness score, estimated monthly payment, and calculator report to your configured HTTPS endpoint.

• Use a real form endpoint from your form provider, CRM, or static-form service.
• Use POST unless your provider explicitly requires GET.
• Review the consent text so it matches your follow-up process.
• Update privacy.html to describe the services you actually use.
• Submit a live test after the generated site is hosted.

The tool-only page is designed for embedding. It removes the homepage hero, navigation, support sections, FAQ, and footer so only the calculator experience remains.

The embed page uses the same default theme and accent tokens as the full site. Preview it in a narrow iframe or sidebar-sized viewport if you plan to embed it inside a CMS block, blog post, or partner page.

If the embed backlink option is enabled, embed.html shows a small branded link below the calculator that opens your canonical homepage in a new tab. Turn that option off when the host page already provides enough attribution or when you need the cleanest possible iframe.

Common iframe pattern:

<iframe
  src="https://example.com/embed.html"
  title="Mortgage Payment Calculator"
  loading="lazy"
  style="width:100%;min-height:920px;border:0;"></iframe>

For an iframe to work, the page at embed.html must be served by a host that allows framing. Some hosts, CDNs, and site builders send X-Frame-Options or Content-Security-Policy with a restrictive frame-ancestors rule. If the iframe is blocked, update those host settings, allow the domain that will embed the tool, or use a host that permits iframe embeds.

The default formula estimates a fixed-rate principal-and-interest payment from loan amount, annual rate, and amortization length. Taxes, insurance, mortgage insurance, HOA or condo fees, and extra principal are shown separately so the visitor can see what is included.

The optional income/debt fields produce planning ratios only. They are not underwriting rules, lender approval, or advice. Exact qualification rules depend on lender, product, jurisdiction, credit profile, documentation, and current policy.

Payment-frequency and accelerated-payment estimates are useful for scenario comparison, but lenders may calculate interest, compounding, escrow, fees, prepayment privileges, and payment schedules differently. Always compare against real loan documents.

• Open the generated homepage directly for a quick content and layout review.
• Open embed.html and confirm the stripped tool-only output is present if you enabled it.
• If you enabled the public embed-code panel, copy the iframe code from the homepage and test it inside the actual page builder, CMS, or partner site where it will be embedded.
• Check privacy.html, terms.html, and contact.html for your actual contact wording and service providers.
• Open manifest.webmanifest and confirm the app name is correct.
• Open sitemap.xml and robots.txt and confirm the public domain is correct.
• Search the generated files for {{. There should be no placeholder tokens left.
• If you added lead capture, analytics, ads, or custom scripts, test the live hosted page and confirm those providers load as expected.
• Check dark mode, light mode, mobile width, keyboard focus, result actions, and link text before publishing.

This calculator does not approve loans, verify income, quote a lender rate, guarantee closing costs, guarantee taxes or insurance, replace a Loan Estimate, check credit, inspect a property, verify condo/HOA fees, replace tax/legal/insurance/financial advice, or prove that a property is affordable.

Rates, rules, taxes, insurance premiums, lender fees, mortgage-insurance rules, qualification standards, and property costs change over time. Review your own claims, provider requirements, and legal obligations before publishing.

The starter kit code, original template content, and original visual assets are licensed under the included LICENSE file. Bundled third-party assets keep their own licenses.

Keep THIRD-PARTY-NOTICES.txt with the starter kit and with generated websites. It documents bundled fonts and any data assets used by the calculator.

This is a static website. You do not need WordPress, a database, or a server app. Upload the generated website files to your public web folder, often called public_html.

These files should be at the site root after upload:

• index.html
• embed.html, if enabled
• privacy.html
• terms.html
• contact.html
• manifest.webmanifest
• robots.txt
• sitemap.xml
• service-worker.js
• assets/

Hostinger is the recommended host for this starter kit because it is straightforward for small static websites and beginner-friendly launches.

Affiliate disclosure: the Hostinger link is an affiliate link. A commission may be earned if you buy through it. You can use coupon code MILLIONDOLLARS for the current discount available through that link.

Open Hostinger

Custom setup, customization, deployment, or expansion work is available through Ryan Rhode.