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

> Increase conversions and intake data by embedding a powerful Fillout form to a new or existing Wix 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 Wix?

[Wix](http://wix.com/) started as one of the earliest website builders on the market and has grown to serve over 220 million users worldwide. Its premium plans come with a built-in form builder that lacks a few important features like file upload fields and popular third-party integrations.

## Video tutorial

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

## 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="Choose the Embed HTML element">
    In Wix’s drag-and-drop editor, embedded elements live inside containers drawn on the page. Click <Icon icon="circle-plus" iconType="solid" /> from the left sidebar to open the **Embed code** menu, and click <Icon icon="circle-plus" /> next to **Embed HTML.**

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-39.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=6895b781ff63f432a9911c7c5ccd4405" alt="Screenshot of the Share tab of a form" width="1600" height="711" data-path="images/sharing-and-embedding/image-39.png" />
  </Step>

  <Step title="Paste embed code">
    Paste the copied **embed code** from Fillout below **Add your code here (HTTPS only):** and click the `Update` button below the textbox.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-40.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=d541cdc22122b720a97dbaeb064fdee7" alt="Screenshot of the Share tab of a form" width="1600" height="793" data-path="images/sharing-and-embedding/image-40.png" />

    After you see your form inside the Embed HTML container, click and drag the element to wherever you want it on the page. Resize the container by clicking and dragging on any of the white circles lining the border of the element.
  </Step>
</Steps>

## Add a lightbox

To get around embed container limitations, use a lightbox. Although you can add custom code to create popup forms that render outside the bounds of an embed element’s borders, there’s an easier solution.

<Steps>
  <Step title="Choose a template">
    Click <Icon icon="circle-plus" iconType="solid" /> from the left sidebar to open the **Interactive** menu, and choose a template from the **Lightboxes** submenu. That will open a new page editor for a popup.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-41.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=ba2463ad41ff1d4abb57d405f90822d3" alt="Screenshot of the Share tab of a form" width="1600" height="713" data-path="images/sharing-and-embedding/image-41.png" />
  </Step>

  <Step title="Add an Embed HTML element">
    Add an **Embed HTML** element inside the lightbox section (using the steps above) and resize the element as needed.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-42.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=cf5b08d9ee24db09b813e0034090ff4b" alt="Screenshot of the Share tab of a form" width="1600" height="792" data-path="images/sharing-and-embedding/image-42.png" />

    Click `Exit Mode` on top or click the dropdown menu in the upper left corner of the screen to return to editing the previous page.
  </Step>

  <Step title="Choose lightbox">
    To link a button element or URL text to the lightbox popup, click <Icon icon="link" />, choose the **Lightbox** option, and select the lightbox page with your Fillout form from the dropdown list.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-43.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=5db7b969906a6a364375df7ace165012" alt="Screenshot of the Share tab of a form" width="1600" height="727" data-path="images/sharing-and-embedding/image-43.png" />
  </Step>
</Steps>

## Add custom code

If you have a premium Wix account and your site is on a custom domain, you can use Wix’s custom code feature to embed your form anywhere, without the limitations of the iframe embed.

<img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-44.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=cf90b7686028daf0e071b57afeb8faed" alt="Screenshot of the Share tab of a form" width="1600" height="767" data-path="images/sharing-and-embedding/image-44.png" />

<Steps>
  <Step title="Create custom code">
    From your Wix account dashboard, open the `Settings` menu from the left sidebar. Scroll to the bottom of the page and click **Custom code**.

    <img src="https://mintcdn.com/fillout-005a867b/RwMXs5bjvDzocb2x/images/sharing-and-embedding/image-45.png?fit=max&auto=format&n=RwMXs5bjvDzocb2x&q=85&s=245e38a51f6062a21a213951048a4b9f" alt="Screenshot of the Share tab of a form" width="1600" height="639" data-path="images/sharing-and-embedding/image-45.png" />
  </Step>

  <Step title="Paste the embed code">
    Paste a Fillout **embed code** into the text box. Choose which pages should use the code snippet and select **Body - start** from the **Place Code in:** list. Click `Apply` and preview your site to confirm the changes.
  </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 />
