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

> Add a FormHug form to any Framer site using the Embed component — fully responsive across breakpoints, with no code required beyond pasting the snippet.

Framer's Embed component lets you place a FormHug form anywhere in your site layout. The form adapts to Framer's breakpoints automatically, so it looks right on desktop, tablet, and mobile without extra configuration.

Embedded forms work well for <a href="https://formhug.ai/templates/use-case/lead-generation" target="_blank">lead generation</a>, waitlists, product feedback, and <a href="https://formhug.ai/templates/contact-us-form-template" target="_blank">contact forms</a>.

## 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 Your Framer Project">
    Open Framer and navigate to the page where the form should appear.
  </Step>

  <Step title="Insert an Embed Component">
    Click **+** in the toolbar → search for **Embed** → drag the component onto your canvas.
  </Step>

  <Step title="Paste the Embed Code">
    Select the Embed component, then paste your FormHug embed code into the HTML field in the right panel.
  </Step>

  <Step title="Set the Width to Fill">
    In the layout settings, set the width to **Fill** (or 100%) so the form stretches to fill its container at every breakpoint.
  </Step>

  <Step title="Set the Height">
    Set a fixed height that fits your form. For a short contact or sign-up form, 450–550px is usually right. For longer forms, use 700px or more. Check after publishing and adjust if needed.
  </Step>

  <Step title="Publish the Site">
    Click **Publish** in the top bar. The form is live on your Framer site.
  </Step>
</Steps>

## Control the Maximum Width

Most forms look best at a constrained width rather than spanning the full screen. Place the Embed component inside a Frame with a max-width set — 560–720px works well for most form types.

```
Frame (max-width: 720px, centered)
└── Embed (width: Fill, height: 550px)
```

<Tip>
  Switch between breakpoints in Framer's preview (Desktop → Tablet → Mobile L → Mobile S) and check the form at each size. If it looks cut off at a smaller breakpoint, increase the height for that breakpoint in the layout panel.
</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 Webflow" icon="globe" href="/guides/embed/webflow">
    Instructions for Webflow sites
  </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>