Popup Forms

Any form can be configured to appear as a popup overlay on your site. Popups are configured per-form and inject automatically — no shortcode or block needed.

Enabling a Popup

1. Go to SSE Emails > Forms and edit a form (or create a new one)
2. Scroll down to Popup Settings
3. Check “Display this form as a popup”
4. Configure the options below
5. Save the form

Popup Options

Target Pages

Controls where the popup appears:

Option	Behaviour
All Pages	Shows on every page of your site
Homepage Only	Shows only on the front page / blog home
Specific Page IDs	Shows only on pages matching a comma-separated list of post/page IDs (e.g. 12, 45, 78)
URL Contains	Shows on any page whose URL contains a string (e.g. /blog/ matches all blog posts)

Trigger: Delay

“Show after X seconds” — the popup appears after the visitor has been on the page for this many seconds. Set to 0 for immediate display (not recommended — let the visitor engage first).

Common values: 3-5 seconds for engaged visitors, 10-15 seconds for less aggressive.

Trigger: Scroll

“After scrolling X% of page” — the popup only appears after the visitor has scrolled a certain percentage down the page. Set to 0 to disable scroll triggering (time-only).

When both delay and scroll are set, both conditions must be met. For example, delay = 5 seconds and scroll = 50% means: show the popup when the visitor has been on the page for at least 5 seconds AND has scrolled past the halfway point.

Frequency

How often the popup reappears after being dismissed:

Option	Behaviour
Every Visit	Shows on every page load (aggressive — not recommended)
Once Per Session	Shows once, then not again until they close the browser
Once Per Day	Shows once, then hidden for 24 hours (cookie-based)
Once Ever	Shows once, then hidden permanently (365-day cookie)

Hide from Subscribers

When enabled, the popup won’t show to visitors who already have an sse_subscriber_id cookie — meaning they’ve previously subscribed through one of your forms. This prevents annoying existing subscribers.

How Popups Work

1. On each page load, the plugin checks which active popup forms match the current page
2. Matching forms are injected as hidden <template> tags in the page footer
3. A lightweight vanilla JS script (no jQuery) evaluates the trigger conditions
4. When conditions are met, the popup overlay is created with the form content
5. The popup can be dismissed by clicking the X button, clicking outside the modal, or pressing Escape
6. On successful subscription, the popup auto-dismisses after 2 seconds (showing the success message first)

Popup + Inline

A form can be both a popup and an inline embed simultaneously. If you add a form as a Gutenberg block or shortcode and configure it as a popup, visitors will see:

• The inline form on the page (always visible)
• The popup (when trigger conditions are met)

This is usually not desirable. Typically you’d have separate forms for inline and popup use.

Design

Popups use the same form styling (preset + colors) as the inline version, wrapped in a modal overlay:

• Semi-transparent dark overlay
• Centered white modal with rounded corners and shadow
• Smooth entrance animation (fade + slide up)
• Exit animation on dismiss (fade out)
• Scroll lock on the page body while open
• Dark mode compatible

The popup modal has a fixed max-width of 480px and is responsive on mobile.

Performance

• Popup CSS and JS are only loaded on pages where a popup is configured to appear
• The form HTML is kept in a <template> tag (not rendered to the DOM) until the trigger fires
• Total JS footprint is under 4KB
• No external dependencies