Embed guide
Add a form to Squarespace
Add a hootform form to a Squarespace site with a Code block: inline in the page, as a popup or slider from a button, or full page.
What works on Squarespace
| Way to show a form | On Squarespace |
|---|---|
| In the page | ✓ |
| Popup | ✓ |
| Slider | ✓ |
| Full page | ✓ |
Where the snippet goes
Squarespace takes custom HTML through its Code block.
- Edit the page, add a block where the form should go, and choose Code.
- Paste the snippet from your form's Share menu, on the Embed tab, and make sure the block is set to HTML.
- Save and view the live page. Scripts in Code blocks may not run in the editor's preview.
For a popup or slider on every page, add the script line once in the site's code injection settings, and use a Code block for just the button where you want it.
Tips
- Running scripts in Code blocks and code injection may need a paid Squarespace plan. If the form doesn't appear, check your plan, or use the Plain iframe option on the Embed tab, which works without scripts but only in the page.
- Match the form's font and colours to your site in the form's Design settings.
- Add
data-hootform-heightto set how tall an inline form is.
The snippets
Replace FORM_ID with your form's id, or copy the finished version from the
form's Share menu, on the Embed tab.
In the page
<div data-hootform="FORM_ID"></div>
<script src="https://hootform.com/embed.js" async></script>Popup
<button type="button" data-hootform="FORM_ID" data-hootform-mode="popup">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Slider
<button type="button" data-hootform="FORM_ID" data-hootform-mode="slider">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Full page
<div data-hootform="FORM_ID" data-hootform-mode="fullpage"></div>
<script src="https://hootform.com/embed.js" async></script>Questions people ask
Why doesn't the form appear while I'm editing?
Squarespace may not run scripts inside the editor. Save, then view the live page.
Can the form open from a Squarespace button?
Use the button in the snippet, or add the same data-hootform attributes to your own button
inside a Code block.
Where do the responses go?
Into hootform, where you can read, export and get notified about them. Squarespace's own form storage isn't involved.