Embed guide
Add a form to Framer
Add a hootform form to a Framer site with an Embed component, in the page, using the snippet from your form's Share menu.
What works on Framer
| Way to show a form | On Framer |
|---|---|
| In the page | ✓ |
| Popup | — |
| Slider | — |
| Full page | — |
Where the snippet goes
Framer takes custom HTML through its Embed component.
- In Framer, insert an Embed component where the form should appear, and size it to the height you want the form to have.
- Choose the HTML option, and paste the snippet from your form's Share menu, on the Embed tab.
- Publish the site and open the published page to check the form.
Framer can run embedded HTML inside a frame of its own, so this guide covers forms in the page. A popup or slider would open inside that frame rather than over your whole page. For a form on a page of its own, link a button to the form's own address instead.
If Framer only accepts a link in your Embed component, use the form's plain link with
?embed=1 on the end, from the Plain iframe option on the Embed tab.
Tips
- Give the Embed component a fixed height. The form scrolls inside it when a step is taller.
- Match the form's colours and font to your Framer site in the form's Design settings.
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>Questions people ask
Can a Framer button open the form as a popup?
Not reliably through an Embed component, which may be framed. Link the button to the form's own page instead, or keep the form in the page.
Does the form work on mobile in Framer?
Yes. The form is responsive and asks one question per screen, so it works inside a phone-sized frame.
Why is the form cut off?
The Embed component's height sets the frame's height. Make it taller, and the form scrolls inside when a step needs more room.