Embed guide
Add a form to Webflow
Add a hootform form to a Webflow site with a Code Embed element: inline in the page, as a popup or slider from a button, or full page.
What works on Webflow
| Way to show a form | On Webflow |
|---|---|
| In the page | ✓ |
| Popup | ✓ |
| Slider | ✓ |
| Full page | ✓ |
Where the snippet goes
Webflow takes custom HTML through its Code Embed element, which runs scripts on your published site.
- In the Designer, open the Add panel and drag a Code Embed element onto the page where the form should appear.
- Paste the snippet from your form's Share menu, on the Embed tab, and save.
- For a popup or slider, paste the button version instead. You can style that button with your
own Webflow classes, since only its
data-hootformattributes matter. - Publish the site. Custom code runs on the published site, and may not run in the Designer's canvas.
If several pages need the same popup, put the script line once in the site's custom code settings, and use a Code Embed on each page just for the button.
Tips
- An inline form scrolls inside its frame when a step is taller than the frame. Set the height
with
data-hootform-heightto fit your layout. - Add
data-hootform-forward-queryto pass your page's ownutm_parameters into the form's hidden fields. - Custom code on Webflow may need a paid site plan. Check your plan if the embed doesn't appear after publishing.
The snippets
Replace FORM_ID with your form's id, or copy the finished version from the
form's Share menu, on the Embed tab.
In the page
<div data-hootform="FORM_ID"></div>
<script src="https://hootform.com/embed.js" async></script>Popup
<button type="button" data-hootform="FORM_ID" data-hootform-mode="popup">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Slider
<button type="button" data-hootform="FORM_ID" data-hootform-mode="slider">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Full page
<div data-hootform="FORM_ID" data-hootform-mode="fullpage"></div>
<script src="https://hootform.com/embed.js" async></script>Questions people ask
Why doesn't the form show in the Webflow Designer?
Scripts in a Code Embed run on the published site. Publish, or preview the published page, to see the form.
Can I use my own Webflow button to open the form?
Yes. Give any element the form's data-hootform and data-hootform-mode="popup" attributes,
through a Code Embed or Webflow's custom attributes, and include the script once on the page.
Will the form slow my Webflow page down?
The script is small and loads without blocking the page. Popup and slider forms only load when they're first opened.