Tutorial
How to Add a Mortgage Calculator to Webflow
Add a working mortgage calculator to any Webflow page in under 3 minutes. The widget loads inside an iframe and updates results as users type.
Before you start
Webflow does not offer a free plan for publishing. The Basic plan ($14/month per site) and CMS/Business plans all support Custom Code Embeds. Webflow has a strict content security policy that may require whitelisting calcpier.com in Site Settings.
Step-by-step
- 1
Open the Webflow Designer
Log in at webflow.com, open your project, and click the Designer icon. The visual editor opens with the page navigator on the left.
- 2
Add a Custom Code Embed element
In the left panel, click the + Add Elements button (top-left of the canvas). Scroll to Components > Custom Code. Drag the Custom Code element onto the canvas where the calculator goes.
- 3
Paste the iframe
Click the Settings icon (gear) on the Custom Code element. Paste the embed code below into the code field. Click Save. The element now renders the calculator in the Designer preview.
- 4
Resize with the style panel
Select the Custom Code element. In the right Style panel, set Width to 100% and Height to 900px (or 1100px for narrow). Webflow respects element dimensions, not iframe HTML dimensions.
- 5
Publish and verify mobile
Click Publish (top-right). Select your domain and click Publish to Selected Domains. Open the live site on mobile to verify the calculator fits at 375px width.
The embed code
Copy this exactly. It works on Webflow and every other supported platform.
<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="900" style="border:0;border-radius:12px;max-width:900px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>Sidebar or narrow layout
For sidebar placement, set Width to 400px and Height to 1100px on Desktop. Adjust per breakpoint in the Style panel.
<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="1100" style="border:0;border-radius:12px;max-width:400px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>Frequently asked questions
Does Webflow allow iframes to external sites?
Yes, but Webflow applies a Content Security Policy (CSP) by default. If the iframe does not load, go to Site Settings > Custom Code and add calcpier.com to the Content Security Policy whitelist (frame-src directive). This is required for some Webflow accounts.
Is the calculator free for commercial Webflow sites?
Yes. Free for any plan. The only requirement is that the attribution link at the bottom of the widget stays visible.
Can I add the calculator to a Webflow CMS item page?
Yes. Custom Code elements work inside Collection Pages (CMS-driven templates). The same iframe works on every CMS-generated page.
How do I make the calculator responsive?
Set Width to 100% and Height to 900px on Desktop breakpoint. Then in the Tablet and Mobile breakpoints, increase Height to 1100px. Webflow applies different values per breakpoint.
Will the calculator affect my Webflow Lighthouse score?
No. The iframe uses loading="lazy", so it does not block initial page render. Webflow Lighthouse scores typically stay unchanged or improve slightly (iframe content is isolated from main page).
Can I remove the attribution footer?
No. The "Powered by CalcPier" link must remain visible. Webflow cannot override iframe content because of cross-origin isolation.