---
title: "Popups - Workflow Forms"
description: "Show a form as a popup: the Popup forms app embed, when it opens, page and device targeting, frequency and the teaser button."
canonical: "https://docs.workflow-forms.app/popups"
---

# Popups

A popup opens a form over the page: a newsletter signup after a few seconds, a feedback form when someone is about to leave, or a slide-in in the corner.

## Set up a popup

1. In the form editor, set **Show on your store as** to **Popup**.
2. On the **Display** tab, configure the popup (all settings below).
3. **Save** the form to activate it.
4. Switch on the **Popup forms** app embed in your theme: select **Open app embeds** in the Display tab, turn **Popup forms** on and save the theme. You do this once for all popup forms.

The app embed shows the forms whose popup is switched on in Workflow Forms, with the trigger, pages and frequency set there. One popup shows per page view.

## Look

| Setting | Options |
| --- | --- |
| **Style** | Centered window, Slide-in, bottom left, or Slide-in, bottom right |
| **Dim the page behind the popup** | On or off, with **Dimming** from 0 to 90 % |
| **Image URL (optional)** | An https link, for example from Content > Files |
| **Image position** | No image, Left, Right or Background |
| **Image description (for screen readers)** | Alternative text for the image |

## When it opens

| **Open** | Setting |
| --- | --- |
| After a delay | **Seconds** (0 to 600, 5 by default) |
| After a number of page views | **Page views** (2 by default) |
| After scrolling | **Scrolled** (percent of the page, 50 by default) |
| When leaving the page (desktop) | Opens when the mouse leaves the window. On phones the popup does not open with this setting |

## Where

- **Pages** - All pages, Only these pages, or All pages except these.
- **Page paths** - one per line, for example `/products/*` or `/pages/contact`. `*` matches anything. Language prefixes like `/de` are ignored, so one path covers every language. Up to 20 paths.
- **Devices** - All devices, Desktop only or Phones only.

## How often

- **After closing, show again after (days)** - 7 by default. 0 shows it again on the next page view.
- **Never show again after the visitor sent the form** - on by default.

Whether a visitor closed or sent a popup is remembered in that visitor's browser. A visitor who clears their browser data or uses another device can see the popup again.

## Teaser button

A teaser is a small button in a corner of the page that opens the popup when clicked.

- **Teaser** - No teaser; Always, also before the popup opens; or Only after the popup was closed.
- **Teaser position** - Bottom left or Bottom right.
- **Teaser text** - empty uses the form title. It can be translated per language.

## Colors and branding

A popup uses the form's branding and your shop branding, including **Popup background** and **Popup overlay**. See [Branding](https://docs.workflow-forms.app/branding.md).

The **Popup forms** app embed has a few settings of its own in the theme editor, which win when filled in: Popup background, Popup text, Corner radius, Button style and the two button colors.

## Good to know

- The popup can be closed with its close button, with the Escape key or by clicking the dimmed page.
- The editor's preview shows the popup when the **Popup** pill is selected. Use **Test like a visitor** to try the form itself.
- A popup form is shown in the visitor's storefront language like any other form. See [Languages](https://docs.workflow-forms.app/languages.md).

## Not opening?

- The **Popup forms** app embed must be on in the theme that is live.
- The form must be saved with **Popup** selected, and **Form is live** must be on.
- Check **Pages**, **Devices** and the frequency settings: if you closed the popup yourself, it rests for the days you set. Try a private browser window.
- Only one popup shows per page view; another popup form may have opened first.

## Next steps

- [Add a form to your theme](https://docs.workflow-forms.app/add-a-form-to-your-theme.md) - show the form inline instead.
- [Branding](https://docs.workflow-forms.app/branding.md) - popup colors.
- [After sending: message, discount code and redirect](https://docs.workflow-forms.app/after-sending.md) - show a discount code after a signup.