---
title: "How to Create Popups in Framer (Newsletter, Exit-Intent & Lead Capture)"
description: "Build newsletter, exit-intent, and lead-capture popups in Framer using overlays and scroll triggers — and make sure the emails they collect actually get delivered."
canonical_url: "https://framerhub.io/blog/framer-popups-guide"
last_updated: "2026-12-15T00:00:00.000Z"
---

Most Framer popup tutorials stop at "add an overlay, add a form, done." That gets you a popup that shows up — it doesn't get you one that converts, doesn't annoy every returning visitor, or reliably delivers the email address it just captured. We build the form infrastructure behind a lot of Framer sites, so the second half of this guide is the part most tutorials skip: what happens after someone actually submits.

## Framer Doesn't Have a "Popup" Element — It Has Overlays

Search Framer's element panel for "popup" and you won't find one. What you'll find is the **overlay system**, and it's more flexible than a dedicated popup component would be — any frame, component, or nested layout can become an overlay, triggered by a click, a page-load delay, a scroll position, or a link action, and dismissed by a close action you design yourself.

This matters practically: a "popup" in Framer is really three separate pieces working together —

1. **The overlay content** — the actual popup design (frame, form, close button).
2. **The trigger** — what causes it to appear (click, delay, scroll, exit).
3. **The dismiss action** — how it closes (X button, overlay background click, ESC key via override).

Build these as three separate decisions, not one component, and every popup type below is a variation on the same base pattern.

## Building a Basic Newsletter Popup

1. **Design the overlay frame.** Build it as a normal frame — background, close button (an icon or "X" text layer), headline, form fields, submit button. Keep it narrower than the full viewport; a full-screen popup reads as more aggressive than a centered card.
2. **Set it as an overlay.** Select the frame, and in the interactions panel set its type to Overlay rather than a normal page element. This removes it from document flow and lets Framer treat it as a layer that shows/hides independently of scroll position.
3. **Add the trigger.** On the element that should open it (a button, or the page itself on load), add a link action targeting the overlay. For "on page load," attach the trigger to the page's root frame with a delay if you don't want it firing instantly.
4. **Wire the close button.** The close button gets its own link action targeting "close overlay" (or back to the previous state, depending on how Framer's current overlay actions are labeled in your version) — test this before you rely on it, since users abandon a popup they can't close faster than one they can.
5. **Connect the form.** Drop a form element inside the overlay frame, same as you would for any [Framer form](/blog/how-to-build-forms-in-framer) — email field, submit button, and a connected destination for the captured address.

## Timed and Scroll-Triggered Popups

A popup that fires the instant someone lands converts worse than one that waits until they've shown intent. Two approaches:

- **Timed delay:** attach the overlay trigger to the page load event, then add a delay (commonly 5–15 seconds) before it fires. This gives visitors time to actually see the page before being interrupted.
- **Scroll-triggered:** trigger the overlay based on scroll position rather than time — showing it once someone has scrolled, say, 50% down the page signals they're engaged rather than about to bounce. This usually needs a small code override watching scroll position and calling the overlay's open action, since native scroll-position triggers on overlays are limited.

Scroll-triggered popups tend to outperform pure timers for content-heavy pages (blog posts, long-form guides) because "time on page" is a weak signal when someone might just be reading slowly — scroll depth is a better proxy for genuine engagement.

## Exit-Intent Popups (Desktop Only — Know the Limit)

Exit-intent detects when a cursor moves rapidly toward the top of the browser window — the universal "about to close this tab" motion — and fires the popup at that moment as a last chance to capture the visitor before they leave. It's effective for cart-abandonment-style offers and last-chance newsletter asks.

The catch: **exit intent has no reliable mobile equivalent.** There's no cursor to track on a touchscreen. If your traffic is majority mobile (check your analytics before building this — most sites are, in 2026), exit-intent popups will simply never fire for most visitors. Native Framer doesn't ship exit-intent detection out of the box; it requires a code override listening for the mouse-leave event at the top of the viewport, calling the overlay's open action when it fires. Build it as a desktop-only enhancement, not your primary lead-capture mechanism.

## Frequency Capping: Don't Show It Every Single Visit

The single biggest popup mistake — and native Framer has no built-in fix for it. Without frequency control, your newsletter popup fires on every page load for every visit, including the fifth visit from someone who already dismissed it four times. That's the fastest way to make a popup actively hostile to your own returning visitors.

The standard fix is a small code override:

```js
function shouldShowPopup() {
  return !localStorage.getItem("popupDismissed")
}

function dismissPopup() {
  localStorage.setItem("popupDismissed", "true")
}
```

Call `shouldShowPopup()` before triggering the overlay, and call `dismissPopup()` from the close button's action (or after a successful form submission, so people who already converted don't see it again either). This is a few lines of code, but it's the difference between a popup that respects visitors and one that trains them to bounce immediately.

