# Install forms on your site

> Add the Emailit script to your site once, place embedded forms, open forms from your own code, and manage form tokens, publishing and submissions.

One script tag shows all of your workspace's live forms on your site. This page explains where to put it, how to place embedded forms, how to open a form from your own code and how to check that submissions arrive.

## Before you begin

- Build and publish at least one form. Only live forms appear on your site. See [Build a form](/docs/forms/build/).
- You need to be able to edit your site's HTML, or add a custom HTML tag in your tag manager.

## Add the script

1. **Copy the snippet.** On **Email Marketing → Forms**, select **Install**. The snippet is also on every form's page, in the **Installation** card. It looks like this, with your workspace's public key in the path:

```html
<script async src="https://js.emailit.com/js/<WORKSPACE_PUBLIC_KEY>/emailit.js"></script>
```

2. **Add it to every page.** Paste it once into the shared layout or template of your site, ideally just before the closing `</body>` tag. It's the same snippet for all forms in the workspace, so you only install it once.

3. **Publish your forms.** Live popups, flyouts, full-page forms and banners now appear on your site without more code.

The script loads asynchronously and doesn't block your page. If anything fails, such as a network error, it stays silent and your page keeps working. It also works when added through a tag manager.

If your site uses a Content Security Policy, allow `https://js.emailit.com` in `script-src` and `connect-src`.

## How overlay forms appear

| Type | When it shows |
| --- | --- |
| **Banner** | As soon as the page loads. Every live banner is shown. |
| **Popup**, **Flyout**, **Full page** | 2.5 seconds after the page loads. Only one of these shows per page load. |

To change the delay, set `display_delay_seconds` in the form's `settings` with [Update a form](/docs/api-reference/forms/update/).

Once a visitor closes a form, it stays hidden in that browser for 7 days. After they submit it, it stays hidden for a year. Emailit remembers this in the browser's local storage, under the key `emailit_forms_v1`, and sets no cookies. If local storage isn't available, forms show on every page load.

## Embed a form in your page

Embedded forms render inside your content, for example in a footer or a blog sidebar. Besides the script, they need a placeholder element:

1. **Copy the placeholder.** Open the embed form's page. The **Installation** card shows the placeholder with the form's public token:

```html
<div data-emailit-form="FORM_TOKEN"></div>
```

2. **Place it.** Paste the placeholder where the form should appear. You can use the same form in several places.

3. **Check the script.** Make sure the [script](#add-the-script) is on the page too.

The script fills every `data-emailit-form` placeholder whose token matches a live embed form. It also watches the page, so placeholders added later, for example by a single-page app, are filled when they appear. Embedded forms show every time, whether or not the visitor submitted them before.

## Open a form from your code

Call `emailit("show", token)` to open a popup, flyout, full-page form or banner when you choose, for example from a button:

```html
<button type="button" onclick="emailit('show', 'FORM_TOKEN')">
  Join the newsletter
</button>
```

- The form opens right away, even if the visitor closed or submitted it before.
- The form must be live, and the script must be on the page.
- Calls made while the script is still loading are queued and run once it's ready.
- For an embed form, `show` re-scans the page for its placeholders.

`openForm` works as an alias for `show`.

## Manage a live form

### Update or unpublish

Saving changes to a live form, or unpublishing it, reaches your site within about a minute. To take a form off your site, open its page and select **Unpublish**. It goes back to draft and you can publish it again later.

### Reset the public token

Each form has a public token, shown as **Public token** on its page. Embed placeholders and `emailit("show", ...)` calls use it. To issue a new one, call [Reset the public token](/docs/api-reference/forms/reset-token/):

```bash
curl https://api.emailit.com/v2/forms/frm_8Lq2Wx5nVb3Tk/reset-token \
  -X POST \
  -H "Authorization: Bearer $EMAILIT_API_KEY"
```

The old token stops working immediately, so update your placeholders and code with the new `token` from the response. Overlay forms that show automatically aren't affected.

## Check submissions

Submit the form on your site with your own details, then open the form's page in the dashboard. **Recent submissions** lists each submission with its **Created** time and **Payload**: the submitted values, keyed by each field's property name. Filter the list by creation date.

Along with the values, Emailit stores the page URL, the referrer, the visitor's IP address and their browser's user agent with each submission. Mention this in your privacy notice.

Submissions aren't added to your contacts or audiences yet. See [Submissions](/docs/forms/#submissions).

## Troubleshooting

<details>
<summary>The form doesn't appear</summary>

Check that the form is **Live** and that the script is on the page, with your workspace's key in its URL. If you closed or submitted the form before, it stays hidden in your browser: open the page in a private window, or remove the `emailit_forms_v1` entry from local storage. Remember that only one popup, flyout or full-page form shows per page load.

</details>

<details>
<summary>An embedded form doesn't render</summary>

Check that the form's type is **Embed**, that it's live, and that the placeholder's `data-emailit-form` value matches the form's current public token. If you reset the token, update the placeholder.

</details>

## Related

  - [Build a form](/docs/forms/build/): Design steps, fields and styles.
  - [Forms API](/docs/api-reference/forms/): Create, publish and manage forms from code.

---
Source: https://emailit.com/docs/forms/install/