Embed Fillout forms in Squarespace

Use embed blocks to add your Fillout form to a new or existing Squarespace website.

What is Squarespace

Squarespace is a popular website builder for online portfolios, blogs, and eCommerce shops.  The platform includes some built-in form functionality, especially for newsletter signup and product checkout forms, but design options are limited and there are no advanced logic or multi-page options.

Video tutorial

How-to guide

To add a Fillout form to a Squarespace page, start by clicking `Publish` in the upper right corner of the Fillout form editor. Next, open the Share tab (between Integrations and Results at the top of the screen).
notion image
 
Below the social sharing icons, open the Embed form tab, click `Use this embed` under your preferred embed style, and adjust the design and layout settings before copying the code snippet.
notion image
 
Inside the Squarespace drag-and-drop editor, hover your mouse over the section where you want to embed your form and click `+ Add Block`. Scroll to or search for the `Embed` block and click and drag it onto the page.
notion image
 
Double-click the `Embed` block, open the Code Snippet tab from the block editor, and select the `Embed data` button. Paste your Fillout embed code into the code editor and click `Back`.
Hit `Save` in the upper left corner of the page editor and press `Ctrl` + `Shift` + `P` to preview the updated page (or click the `↗` button from the site’s Home Menu).
notion image
 
You can also paste your Fillout embed code into a `Code` block if you’re on a Squarespace Business plan or higher.

Creating a blank page (with no header or footer) for full screen embeds

If you’re adding a Full screen Fillout embed to a Squarespace site, you may need to use code injection to prevent the sitewide header and footer from rendering on top of your form.
From your site’s Home Menu, open the Website tab. Click the `+` icon next to either Main Navigation or Not Linked and choose `Blank Page`.
notion image
 
After giving the page a name, click the gear icon next to it and open the Advanced tab. Paste `<style>.header, #footer-sections {display:none!important;}</style>` into the Page Header Code Injection textbox and click save.
notion image
 
Now that the header and footer are removed, add a blank section to the page, then add an `Embed` block with your Full screen embed code, anywhere on the page.