Framer
Add a waitlist to your Framer site in 10 minutes
Complete Framer waitlist integration guide. Two methods: native form components or embeddable widgets. No coding required.
Trusted by 2,000+
businesses & entrepreneurs
.png?alt=media&token=939637fa-d391-4d15-85ea-7005e07d08eb)
.png?alt=media&token=264537c9-b2e0-44e7-9d78-3b558d4e10c2)
“Waitlister has been amazing; honestly, I don't plan on changing to another provider. Being able to create beautiful landing pages for my waitlist has been amazing. Customer support's response time is amazing, which has helped me deploy quickly.”
What you can build
Popular ways Framer users implement waitlists
SaaS Product Launches
Build anticipation for your SaaS product with a sleek Framer landing page and integrated waitlist.
Agency Client Projects
Create coming soon pages for client projects with Framer's design flexibility and Waitlister's functionality.
Portfolio Launches
Collect early interest for your design services, courses, or products with an elegant waitlist page.
E-commerce Pre-orders
Launch products with pre-order waitlists using Framer's e-commerce capabilities.
Event Registrations
Capture registrations for workshops, webinars, or conferences with beautiful Framer event pages.
Template & Asset Releases
Build a waitlist for your Framer templates, design assets, or digital products.
Why Waitlister for Framer?
Built to work seamlessly with Framer's capabilities
Visual Design Integration
Integrate waitlists without leaving Framer's visual canvas. Style forms to match your exact design using Framer's native components and styling tools.
Zero Code Required
Perfect for designers who want powerful waitlist functionality without touching code. Both integration methods work with Framer's no-code approach.
Component-Based
Works seamlessly with Framer's component system. Create reusable waitlist components that can be deployed across multiple pages.
Lightning Fast Performance
Optimized for Framer's fast loading times. Our embeddable widget is under 2KB and loads asynchronously for zero performance impact.
Works with Framer CMS
Integrate waitlists into CMS-driven pages and templates. Perfect for product catalogs, blog posts, or dynamic content.
Responsive Out of the Box
Automatically responsive across all breakpoints. Works perfectly with Framer's responsive design system and mobile-first approach.
Which integration is
right for you?
Compare both methods to find the best fit for your Framer project
| Feature | Form Action | Embeddable Widget |
|---|---|---|
| Setup Time | ~10 minutes | ~10 minutes |
| Design Flexibility | Full control in Framer | Customizable in dashboard |
| Framer Skills Required | Intermediate (form component) | Basic (embed component) |
| Maintenance | Update in Framer project | Update via dashboard |
| Custom Styling | Unlimited with Framer | Pre-defined options |
| Animations | Full Framer Motion support | Limited |
| Form Validation | Native Framer validation | Built-in |
Choose Form Action if...
- You need pixel-perfect design control
- You want to match your exact brand styling
- You're using custom Framer components
- You need advanced form animations with Framer Motion
- You're comfortable with Framer's form components
- You want the form design in version control with your site
Choose Embeddable Widget if...
- You prefer managing form design in Waitlister
- You're building a simple coming soon page
- You want to update the form styling without touching Framer
- You're new to Framer and want a plug-and-play solution
How to integrate
Follow these Framer-specific instructions
Get your waitlist endpoint URL
Log into your Waitlister dashboard → go to Overview → copy your waitlist key. Your endpoint URL will be:https://waitlister.me/s/YOUR_WAITLIST_KEY
Add a Form component to your Framer canvas
Press Cmd/Ctrl + I to open Insert menu → search for "Form" → drag it onto your canvas. This gives you Framer's native form with all styling capabilities.
Configure form settings
Select the Form component → in the properties panel, find Action and Method settings:
Action: https://waitlister.me/s/YOUR_WAITLIST_KEY
Method: POST
Action: https://waitlister.me/s/YOUR_WAITLIST_KEY
Method: POSTConfigure input field names
For each input field in your form, select it and set the Name property in the properties panel. Use these exact names for Waitlister to recognize the fields:
Email input: name = "email" (required)
Name input: name = "name" (optional)
Phone input: name = "phone" (optional)
For custom fields, use any name you want.
Example: name = "company" for a company fieldStyle your form
Now design your form using Framer's full styling toolkit: colors, typography, spacing, borders, shadows, and more. Make it perfect for your brand.
Add animations (optional)
Enhance with Framer Motion animations: fade-in effects, micro-interactions on button hover, success state animations. Make your waitlist form feel premium.
Whitelist your Framer domain
In Waitlister settings → Configure → Whitelisted domains, add your Framer site domain:
• Preview: framer.app
• Published: your-domain.com
Development: framer.app
Production: yourdomain.comTest thoroughly
Test the form in Framer's preview mode, then publish and test on the live site. Submit test signups and verify they appear in your Waitlister dashboard.
Need more details?
Check out our complete form action endpoint documentation.
View full documentationCommon issues & solutions
Quick fixes for Framer-specific problems
This usually means the script wasn't added to the correct location. Go to your page settings → "Start of <head> tag" section and verify the Waitlister script is there. If using the embed method, ensure you've published the site after adding the code.
Check that your domain is whitelisted in Waitlister settings. For custom domains, add the exact domain (e.g., "yourdomain.com" not "www.yourdomain.com"). Also verify the form Action URL includes your correct waitlist key.
If using the embed method, remember that styling is controlled in Waitlister dashboard, not Framer. For full design control in Framer, use the form action method instead.
Adjust the data-height attribute in your embed code. Try different values to find the perfect fit for your design.
For embed method: the widget is automatically responsive. For form action method: ensure your Framer form component has proper constraints and auto-layout settings. Test on all breakpoints.
Make sure each custom field input has a unique "name" attribute. Any field beyond email, name, and phone will be automatically saved as custom metadata in Waitlister.
By default, Waitlister redirects to its thank-you page. To customize this, set up a redirect URL in your Waitlister dashboard under Configure → Thank You Page settings.
The Waitlister script is very lightweight and rarely conflicts. If you experience issues, ensure the script is loaded with the "defer" attribute. Try moving it to the end of the <head> section.
Common questions
About Framer integration
No! Both integration methods work on all Framer plans, including the free plan. However, you'll need at least a Basic site plan to publish to a custom domain.
Yes! You can add waitlist forms to CMS collection pages. Use the embed method in a CMS template, or create a reusable form component that pulls form settings from CMS fields.
Absolutely! When using the form action method, you have full access to Framer Motion for animating form elements. The embed method has basic transition support but limited animation control.
Yes! Create component variants in Framer with different form designs, then use Framer's built-in variant controls to switch between them. Track performance in Waitlister's analytics.
For pixel-perfect design matching, use the form action method with Framer's native form component. This gives you complete control over every aspect of the form styling using Framer's design tools.
With the form action method, yes - your form will inherit fonts from your Framer site automatically. With the embed method, you can specify custom fonts in Waitlister's design settings.
Yes! Both methods work with Framer's localization. For the form action method, create different form variants for each language. For the embed method, you can create separate waitlist forms in Waitlister for each language.
Not directly with the standard integration. However, you can set up a custom redirect URL in Waitlister that includes URL parameters, then use Framer's code overrides to detect those parameters and trigger custom actions.
Waitlister includes built-in spam protection with rate limiting and email verification. You can also enable double opt-in in your Waitlister settings to require email confirmation.
With the form action method, form submission redirects to Waitlister's thank-you page (customizable in your dashboard). For more control, set up a custom redirect to your own Framer-built thank-you page.
Get started for free
Start collecting sign ups for your
product launch in minutes — no coding required.