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).
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.
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.
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).
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`.
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.
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.