## The Part Most Tutorials Skip: Where the Email Actually Goes

A popup that captures an email address is only useful if that address reliably reaches somewhere you can use it. This is where a lot of Framer popups quietly fail — the form *looks* like it worked (a success message shows), but the email either never arrives, lands in spam, or hits Framer's native form-sending limits at any real traffic volume.

If your popup is genuinely driving signups — not a handful a month, but a real lead-capture channel — the reliability of the delivery layer matters as much as the design. That's exactly the gap [Form Kit](/plugins/framer-form-kit) closes: validated fields (so you're not capturing malformed emails in the first place), clean error states inside the popup itself, and unlimited email delivery via Resend instead of Framer's default sending limits. See [framerformkit.com](https://framerformkit.com) for the full feature set. For a popup specifically, the two things worth checking are: does the success state actually confirm before closing the overlay, and does the email land somewhere reliable at whatever volume the popup drives.

## Multi-Step Popups for Higher-Intent Offers

A single "enter your email" field converts fine for a low-commitment newsletter ask. For a higher-value offer — a discount code, a gated PDF, a consultation booking — a two-step popup often converts better than a one-step form: step one asks a single qualifying question or shows the offer with a single "Get Started" button, step two asks for the email. This works because it front-loads a small, easy commitment before the "real" ask, which lowers the perceived friction of the second step.

Building this in Framer means two overlay states (or two frames toggled by a variable) inside the same overlay container, with the "next" button on step one triggering a state change rather than closing the overlay. It's more setup than a single-field popup, but for anything beyond a plain newsletter signup, the conversion lift is usually worth the extra frames.

## Speeding Up the Build With Components

Building a polished popup from scratch — close button micro-interactions, layered background blur, responsive form layout — takes longer than it looks once you account for every device size and edge case (empty state, error state, success state, all at mobile and desktop widths). If you're building popups regularly across client projects, a ready-made [component library](/components) is usually faster than rebuilding the same overlay pattern from scratch each time, especially for the interaction details (hover states, focus rings, animated close transitions) that are easy to skip under a deadline but are exactly what makes a popup feel polished instead of bolted-on.

## Popup Design Checklist Before You Ship It

- **Close button is obviously clickable** and works from both the X and a background click.
- **Mobile layout is tested separately** — a popup sized for desktop often overflows or blocks the entire viewport on a phone.
- **Frequency capping is in place** so it doesn't refire every visit.
- **Form validation happens before submission**, not after a failed send.
- **The offer is worth the interruption** — a popup asking for an email needs to give something back (a discount, a resource, a real reason), not just "sign up for our newsletter."

## FAQ

**Does Framer have a native popup element?**
Not a dedicated one — Framer's overlay system covers it. Any frame or component can become an overlay with a trigger and a close action, which functions as a popup.

**How do I make a popup only appear once per visitor?**
Framer doesn't track this natively. A code override checking `localStorage` before showing the overlay, and setting a flag once dismissed, is the standard fix.

**What's the difference between an exit-intent and a timed popup?**
Exit-intent fires on cursor movement toward the browser close area (desktop only — no mobile equivalent). Timed and scroll-triggered popups fire after a delay or scroll depth and work on both desktop and mobile.

**Why isn't my Framer popup email actually arriving?**
Framer's native form handler has sending limits and limited delivery visibility. At any real submission volume, a dedicated form/email pipeline is more reliable than the default handler.

**Should I use a popup or an inline form for lead capture?**
Popups convert well but risk annoying visitors if overused. Inline forms convert lower per-visitor but cost less goodwill. Most effective setups run both — an inline form by default, a well-timed popup as backup.