Thanks for picking up Newsletter Popups. This page covers everything you need to set them up and customize them in a few minutes.
1. Quick Start
1. Open the Assets panel in Framer.
2. Drag "Sign Up Card" or "Sign Up Modal" onto your page.
3. Edit the text in the properties panel.
4. Add your form action or email service.
5. Set the trigger and publish.
2. Components
Sign Up Card
A compact vertical popup. Best for blogs, simple landing pages, and mobile-first sites.
Sign Up Modal
A wide split-screen popup. Best for desktop-heavy sites, SaaS pages, and when you want more space to describe your newsletter.
Each component has three variants:
- Desktop
- Tablet
- Phone
Framer switches between them automatically based on your breakpoints.
3. Customizing Content
Editable items:
- Heading: "Sign Up For Our Newsletter"
- Subtext - Email placeholder
- Button label
- Trust note: "Don't worry, we won't send you spam or sell your data."
- Reader badge: "25k+ readers" (Modal only)
- Label: "Weekly Digest" (Modal only)
Tip: Keep the heading under 6 words and the subtext under 2 lines.
4. Customizing Content
You can connect the popup to:
- Framer Forms
- Mailchimp
- FormSpark
- intercom
- Any service that gives you a form action URL or embed
Steps:
1. Select the form in the popup.
2. Add your form action or connect your email tool.
3. Test with your own email before publishing.
5. Showing the Popup
Use Framer's Overlay interaction:
- On button click: link a button to the popup as an overlay.
- On page load: trigger it after a short delay (5 to 10 seconds works best).
- On scroll: show it after the visitor reads part of the page.
Best practices:
- Don't show it instantly. Give visitors a moment first.
- Show it once per visit.
- Always keep the close button visible.
6. Design Tokens
Colors
- Primary Orange: #FF8A1F
- Deep Orange: #F97316
- Navy (headings): #0F172A
- Slate (body text): #64748B
- Off-white (surface): #FAFBFC
- Border: #E2E8F0
Typography
- Font: Lexend (free on Google Fonts)
- Heading: Semibold, 20 to 28px depending on breakpoint
- Body: Regular, 12 to 14px
- Label: Medium, 10 to 11px, uppercase, wide letter spacing
Shape and Depth
- Card radius: 20 to 24px
- Input and button radius: 12 to 14px
- Button shadow: soft orange glow
- Card shadow: large, soft, low-opacity
Spacing
- Use an 8px grid
- Keep generous padding around the form (24 to 32px)
7. Changing the Brand Color
1. Select the component.
2. Replace the orange values in the gradient, button and accent text.
3. Keep the glow shadow in a lighter version of your new color.
For best results, pick a bright, saturated color so the hero gradient stays vibrant.
8. Best Practices for Conversions
- Offer a clear benefit ("Weekly digest", "Exclusive guides").
- Keep the form to one field (email only).
- Use a short, specific heading.
- Keep the trust note visible.
- Don't stack multiple popups on one page.
9. FAQ
Do I need to know code?
No. Everything is editable visually in Framer.
Is it responsive?
Yes. Desktop, Tablet and Phone variants are included.
Can I use it on client projects?
Yes, as per Framer's marketplace license.
Where do I get the font?
Lexend is free on Google Fonts and available in Framer's font picker.
10. Support
Questions or feature requests? Message me through my gmail . I reply quickly.