Skip to main content
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.

​
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 the Page in Webflow Designer

Open your Webflow project and go to the page where the form should appear.
2

Add an Embed Element

In the Add Elements panel, find Embed under Components and drag it onto your canvas where you want the form.
3

Paste the Embed Code

Double-click the Embed element to open the code editor. Paste your FormHug embed code and click Save & Close.
4

Set the Width

In the Style panel, set the Embed element’s width to 100% so the form fills its container at all breakpoints.
5

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

Publish the Site

Click Publish in the top-right corner. The form is live on your published site.
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.

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

Embed Options

All embed types available in FormHug

Embed in WordPress

Instructions for WordPress sites