> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pocketsflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Signup forms

> Inline forms, slide-ins and exit popups for any website, all feeding your Pocketsflow audience.

Signup forms put a newsletter form on your own blog or website: in the page,
sliding into a corner, or as a popup when someone is about to leave. Everyone
who signs up joins your Pocketsflow audience with the tags you choose, ready
for your next email or automation.

Signup forms are part of the **Growth** plan and above.

## The three types

| Type | Where it shows | When |
| - | - | - |
| **Inline form** | Where you paste the code | Always |
| **Slide-in** | Bottom right or bottom left corner | After a delay or once the visitor scrolled far enough |
| **Popup** | The middle of the page, over a dim backdrop | When the pointer heads for the tab bar (exit intent) on a computer; after the delay on phones |

## Build a form

<Steps>
  <Step title="Open Marketing → Signup forms → New form">
    Pick the type. The preview on the right is the real form, exactly as
    your visitors will see it, on desktop or on a phone.
  </Step>

  <Step title="Write the copy">
    Headline, text, button text and the email placeholder. Turn on **Ask for
    a first name** to greet people by name in your emails.
  </Step>

  <Step title="Choose what happens after signup">
    The thank-you headline and message, an optional **lead magnet** (one of
    your products: the thank-you state links to it), the **tags** every
    signup gets, and **double opt-in**.
  </Step>

  <Step title="Choose when it shows">
    For slide-ins and popups: after a delay, after scrolling, or on exit,
    and how many days to wait before showing it again to someone who closed
    it. People who signed up never see it again.
  </Step>

  <Step title="Add it to your site">
    Copy the script and paste it into your site's HTML.
  </Step>
</Steps>

## Add it to your site

```html theme={"system"}
<script src="https://app.pocketsflow.com/forms.js" data-pocketsflow-form="FORM_ID" async></script>
```

* **Inline form**: paste the script where the form should appear. To place
  it somewhere else, add `<div data-pocketsflow-form-target="FORM_ID"></div>`
  where it should go and keep the script anywhere on the page.
* **Slide-in and popup**: paste the script once on every page that should
  show it, ideally just before `</body>`.
* **No scripts allowed?** Use the iframe from the form page. It always shows
  the form inline.

The script is small, has no dependencies and is isolated from your site's
CSS (it renders in a shadow root), so your styles never break it and it
never changes your page. Edits you save show on your site within a minute.

## Double opt-in

With double opt-in on, a signup gets an email from you with a **Confirm
subscription** button. Only people who click it join your audience; the link
works for 7 days. Without it, people join right away. Someone who
unsubscribed earlier and signs up again is subscribed again; an address that
bounced or reported spam never is.

## Numbers

Each form counts **views** (the form was on screen: half visible for an
inline form, opened for a slide-in or popup), **signups** and **conversion**
(signups ÷ views). The form page shows signups per day for the last 30 days.

## Spam

Forms are protected without a captcha: a hidden field that only bots fill
in, a minimum time on screen before submitting, and a limit of 10 signups per
15 minutes from one network. Bots get a normal-looking answer and are never
added.

## Events on your page

The script fires `pocketsflow:form-open`, `pocketsflow:form-close` and
`pocketsflow:subscribe` on `window`, with `detail.formId`, so you can send
them to your own analytics.

```js theme={"system"}
window.addEventListener("pocketsflow:subscribe", (event) => {
  analytics.track("Newsletter signup", { form: event.detail.formId });
});
```

## Plans

Below Growth, your forms stay in your dashboard but stop showing on your
site and stop accepting signups until you upgrade. Pausing, archiving and
deleting always work. Developers: see
[Signup forms API](/api-reference/signup-forms).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.