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

# Embed in Webflow

> Add a FormHug form to any Webflow page using the Embed element — responsive across all breakpoints and fully integrated into your Webflow layout.

Webflow's Embed element lets you drop a FormHug form directly into your page layout. The form respects your Webflow breakpoints and publishes with the rest of your site.

Use embedded forms for <a href="https://formhug.ai/templates/use-case/lead-generation" target="_blank">lead generation</a>, product feedback, waitlists, quote requests, and website contact pages.

## Before You Start

Get your embed code from FormHug: open the form → click **Publish** → **Share** → **Add to website** → choose your embed type → click **Get the code**.

## Add the Form to Your Page

<Steps>
  <Step title="Open the Page in Webflow Designer">
    Open your Webflow project and go to the page where the form should appear.
  </Step>

  <Step title="Add an Embed Element">
    In the **Add Elements** panel, find **Embed** under Components and drag it onto your canvas where you want the form.
  </Step>

  <Step title="Paste the Embed Code">
    Double-click the Embed element to open the code editor. Paste your FormHug embed code and click **Save & Close**.
  </Step>

  <Step title="Set the Width">
    In the Style panel, set the Embed element's width to **100%** so the form fills its container at all breakpoints.
  </Step>

  <Step title="Set the Height">
    Set a fixed height that fits your form. Short forms (contact, sign-up) typically need 400–500px; longer forms need 700px or more. You can adjust per breakpoint.
  </Step>

  <Step title="Publish the Site">
    Click **Publish** in the top-right corner. The form is live on your published site.
  </Step>
</Steps>

<Note>
  The Webflow Designer shows the Embed element as a grey placeholder box, not the actual form. Always check the live published URL to see the form as visitors will.
</Note>

## Control the Maximum Width

For best readability, place the Embed element inside a **Div Block** with a max-width set. Most forms look best between 560px and 720px wide — full-width embeds on large monitors can feel too stretched.

<Tip>
  Check the form at each breakpoint (Desktop → Tablet → Mobile) in the Designer and adjust the height for each if needed. A form that looks right at desktop height may be cut off on mobile.
</Tip>

## Related

<CardGroup cols={2}>
  <Card title="Embed Options" icon="code" href="/features/sharing/embed">
    All embed types available in FormHug
  </Card>

  <Card title="Embed in WordPress" icon="wordpress" href="/guides/embed/wordpress">
    Instructions for WordPress sites
  </Card>

  <Card title="Lead Generation Guide" icon="book-open" href="https://formhug.ai/blog/how-to-build-a-lead-generation-form" target="_blank">
    Learn how to structure embedded forms for conversion
  </Card>

  <Card title="Lead Generation Templates" icon="bullseye" href="https://formhug.ai/templates/use-case/lead-generation" target="_blank">
    Start from demo, quote, callback, and early-access forms
  </Card>
</CardGroup>