Embed guide
Add a form to any HTML page
Add a hootform form to any website with two lines of HTML: in the page, as a popup or slider from a button, or filling the whole window.
What works on any HTML page
| Way to show a form | On any HTML page |
|---|---|
| In the page | ✓ |
| Popup | ✓ |
| Slider | ✓ |
| Full page | ✓ |
Where the snippet goes
If you can edit your site's HTML, you can embed a form anywhere.
- Open your form's Share menu, choose the Embed tab, and pick how it should appear.
- Paste the snippet into your page's HTML where the form should go.
- Load the page. The script finds every
data-hootformelement on the page and turns it into a form.
The script line only needs to be on the page once, however many forms or buttons it has. Any
element can open a popup or slider, including your own buttons and links, as long as it carries
the data-hootform attributes.
Going further
- Hidden fields:
data-hootform-hidden="plan=pro"fills in the form's hidden fields, anddata-hootform-forward-querypasses your page's own query string. - Reacting to a finished form: listen for the bubbling
hootform:completeevent to record a conversion or show your own message. - Opening from code:
hootform.open("FORM_ID", { mode: "popup" })andhootform.close(). - Single-page apps: call
hootform.load()after adding newdata-hootformelements.
See the embedding docs for every option.
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
Does it work with React, Vue or other frameworks?
Yes. Render the element with its data-hootform attributes, load the script once, and call
hootform.load() after rendering new ones.
Can I style the form to match my site?
The form keeps its own design, which you set in the form's Design settings. Your page's CSS doesn't reach inside the frame.
Does it work without JavaScript?
Use the plain iframe snippet, which needs no script. It can only show the form in the page.