> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Fillout forms on Webflow

> Learn how to embed a Fillout form in Webflow. It only takes a few minutes to insert your form as a popup, slide-out, or standard element on the page.

## Overview

While [Webflow](https://webflow.com) has some built-in form features, they have limited multi-step functionality and only work with a limited number of third-party apps and platforms, making it hard to sync data to your CRM, database, or email marketing platform.

## Video tutorial

<iframe class="notion-asset-object-fit" src="https://www.loom.com/embed/615d4eab46b8400aaecfccd057ed3c96" 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-dependabot-npm-and-yarn-form-data-4-0-6/oO5k5FPOY4bT5lbU/images/image.png?fit=max&auto=format&n=oO5k5FPOY4bT5lbU&q=85&s=d1f2b820f0ff50e3d875fb96ac53e3c8" 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 elements">
    Open your Webflow visual editor, click `+` on the upper left corner (or press `A`) to open the **Add Elements** sidebar.

    Select the **Elements** tab, scroll to the **Advanced** section at the bottom of the list, and drag and drop the `Embed` to a spot on the page.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/oO5k5FPOY4bT5lbU/images/sharing-and-embedding/image-26.png?fit=max&auto=format&n=oO5k5FPOY4bT5lbU&q=85&s=43aa3c4eaf976e9a628f8b5afa243746" alt="" width="1600" height="898" data-path="images/sharing-and-embedding/image-26.png" />
  </Step>

  <Step title="Paste embed code">
    Paste your **embed code** from Fillout into the code editor and click `Save & Close`.

    <img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/oO5k5FPOY4bT5lbU/images/sharing-and-embedding/image-27.png?fit=max&auto=format&n=oO5k5FPOY4bT5lbU&q=85&s=0bbce8acf03ca6d769ecc1ce17853d70" alt="" style={{ width:"85%" }} width="887" height="691" data-path="images/sharing-and-embedding/image-27.png" />
  </Step>

  <Step title="Publish and preview">
    The Webflow visual editor doesn't display scripts, so you need to open the **Publish** menu in the upper right corner of the screen and click `Publish to selected domains`.

    After publishing the changes, click <Icon icon="arrow-up-right-from-square" /> next to your site URL to confirm that the embed works as intended.
  </Step>
</Steps>

## Troubleshooting common issues

**Narrow embeds**

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/oO5k5FPOY4bT5lbU/images/sharing-and-embedding/image-28.png?fit=max&auto=format&n=oO5k5FPOY4bT5lbU&q=85&s=d0f3c2a36bf69b4426d2c654475c0703" alt="" width="2880" height="1228" data-path="images/sharing-and-embedding/image-28.png" />

Sometimes, design settings applied in Fillout cause the embed to show up as too narrow on the page. To fix this manually, select the `Embed` in the visual editor, then open the **Size** menu from the right **Style** sidebar.

Increase the `Min W` value, publish the changes, and keep adjusting until you find a value you like (500px is a good starting point).

<img src="https://mintcdn.com/fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6/u2EZ6ISDg1R6HSZi/images/sharing-and-embedding/image-29.png?fit=max&auto=format&n=u2EZ6ISDg1R6HSZi&q=85&s=0393d5381d4c942f7c3eff8374d3959a" alt="" width="2880" height="1221" data-path="images/sharing-and-embedding/image-29.png" />

**Out of place floating buttons**

Floating buttons (available in the **Popup** and **Slider** embed settings) may float behind certain elements and styles, like image sliders.

One way to fix this is placing the `Embed` element inside of a `Div` block (under **Basic** in the **Add Elements** sidebar) – almost anywhere on the page should work – and selecting `Relative` from the **Position** dropdown in the right **Style** sidebar.

Then, click on every `Slide` element on the page and select `Static` from the **Position** dropdown within the **Style** sidebar.

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