How to Create Popup Forms in Elementor
WordPress Tutorials & How-To (Advanced)
How to Create Popup Forms in Elementor
Popup forms are one of the most powerful tools for capturing leads, driving sales, and promoting offers. Elementor Pro includes a built-in Popup Builder that lets you design email signup forms, login popups, discount offers, exit-intent popups, and advanced multi-step forms — all visually. This guide shows you how to create high-converting popups step-by-step.
1
Why Use Popup Forms?
Boost conversions with targeted pop-ups.
Popup forms help you capture visitor attention at the right time. You can use them for:
- Lead generation
- Email newsletter signup
- Discount codes (10% off)
- Exit-intent popups
- Login/Register forms
- Appointment booking
- Announcing flash sales
- Collecting feedback
Elementor Pro makes this extremely easy without coding.
2
What You Need Before Starting
Check requirements before building popups.
- Elementor Pro (required for Popup Builder)
- A form plugin (Elementor Forms, Fluent Forms, or WPForms)
- Your email marketing tool (optional)
- Mailchimp
- MailerLite
- FluentCRM
- Sendinblue
3
How to Create a Popup Form in Elementor
The complete step-by-step process.
Step 1 — Open Popup Builder
- Go to Templates → Popups
- Click Add New Popup
- Name your popup (Example: Discount Popup)
Step 2 — Choose a Template
Elementor offers 100+ popup templates:
- Newsletter popups
- Floating bars
- Fullscreen popups
- Discount popups
- Login & signup forms
Step 3 — Add a Form
Drag the Elementor Form Widget and add fields:
- Name
- Phone (optional)
- Message
Step 4 — Connect to Email Services
In Form → Actions After Submit, add:
- Webhook
- Mailchimp
- MailerLite
- FluentCRM
Configure your integration (API Keys required).
Step 5 — Style the Popup
- Change background color
- Add gradient overlay
- Use images or icons
- Adjust spacing & padding
- Add animations (Slide In, Fade In, Zoom)
4
Set Popup Triggers
Control when the popup should appear.
Elementor supports multiple popup triggers:
- On Page Load
- On Scroll (percentage based)
- On Scroll to Element
- On Click (great for CTA buttons)
- Exit Intent (detects user leaving)
- After Inactivity
For best conversions:
- Use Exit-Intent for offers
- Use On Click for forms
- Use Scroll Trigger for content upgrades
5
Set Popup Conditions
Choose where the popup should appear.
- Entire Site
- Specific Pages
- Posts Only
- Product Pages
- Archive Pages
- 404 Pages
For offers, use WooCommerce → All Products.
For blog signups, use Posts → All Posts.
6
Create Click-Triggered Popups (Best for Forms)
Great for “Sign Up”, “Buy Now”, “Book Appointment”.
Step 1 — Create a Button
- Add an Elementor Button
- Go to Link → Dynamic Tags
- Select Popup
- Choose Open Popup
- Select your popup
Now your button opens your popup instantly.
7
Create Exit-Intent Popups
Perfect for saving abandoned users.
Exit-intent pops up when the user moves cursor near the browser close button.
Elementor Setup:
- Edit your popup
- Go to Display Conditions
- Go to Triggers
- Enable Exit Intent
These convert extremely well for:
- Discount offers
- Lead magnets
- Cart abandonment recovery
8
Best Practices for High-Converting Popups
Improve user experience & conversions.
- Show at the right time (not instantly)
- Keep the design clean
- Use fewer fields (Name + Email)
- Use clear CTAs (Get Offer, Join Free, Download Guide)
- Use images or icons
- Add urgency timers for offers
- Optimize for mobile screens
- Avoid showing popup too often
9
Troubleshooting Popup Issues
Fix common Elementor popup problems.
1. Popup Not Opening?
- Clear browser & plugin cache
- Disable optimization plugins temporarily
- Ensure Elementor Pro is active
- Check trigger settings
2. Popup Opens but Immediately Closes
Disable “Avoid Multiple Popups”.
3. Popup Not Responsive?
- Adjust width in popup settings
- Check mobile viewport settings
4. Buttons Not Triggering Popup?
- Ensure popup is published
- Check Trigger → On Click
- Re-assign popup in dynamic tags
Want High-Converting Popups for Your Website?
All SiteCrafted premium websites come with pre-built Elementor popups — newsletter popups, discount offers, sticky CTA popups, and lead forms built by professionals.
