Tutorial
How to Add a Mortgage Calculator to Squarespace
Add a working mortgage calculator to any Squarespace page in under 3 minutes. The widget loads inside an iframe and updates results as users type.
Before you start
Squarespace does not offer a free plan. The Personal plan ($16/month) allows Code Blocks. Business plan ($23/month) and Commerce plans also support Code Blocks. There is no restriction on iframes once you are on any paid plan.
Step-by-step
- 1
Open the Squarespace editor
Log in at squarespace.com, go to your site, and click Edit. Navigate to the page where the calculator goes (or click Pages in the left panel to add a new page).
- 2
Add a Code Block
Hover over the section where you want the calculator. Click the + Add Block button, or press / (slash) to open the block menu. Search "Code" and select Code Block. A black placeholder appears.
- 3
Paste the iframe
Click the pencil icon on the Code Block to open the editor. Delete the default placeholder content. Paste the embed code below. Do not switch to HTML mode — leave it in Code mode.
- 4
Apply and preview
Click Apply (or Save) in the block editor. The section preview now shows the calculator. Click the Eye icon (Preview) in the top bar to see the site as visitors see it.
- 5
Publish and mobile check
Click Save (top-left) to publish. Then open the site on your phone. Squarespace auto-stacks Code Blocks — the calculator should be full-width. If the bottom gets cut off, edit the Code Block and increase the iframe height to 1100.
The embed code
Copy this exactly. It works on Squarespace 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 a sidebar or narrow column, wrap the iframe in a div with max-width:400px. Increase height to 1100 for the stacked layout.
<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
Which Squarespace plan do I need?
Any paid plan (Personal $16/month and up) supports Code Blocks with iframes. There is no free plan. Personal is enough if you only need the calculator; Business and Commerce plans add extras like premium blocks and commerce features.
Does the calculator work with Squarespace 7.1 templates?
Yes. Code Blocks work identically in 7.0 and 7.1 templates. All templates support Code Blocks on paid plans.
Will the Code Block break my layout?
No. Code Blocks respect the section width and auto-fit the iframe. The calculator is responsive and will stack vertically on mobile widths without breaking the surrounding layout.
Can I add the calculator to a blog post?
Yes. In the blog post editor, click + Add Block in the body, choose Code Block, and paste the iframe. Blog posts support Code Blocks on all paid plans.
How do I make the calculator narrower for a sidebar?
Wrap the iframe in a div with a max-width style, or place the Code Block inside a narrow section. Set height to 1100 for the narrow layout. Squarespace does not auto-adjust height when width shrinks.
Can I remove the attribution footer?
No. The "Powered by CalcPier" link must remain visible. Cross-origin policy prevents hiding it via CSS, and cropping the iframe violates the widget terms.