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