Sharing

Embedding

Put a form on your own website inline, as a popup, as a slider from the side, or filling the whole window.

Any published form can live on your own website. Open the form, choose Share, then the Embed tab, pick how it should appear, and copy the snippet into your page's HTML.

Four ways to show a form

Option	What it looks like
In the page	Sits in your page wherever you paste it, like an image.
Popup	A button that opens the form over your page.
Slider	A button that slides the form in from the side.
Full page	Fills the whole window, for a page of its own.

A snippet for In the page looks like this:

<div data-hootform="FORM_ID"></div>
<script src="https://hootform.com/embed.js" async></script>

And a popup:

<button type="button" data-hootform="FORM_ID" data-hootform-mode="popup">Open form</button>
<script src="https://hootform.com/embed.js" async></script>

You only need the <script> line once per page, however many forms the page has. The button can be any button or link of your own: what matters is the data-hootform attributes on it.

Options

Add these attributes to the same element:

Attribute	What it does
`data-hootform-mode`	`popup`, `slider` or `fullpage`. Leave it out for in the page.
`data-hootform-height="560"`	In the page: the frame's height in pixels. The form scrolls inside it when a step, or a one-page form, is taller.
`data-hootform-side="left"`	A slider's side. Right by default.
`data-hootform-hidden="source=site&plan=pro"`	Values for the form's hidden fields.
`data-hootform-forward-query`	Also pass this page's own query string, so a page opened as `?source=ads` fills in the `source` hidden field.
`data-hootform-auto-close="2000"`	Close a popup or slider this many milliseconds after the form is finished.
`data-hootform-title="Signup form"`	The frame's name for screen readers.

Sites that don't allow scripts

Some website builders only accept an <iframe>. Tick Plain iframe, for sites that don't allow scripts in the In the page option to get one. A plain iframe can't open as a popup or slider, and a redirecting ending only moves the frame, not the whole page.

Reacting when a form is finished

The element with data-hootform fires a hootform:complete event when the respondent finishes. It bubbles, so you can listen anywhere on the page:

<script>
  document.addEventListener("hootform:complete", () => {
    // Show your own message, start a download, record a conversion…
  });
</script>

Opening a form from your own code

embed.js adds a small hootform object to the page:

Call	What it does
`hootform.open("FORM_ID", { mode: "popup" })`	Open a popup (or `slider`) without a button.
`hootform.close()`	Close the open popup or slider.
`hootform.load()`	Look for new `data-hootform` elements, for pages that add them after loading.

Pressing Escape in a popup or slider closes it.

How embedded forms behave

Endings that redirect move your whole page to the ending's link, not just the frame.
Saving progress works as usual. In browsers that block cookies inside frames from other sites (such as Safari), progress is kept for as long as the page stays open, so reloading the page starts the form again.
Password-protected forms ask for the password inside the frame.
The form keeps its own design. Match it to your site in the form's Design settings.