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
Open Your Framer Project
Open Framer and navigate to the page where the form should appear.
Insert an Embed Component
Click + in the toolbar → search for Embed → drag the component onto your canvas.
Paste the Embed Code
Select the Embed component, then paste your FormHug embed code into the HTML field in the right panel.
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.
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.
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.
