How to Embed a Calculator on Your Website (Step-by-Step)
You built a pricing calculator. Now you need it on your website. FormTs uses a lightweight web component that loads your form without iframes or heavy dependencies. Two lines of code, and you're done.
The widget works on any website that allows custom HTML: WordPress, Wix, Shopify, Squarespace, or a plain HTML file. The process is the same everywhere - add a script, place an element, configure allowed domains.
Before You Start
To embed a form, you need a submission link. This is different from the form itself - it's a shareable endpoint that accepts submissions.
If you haven't created one yet:
- Open your form in the FormTs editor
- Click the Links tab (below the form name)
- Click the + button to create a new submission link
- Give it a name (e.g., "Website embed")
Once you have a submission link, click on it to open its settings page. That's where you'll find the Widget tab.
The Widget Tab
Every submission link has a Widget tab with three things:
- Enable toggle - turns embedding on or off
- Embed code - the code to copy
- Allowed Domains - which websites can embed your form
Enable the widget first. The embed code appears only when the widget is on.
The Embed Code
The embed code has two parts. First, a script tag that goes in your page's <head>:
<script type="module" src="https://formts.com/widget.js"></script>Second, a custom element that goes wherever you want the form to appear:
<formts-widget link-id="your-link-id"></formts-widget> The link-id is your submission link's unique identifier. FormTs generates this when you create the link - you don't need to make it up.
Pro tip
You only need the script tag once per page, even if you embed multiple forms. Each form gets its own <formts-widget> element with a different link-id.
Allowed Domains (CORS)
Before your widget works, you need to tell FormTs which domains can embed it. This is a security measure - it prevents random websites from embedding your form without permission.
In the Widget tab, find the Allowed Domains section. Add your website's origin:
https://yourwebsite.com- for productionhttp://localhost:3000- for local development
Include the protocol (http or https) but not any path. If your site is https://example.com/pricing, add https://example.com.
You can add multiple domains - useful if you have a staging site or want to embed on different websites.
Full Example
Here's what a complete HTML page with an embedded calculator looks like:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- FormTs widget script -->
<script type="module" src="https://formts.com/widget.js"></script>
</head>
<body>
<h1>Get a Quote</h1>
<!-- Your calculator appears here -->
<formts-widget link-id="abc123xyz"></formts-widget>
</body>
</html>That's the entire integration. The widget handles loading, styling, and submissions automatically.
Need a calculator to embed? Browse our ready-made templates.
WordPress
WordPress has multiple ways to add custom HTML. Pick whichever matches your setup.
Block Editor (Gutenberg)
Step 1: Edit the page where you want the calculator.
Step 2: Click the + button to add a new block.
Step 3: Search for "Custom HTML" and select it.
Step 4: Paste both the script and widget code:
<!-- Paste this in a Custom HTML block -->
<script type="module" src="https://formts.com/widget.js"></script>
<formts-widget link-id="your-link-id"></formts-widget>Step 5: Preview and publish.
Classic Editor
Step 1: Edit your page and switch to the "Text" tab (not "Visual").
Step 2: Paste the script and widget code where you want the calculator.
Step 3: Publish. Don't switch back to Visual mode before publishing - it might strip the code.
Elementor
Drag an "HTML" widget onto your page and paste both code snippets.
Pro tip
Some WordPress security plugins block external scripts. If your widget doesn't load, check Wordfence, Sucuri, or similar plugins. You may need to whitelist formts.com.
Wix
Wix doesn't allow raw HTML in most places. You need their "Embed HTML" element.
Step 1: In the Wix Editor, click "Add" (+) in the left menu.
Step 2: Go to "Embed Code" → "Embed HTML".
Step 3: Click "Enter Code" and paste:
<script type="module" src="https://formts.com/widget.js"></script>
<formts-widget link-id="your-link-id"></formts-widget>Step 4: Resize the embed container by dragging its corners. The form will fill whatever space you give it.
Step 5: Publish your site.
Shopify
On a Page
Step 1: Go to Online Store → Pages.
Step 2: Create or edit a page.
Step 3: In the content editor, click "Show HTML" (the <> button).
Step 4: Paste the script and widget code.
Step 5: Save.
In a Theme Section
For more control, add a Custom Liquid section:
Step 1: Go to Online Store → Themes → Customize.
Step 2: Add a "Custom Liquid" section.
Step 3: Paste:
{% comment %} FormTs Calculator {% endcomment %}
<script type="module" src="https://formts.com/widget.js"></script>
<formts-widget link-id="your-link-id"></formts-widget>Step 4: Save.
Squarespace
Step 1: Edit your page and click where you want the calculator.
Step 2: Click the + button to add a block.
Step 3: Select "Code" from the block options.
Step 4: Paste the script and widget code. Make sure the dropdown says "HTML".
Step 5: Save.
Squarespace might not show the calculator in the editor preview. View the published page to see it working.
Content Security Policy (CSP)
Most websites don't use CSP. If yours does, you'll need to allow FormTs in your headers:
script-src 'self' https://formts.com;
connect-src 'self' https://formts.com;If you're not sure whether your site uses CSP, just try embedding the widget. If it works, you don't need to change anything. If you see console errors about CSP, add the rules above.
Troubleshooting
Widget Doesn't Load
Check allowed domains. The most common issue. Make sure your website's domain is in the Allowed Domains list in FormTs. Include the protocol (https://).
Check the widget is enabled. The toggle in the Widget tab needs to be on.
Check for script blockers. Ad blockers or privacy extensions might block the widget script. Try in an incognito window with extensions disabled.
Widget Shows Error
Check the link ID. Make sure you copied the correct link-id from the Widget tab, not some other ID.
Check the link is enabled. Submission links can be disabled. The toggle next to the link name should be on.
Form Submits but Nothing Happens
Submissions are working - check the Submissions tab in your link's settings. If you expected an email or webhook, configure those in the Webhooks or Integrations tabs.
Common Questions
Does the widget work on mobile?
Yes. The widget is fully responsive and adapts to any screen size. Touch interactions work properly on phones and tablets.
Can I style the embedded form?
The form uses its own styling that's designed to look clean on any site. You can customize colors and appearance in the FormTs editor before embedding - changes apply everywhere the form is embedded.
Will embedding slow down my website?
The widget script is small and loads asynchronously. It won't block your page from rendering. The form itself loads after your page is ready.
Can I embed the same form on multiple pages?
Yes. Use the same embed code on as many pages as you want. They all share the same submission link, so all responses go to the same place.
Do I need a paid plan to embed?
The free plan includes embedding. You can create forms, embed them, and collect submissions up to your plan's limit. Paid plans offer more submissions, remove FormTs branding, and add features like webhooks.