> ## Documentation Index
> Fetch the complete documentation index at: https://fillout.com/help/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Fillout forms on Squarespace

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

## What is Squarespace?

[Squarespace](https://www.squarespace.com/) 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

<iframe class="notion-asset-object-fit" src="https://www.loom.com/embed/eb07f1f17c2b4d92afc4096960d7b212" title="iframe video" frameborder="0" allowfullscreen loading="lazy" scrolling="auto" width="100%" height="540px" />

## How to embed your form

<Steps>
  <Step title="Choose an embed style">
    Start by clicking `Publish` in the upper right corner of the Fillout form editor. A popup will show up where you can pick an **embed style**.

    <img src="https://mintcdn.com/fillout-005a867b/8xPSE_gltIWkl-pC/images/image.png?fit=max&auto=format&n=8xPSE_gltIWkl-pC&q=85&s=7dbcd6fa7b9a41bd1cbd1163d7f11065" alt="image.png" width="1780" height="440" data-path="images/image.png" />

    If you've already published your form, click `Share` in the top middle or top right. Adjust your embed style settings to fit your use case. Then, `Get the code`
  </Step>

  <Step title="Add an embed block">
    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.

    <img src="https://mintcdn.com/fillout-005a867b/Bc-CfW1Edpr3p-LV/images/sharing-and-embedding/image-7.png?fit=max&auto=format&n=Bc-CfW1Edpr3p-LV&q=85&s=78d6a5ddf2e99e4643b4831cad6c69b7" alt="Screenshot of the Embed block in Squarespace" width="1600" height="762" data-path="images/sharing-and-embedding/image-7.png" />
  </Step>

  <Step title="Paste Fillout embed code">
    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`.

    <img src="https://mintcdn.com/fillout-005a867b/Bc-CfW1Edpr3p-LV/images/sharing-and-embedding/image-8.png?fit=max&auto=format&n=Bc-CfW1Edpr3p-LV&q=85&s=070773c9e5a462034206dd6675883a7f" alt="Screenshot of the Embed block in Squarespace" style={{ width:"71%" }} width="927" height="460" data-path="images/sharing-and-embedding/image-8.png" />
  </Step>

  <Step title="Save and preview">
    Hit `Save` in the upper left corner of the page editor and press Ctrl + Shift + P to preview the updated page (or click the  <Icon icon="arrow-up-right" size={12} /> button from the site’s Home Menu).

    <img src="https://mintcdn.com/fillout-005a867b/Bc-CfW1Edpr3p-LV/images/sharing-and-embedding/image-9.png?fit=max&auto=format&n=Bc-CfW1Edpr3p-LV&q=85&s=b1fbc9ca1dc90798f98bef1737ab472d" alt="Screenshot of the Embed block in Squarespace" width="1600" height="797" data-path="images/sharing-and-embedding/image-9.png" />

    You can also paste your Fillout **embed code** into a **Code** block if you’re on a Squarespace Business plan or higher.
  </Step>
</Steps>

## Add a full screen embed

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.

<Steps>
  <Step title="Create a blank page">
    From your site’s Home Menu, open the **Website** tab. Click + next to either **Main Navigation** or **Not Linked** and choose `Blank Page`.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-10.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=fc2a6ed5d0fdbd77138f8a14cbadb4b9" alt="Screenshot of the Embed block in Squarespace" width="1600" height="785" data-path="images/sharing-and-embedding/image-10.png" />
  </Step>

  <Step title="Remove header and footer">
    After giving the page a name, click <Icon icon="gear-complex" /> 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`.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-11.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=a565a47476b6692ee736a88765cd8be9" alt="Screenshot of the Embed block in Squarespace" width="1600" height="658" data-path="images/sharing-and-embedding/image-11.png" />
  </Step>

  <Step title="Paste Fillout embed code">
    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.
  </Step>
</Steps>

## Related article

<CardGroup cols={3}>
  <Card title="Share & embed" icon="arrow-up-right-from-square" iconType="regular" color="#FFC738" href="/sharing">
    Share your form by link or embed it on your website.
  </Card>
</CardGroup>