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

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

## 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="/help/sharing">
    Share your form by link or embed it on your website.
  </Card>
</CardGroup>

<SupportBanner />