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 embed your form in Squarespace

Start by clicking Publish in the upper right corner of the Fillout form editor. Next, open the Share tab from the top menu.
notion image
Select your preferred embed style and click Use this embed. Adjust your embed style settings to fit your use case (more info here) and click Get the code.
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 click 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.

Create 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.

Related article

🔗
Sharing & embedding