Last updated: May 2026
Squarespace is one of the most popular website platforms for Australian tradies and small business owners — and for good reason. It looks great out of the box, it's easy to manage, and it doesn't require a developer. But if you've ever tried to add a proper quote calculator to your Squarespace site, you've probably hit a wall. There's no native quote calculator widget. The built-in forms are basic. And if you've tried embedding a third-party tool, you may have run into blank code blocks, mobile layout issues, or scripts that simply refuse to load.
This guide walks you through exactly how to add a Leadkit quote calculator to your Squarespace site — step by step, for both the Fluid Engine and Classic Editor. Leadkit uses a Shadow DOM embed approach rather than a traditional iframe, which sidesteps most of the common embedding pitfalls you'll find with other calculator tools on Squarespace. The whole setup takes under 60 seconds once you have your embed code.
Whether you're a plumber, painter, builder, or any other trade business, a quote calculator on your site does one thing that contact forms can't: it gives visitors an instant estimate, which keeps them engaged and converts them into leads. Let's get into it.
What You Need Before You Start
Before touching your Squarespace site, make sure you have the following ready:
- A Leadkit account — Sign up free at leadkit.com.au/calculators. You don't need a credit card to start. The free plan includes up to 5 calculators and unlimited lead capture.
- Your embed code — Once you've set up your calculator inside Leadkit, you'll get a single line of HTML to paste into your site. Copy this to your clipboard.
- A Squarespace Business plan or higher — Squarespace requires a Business, Commerce Basic, or Commerce Advanced plan to use custom code blocks. The Personal plan does not support code embeds.
- Your Squarespace login — You'll be editing pages directly in the Squarespace editor, so make sure you're logged into the account that manages your site.
That's it. No developer needed.
Step-by-Step: Adding the Calculator in Fluid Engine (Squarespace 7.1)
If your site was built or updated after 2020, you're almost certainly using Squarespace's Fluid Engine — the drag-and-drop block editor used in version 7.1. Here's how to add your Leadkit calculator:
Log in to your Squarespace account and navigate to the page where you want the calculator to appear (for example, your "Get a Quote" page or your homepage).
Click Edit in the top-left corner of the page to open the Fluid Engine editor.
Click the + (plus) icon in the section where you want the calculator. A panel will appear showing all available block types.
Select "Code" from the list of block types. This inserts a Code Block into your page layout.
Paste your Leadkit embed code into the code editor. Your embed code will look like a single
<script>tag or a short HTML snippet — paste it exactly as copied from your Leadkit dashboard.Make sure "Display Source" is unchecked. If this option is ticked, Squarespace will display the raw code text on your page instead of rendering it. Untick it.
Click outside the code block or press Apply to save the block.
Do not judge by the editor preview. This is important: Squarespace disables JavaScript in preview mode for security reasons. Your calculator will appear blank in the editor — that is completely normal and expected.
Click Save, then click Done to exit the editor.
Open your live page in a new browser tab (not the preview within the editor — the actual published URL) and confirm the calculator loads correctly.
That's the full process. If the calculator is showing on the live page, you're done.
Step-by-Step: Adding the Calculator in Classic Editor (Squarespace 7.0)
If your site is running an older template — Bedford, Pacific, Forte, or any of the classic Squarespace themes — you're likely on version 7.0 with the Classic Editor. The process is slightly different:
Log in and navigate to the page where you want the calculator.
Hover over the page content area until you see the grey edit pencil icon, then click it to enter edit mode.
Click the Insert Point (the horizontal line that appears between blocks when you hover) where you want the calculator placed.
Click "Code" from the block type menu that appears. This inserts a Code Block.
Paste your Leadkit embed code directly into the code block.
Confirm "Display Source" is unchecked (same as Fluid Engine — if this is ticked, you'll see raw code instead of the calculator).
Click Apply to save the block, then Save Draft or Publish the page.
Open your live page URL in a separate browser tab to verify the calculator is rendering.
One important note for Classic Editor users: if your site has Ajax Loading enabled (found under Design > Style Editor > Site: Loading), this can cause the embed script to fail when navigating between pages. You may need to either disable Ajax Loading or ask your developer to add a script reload workaround. Disabling Ajax Loading is usually the simpler fix.
Checking Mobile Responsiveness
Squarespace themes are responsive by default, and Leadkit calculators are built to adapt to any screen width. However, it's worth verifying the mobile experience before you call it done.
How to preview on mobile in Squarespace:
- In the editor, click the mobile icon (phone icon) in the top bar — this switches the editor to a mobile preview view.
- In Fluid Engine, you can also toggle to the Mobile Layout view to reposition blocks specifically for mobile screens.
What to look for:
- The calculator should fill the full width of its container without horizontal scroll.
- All form fields and the submit button should be easily tappable.
- The total/estimate output should be visible without needing to zoom.
If the calculator appears cut off on mobile, the most common cause is that the Code Block has been placed inside a narrow column. Try moving it to a full-width section. In Fluid Engine, you can stretch a section to 100% width by clicking on the section background and adjusting the column settings.
Common Issues and Fixes
The code block is showing nothing in the editor This is normal. Squarespace intentionally disables JavaScript in the page editor for security. Always check the live published URL, not the editor preview. If it's also blank on the live page, double-check that you've saved and published the page (not just the block).
The calculator loads but is cut off on the right side The embed is probably inside a narrow column layout. Move the Code Block to a full-width section, or expand the column to span the full page width.
Scripts are loading on refresh but not when navigating to the page This is an Ajax Loading issue (more common in Classic Editor). Go to Design > Style Editor > Site: Loading and disable "Enable Ajax Loading." This forces a full page load each time, which ensures the script fires correctly.
Mixed content warning / calculator not loading on live site This happens when an embed tries to load content over HTTP rather than HTTPS. Leadkit serves all content over HTTPS, so this shouldn't be an issue with Leadkit embeds. If you're seeing this, check whether your Squarespace domain has SSL enabled (Settings > Domains > SSL).
The code block shows raw code text instead of the calculator You have "Display Source" checked. Edit the Code Block, uncheck "Display Source," and save again.
Why Use Leadkit Instead of Squarespace's Built-In Forms?
Squarespace's native form blocks are fine for simple contact forms — name, email, message, submit. But they can't give a visitor an instant price estimate. They don't calculate anything. They don't show a live cost breakdown. And they don't create the "wow" moment that makes a visitor decide to get in touch instead of bouncing.
Here's how Leadkit compares:
| Feature | Squarespace Forms | Leadkit Calculator |
|---|---|---|
| Instant price estimate | No | Yes |
| Lead capture (name, email, phone) | Yes | Yes |
| PDF estimate to customer inbox | No | Yes |
| CRM / lead dashboard | No | Yes |
| Works inside Squarespace | Basic embed | Full Shadow DOM embed |
| Trade-specific templates | No | 112+ categories |
The Shadow DOM approach Leadkit uses is worth explaining briefly. Traditional iframe embeds — which many calculator tools use — can cause layout issues on Squarespace because the platform sandboxes external iframes differently depending on the theme. Leadkit's embed uses a Shadow DOM component that lives directly in your page's DOM, not inside a separate frame. This means it inherits your page's width constraints correctly, avoids cross-origin script loading issues, and auto-adjusts height without any JavaScript tricks required on your end.
If you're comparing website builders for your trade business, this kind of flexibility matters. See our comparison of the best website builders for tradies in Australia for more on how Squarespace stacks up against WordPress, Wix, and others.
Free vs Pro: What Do You Get?
Leadkit has a genuinely useful free tier — it's not a crippled trial.
Free plan includes:
- Up to 5 quote calculators
- Unlimited lead capture
- PDF estimates sent to your inbox
- Basic lead dashboard
- Works on Squarespace, WordPress, Wix, Webflow, and custom sites
Pro plan ($29/month) adds:
- Unlimited calculators across every trade category
- White-label branding (your logo, your colours)
- Custom lead statuses and pipeline management
- Team roles and access controls
- Advanced analytics
Agency plan ($150/month) is built for web agencies managing multiple trade clients — includes a master dashboard and white-labelling per company.
For most solo tradies or small businesses, the free plan is the right starting point. If you're getting more than one or two jobs a month from your website leads, the Pro plan pays for itself quickly. As Leadkit puts it: one job a year covers forty years of Pro.
If you're also running a WordPress site or thinking about moving platforms, check out our guide on how to add a quote calculator to WordPress — the process is similarly straightforward.
Frequently Asked Questions
Do I need to know how to code to add a Leadkit calculator to Squarespace? No. You just need to copy and paste a single line of HTML into a Code Block in your Squarespace editor. The Leadkit dashboard generates the embed code for you — there's no configuration required on the code side.
Will the calculator work on Squarespace's Personal plan? No. Squarespace restricts custom code embeds (Code Blocks) to Business plans and above. If you're on a Personal plan, you'll need to upgrade before you can embed any third-party script, including Leadkit.
Why does the calculator appear blank in the editor but work on the live site? Squarespace disables JavaScript in the editor preview for security reasons. This is a Squarespace limitation, not a Leadkit issue. The calculator will always appear blank in edit mode — check your published live URL to confirm it's working.
Can I embed the calculator on multiple pages? Yes. You can paste the same embed code into as many Code Blocks on as many pages as you like. The calculator will render wherever the embed code is placed.
Does Leadkit work with Squarespace's Fluid Engine and the older Classic Editor? Yes to both. The embed process is slightly different for each editor (as outlined above), but the Leadkit embed code itself works the same way in both versions.
Get Started for Free
Adding a quote calculator to your Squarespace site is one of the highest-ROI changes you can make to your trade business website. Instead of sending visitors to a generic contact form and waiting to hear back, you give them an instant estimate — and capture their details automatically in the process.
Leadkit is purpose-built for Australian trades and service businesses. With 112+ trade calculator templates and a free plan that actually delivers results, there's no reason to wait.
Set up your free Leadkit calculator now — it takes 60 seconds, and you won't need a developer.