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.

Before You Start

Get your embed code from FormHug: open the form → click Publish → Embed → copy the code.

Add the Form to Your Page

1. Open Your Framer Project

   Open Framer and navigate to the page where the form should appear.

2. Insert an Embed Component

   Click + in the toolbar → search for Embed → drag the component onto your canvas.

3. Paste the Embed Code

   Select the Embed component, then paste your FormHug embed code into the HTML field in the right panel.

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

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

6. Publish the Site

   Click Publish in the top bar. The form is live on your Framer site.

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)

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.

Related

Embed Options

All embed types available in FormHug

Embed in Webflow

Instructions for Webflow sites