How to create popup contact form in Elementor

What is a Popup Contact Form?

A popup contact form is a contact form that appears in a modal overlay window — a layer that floats above the main page content — rather than being permanently embedded in the page layout. The popup appears in response to a specific trigger event: a visitor clicking a button, scrolling to a certain point on the page, spending time on the site, showing exit intent, or landing on a specific page.

Unlike a traditional embedded contact form on a static Contact page, a popup contact form:

• Appears contextually, wherever the visitor currently is on the website — no navigation required
• Demands focused attention by overlaying the background content, reducing distractions during form completion
• Can be triggered by multiple entry points across the entire website — any button, any page, any moment
• Creates a cleaner page design by removing large form blocks from the main content layout
• Can be dismissed easily if the visitor is not ready to engage, creating a low-pressure interaction

A popup contact form in Elementor specifically refers to a popup built with Elementor Pro’s Popup Builder that contains Elementor’s Form widget — one of the most powerful and fully featured form builders available in any WordPress page builder. The Form widget supports custom fields, multi-step forms, conditional logic, and direct integration with popular CRM and email marketing platforms.

The combination of Elementor’s Popup Builder and Form widget gives you a fully integrated, visually designed, behaviorally triggered contact form system — entirely within your existing Elementor workflow, without the need for additional plugins.

Benefits of Creating a Popup Contact Form on Your Website

1. Higher Visibility Across the Entire Website

A popup contact form configured to appear on every page of your website — or triggered by a floating contact button — ensures that visitors always have easy access to a contact option regardless of which page they are currently viewing. This dramatically increases the visibility of your contact opportunity compared to a single, easily missed Contact page link in your navigation menu.

2. Contextual, Intent-Based Engagement

When a popup contact form appears immediately after a visitor clicks a ‘Speak to an Expert’ button, books a consultation CTA, or clicks a ‘Get a Quote’ link, the context is perfect — the visitor has explicitly expressed interest. At that moment, the popup form captures a user who is motivated and ready to engage, producing significantly higher form completion rates than asking visitors to navigate to a separate contact page.

3. Reduced Friction in the Conversion Journey

Every additional step between interest and action reduces the probability of conversion. Requiring a visitor to click a navigation link, wait for a page to load, scroll to a form, and then fill it out is a multi-step journey with multiple exit points. A popup contact form eliminates those intermediate steps — the form appears immediately where the visitor already is, eliminating navigation friction entirely.

4. Cleaner, More Professional Page Designs

Embedding a large contact form in the middle of a service page, landing page, or homepage often disrupts the visual flow and clutters the layout. Moving the contact form into a popup keeps the main page design clean and focused — call-to-action buttons take the visual space of the form, and the form appears only when the visitor actively wants it.

5. Multiple Entry Points for the Same Form

With a popup contact form in Elementor, a single popup template can be triggered from multiple places across the entire website — a CTA button in the header, a button in the footer, an inline link in a blog post, and a floating contact button — all opening the same popup form. This consistency of experience and ease of maintenance is a significant advantage over embedding separate form instances on multiple pages.

6. Exit Intent Recovery

Popup contact forms triggered by exit intent appear precisely when a visitor’s cursor movement indicates they are about to leave the website. For business and service websites, an exit intent popup with a simple ‘Have a question before you go?’ message and a contact form can convert a percentage of otherwise lost visitors into inquiries — recovering leads that would have disappeared permanently.

7. Better Analytics and Form Performance Tracking

Elementor Pro provides form submission tracking and analytics within the WordPress dashboard. Because all popup contact form submissions are captured in the same centralized Elementor forms panel, you get a clean, consolidated view of all contact form activity across your site — submission count, entries, and form field data — without needing a separate analytics tool.

8. Full Brand Control Over Form Appearance

Because popup contact forms in Elementor are designed entirely within the Elementor editor, every visual aspect of the popup and form — background, typography, colors, field styles, button design, border, shadow, animation — can be customized to match your exact brand standards. This creates a cohesive, professional form experience that reinforces brand trust rather than disrupting it with a generic third-party form.

What is Elementor Popup Builder?

Elementor Popup Builder is a built-in feature of Elementor Pro that allows you to create, design, and configure popup overlays entirely within the Elementor page builder interface — using the same drag-and-drop editor you already use to build pages. It is included in all Elementor Pro plans at the Advanced Solo level and above (starting from $99/year for 1 site).

The Popup Builder is often described as the number one WordPress popup builder plugin because it combines complete visual design freedom — a blank canvas with access to all 85+ Elementor Pro widgets — with powerful behavioral logic including display conditions, trigger rules, and advanced frequency rules. Unlike standalone popup plugins that work independently of your page builder, Elementor’s Popup Builder is deeply integrated with the rest of your Elementor Pro site — sharing the same templates, design system, and widget library.

Key capabilities include unlimited popup creation, mobile-optimized popups with independent mobile styling, smart display conditions based on page, post type, user role, and login status, six trigger types (on page load, on scroll, on click, after time, exit intent, and inactivity), and advanced frequency rules including total impressions, sessions, and user-specific suppression after submission.

Key Features of Elementor Popup Builder

1. Complete Design Freedom on a Blank Canvas

Every Elementor Pro popup starts with a blank canvas — a container you can design from scratch using the full Elementor drag-and-drop editor. Add any of Elementor’s 85+ widgets to your popup: the Form widget for contact forms, the Heading widget for titles, the Image widget for product images, the Countdown widget for urgency timers, the Video widget for promotional content, and more. The popup canvas supports sections, columns, containers, and every layout structure available in standard Elementor pages.

2. Pre-Designed Popup Templates

Elementor Pro includes a library of professionally designed, highly converting popup templates covering common use cases — subscription forms, lead generation, announcements, promotional offers, cookie consent notices, age verification gates, and more. Each template is fully customizable and serves as a starting point rather than a fixed design. For popup contact forms specifically, you can start with a lead generation form template and replace the email capture form with a full contact form in minutes.

3. Smart Display Conditions

Display conditions control which pages of your website show each popup. Configure a popup to appear on:

• All pages of the website
• A specific page by ID or URL
• All posts in a specific category or tag
• All pages using a specific page template
• Front page only
• All single post pages or all archive pages
• Specific product pages (WooCommerce)
• Based on user login status (logged in vs logged out)
• Based on user role (administrator, subscriber, etc.)

This granular page-level targeting ensures every popup is contextually appropriate for the page it appears on — a contact form popup relevant to a specific service can be limited to that service’s page, while a general contact popup can be set to appear site-wide.

4. Six Powerful Trigger Types

Triggers define the visitor behavior or action that causes the popup to open. Elementor Popup Builder supports six distinct trigger types:

• On Page Load — popup opens when the page finishes loading. Best for immediate offers and welcome messages.
• On Scroll — popup opens when the visitor has scrolled a defined percentage (e.g., 50%) down the page. Best for mid-content lead magnets on blog posts.
• On Click — popup opens when the visitor clicks a specified element — a button, link, image, or text. This is the primary trigger for popup contact forms activated by a ‘Contact Us’ CTA button, and is configured by adding a specific CSS ID to both the triggering button and the popup.
• After Time Delay — popup opens after the visitor has spent a defined number of seconds on the page. Best for allowing visitors to engage with content before presenting an offer.
• Exit Intent — popup opens when Elementor detects the visitor’s cursor moving toward the browser’s address bar or tabs — a reliable signal of imminent page departure. Best for last-chance contact opportunities and abandonment recovery.
• Inactivity — popup opens when a visitor has not interacted with the page for a defined period. Best for re-engagement opportunities and support offers.

5. Advanced Frequency and Suppression Rules

Advanced rules give you precise control over how often and under what circumstances each popup is shown to individual visitors:

• Show popup X times — limit the total number of times a visitor ever sees the popup across all sessions
• Show once per session — display the popup only once per browser session
• Show after X days of not seeing it — create day-based suppression periods between popup displays
• Don’t show after form submission — automatically suppress the popup for visitors who have already submitted the form (prevents repeatedly showing a contact popup to existing leads)
• Don’t show after close — automatically suppress for visitors who have deliberately dismissed the popup

6. Custom Animation and Close Button

Configure the popup’s entrance animation — how it slides, fades, or zooms into view when it opens. Choose from multiple animation types (fade, slide from top, slide from bottom, slide from left, slide from right, zoom in) with configurable animation speed. Customize the close button’s position (corner placement), style, icon, and color — or remove the close button entirely to create an intentional gate-style popup. Configure the overlay background color and opacity, and choose whether clicking the overlay closes the popup.

7. Mobile-Optimized Popups with Independent Mobile Styling

Elementor’s responsive design system applies to Popup Builder popups as well. Configure independent styling for the popup on desktop, tablet, and mobile — adjusting popup width, content layout, font sizes, and spacing for each breakpoint. You can also configure different popup sizes on mobile to ensure the form is comfortably usable on smartphone screens without pinching, zooming, or horizontal scrolling.

8. Full Integration with Elementor Form Widget

The Form widget available within the Popup Builder canvas is the same powerful Elementor Pro Form widget used on standard pages. It supports:

• Unlimited custom fields: text, email, phone, URL, textarea, select dropdown, checkbox, radio, date, time, file upload, and hidden fields
• Field validation: required fields, email format validation, minimum/maximum length
• Multi-step forms with progress bars
• Custom success messages and redirect after submission
• Email notifications to the site admin and confirmation emails to the submitter
• Direct CRM integrations: HubSpot, ActiveCampaign, Mailchimp, ConvertKit, GetResponse, and more
• Webhook support for custom integrations

How to Create a Popup Contact Form in Elementor

Here is a complete step-by-step guide to building a popup contact form in Elementor Pro that opens when a visitor clicks a button.

Step 1: Ensure Elementor Pro is Installed and Activated

1. Purchase an Elementor Pro plan that includes Popup Builder — Advanced Solo ($99/year for 1 site) or above
2. Download the Elementor Pro plugin from your Elementor account
3. Go to WordPress Dashboard > Plugins > Add New > Upload Plugin
4. Upload and activate Elementor Pro
5. Connect your Elementor Pro license key — go to Elementor > License in the WordPress admin and enter your key
6. Ensure both the free Elementor plugin and Elementor Pro are active

Step 2: Create the Popup

7. In the WordPress admin sidebar, go to Templates > Popups
8. Click Add New Popup at the top of the page
9. Enter a name for your popup (e.g., ‘Contact Form Popup’) — this is an internal name for organization
10. Click Create Template — the Elementor editor will open with a blank popup canvas

Step 3: Design the Popup Layout

11. The popup canvas appears — it functions identically to a standard Elementor page canvas
12. Click the Settings gear icon at the bottom left of the editor to access popup-level settings
13. Set the Popup Width (e.g., 600px for a contact form popup) and Height (auto, to adjust to content)
14. Configure the popup entry animation (fade, slide from bottom, zoom in — choose what fits your brand)
15. Set the Overlay Color (semi-transparent dark background) and configure whether clicking the overlay closes the popup
16. Optionally configure the Close Button style and position

Step 4: Add a Heading Widget

17. Click the + icon in the empty popup canvas to add a new section or use the existing blank area
18. From the Elementor widget panel on the left, drag a Heading widget into the popup
19. Type your popup title (e.g., ‘Get In Touch’, ‘Send Us a Message’, or ‘Request a Free Consultation’)
20. Style the heading: choose font size, weight, color, and alignment to match your brand

Step 5: Add the Elementor Form Widget

21. From the Elementor widget panel, search for ‘Form’ and drag the Form widget below the Heading
22. In the Content tab of the Form widget, configure your form fields:

       – Field 1: Label = Full Name, Type = Text, Required = Yes

       – Field 2: Label = Email Address, Type = Email, Required = Yes

       – Field 3: Label = Phone Number, Type = Tel, Required = No

       – Field 4: Label = Message, Type = Textarea, Required = Yes

23. Add additional fields as needed (Company Name, Subject, Service Interest, etc.)
24. Under Submit Button, change the button label to ‘Send Message’ or ‘Submit Enquiry’

Step 6: Configure Form Submission Settings

25. In the Actions After Submit section of the Form widget, add the Send Email action
26. Configure the admin notification email: set To (your email address), Subject (e.g., ‘New Contact Form Submission’), and Message (include field shortcodes)
27. Optionally add the Email 2 action to send a confirmation email to the submitter using the Email field shortcode in the To field
28. Set the Success Message that appears after form submission (e.g., ‘Thank you! We will be in touch within 24 hours.’)
29. Optionally configure a Redirect URL if you want to send the submitter to a Thank You page after submission

Step 7: Style the Form and Popup

30. Click the Style tab of the Form widget to customize field appearance: background color, border style, padding, focus border color
31. Style the submit button: background color, text color, hover state, border radius, and padding
32. Return to the popup-level styling (Settings gear icon) to set the popup background color and padding
33. Optionally add a background image or gradient to the popup background for a richer visual appearance

Step 8: Configure Publish Settings — Display Conditions

34. Click Publish in the top right corner of the popup editor
35. A settings panel will appear — first configure Display Conditions
36. Click Add Condition to define which pages show this popup
37. Select ‘Entire Site’ to make the popup available everywhere, or select specific pages/post types for targeted display
38. Display conditions determine where the popup CAN appear — triggers determine WHEN it actually opens

Step 9: Configure the Trigger — On Click

39. In the popup publishing settings, click the Triggers tab
40. Click On Click trigger and note the CSS ID shown (e.g., #elementor-popup-modal-btn-1) — this is the link you will use on buttons to open this popup
41. Alternatively, note the popup’s Template ID number from the URL in your browser while editing the popup

Step 10: Add a Contact Button to Your Page

42. Close the popup editor and navigate to the page where you want to add the ‘Contact Us’ button
43. Edit the page with Elementor and add a Button widget
44. Set the button text (e.g., ‘Contact Us’, ‘Get In Touch’, ‘Request a Quote’)
45. In the Button widget’s Link field, type # and then add the popup trigger URL
46. Alternatively, under the button’s Advanced tab > CSS ID field, add the trigger ID provided by the On Click popup trigger
47. The simplest and most reliable method: in the button’s Link field, type: #elementor-popup-modal-btn-[yourpopupID]
48. Click Update to save the page — the button will now open the popup contact form when clicked

Step 11: Configure Advanced Rules (Optional)

49. Return to the popup editor (Templates > Popups > edit your popup)
50. In the Advanced tab of the popup publishing settings, configure frequency rules:

       – Don’t show popup to users who already submitted the form

       – Show popup a maximum of X times total per visitor

       – Don’t show popup if it was dismissed within the last X days

51. These rules prevent the popup from appearing repeatedly to visitors who have already engaged or who have deliberately closed it

Step 12: Test the Popup Contact Form

52. Open your website page in an incognito browser window
53. Click the Contact button you added and verify the popup opens correctly
54. Fill in all form fields and click submit
55. Verify the success message appears after submission
56. Check the admin email inbox to confirm the notification email arrived
57. Verify the form submission appears in WordPress > Elementor > Form Submissions
58. Test on mobile by opening the page on a smartphone and verifying the popup is comfortably usable

Elementor Popup Trigger Types: Complete Reference

Here is a complete reference of all available popup trigger types and their ideal applications:

Use Cases for Popup Contact Forms

Here is a practical reference of real-world popup contact form applications and configurations:

Frequently Asked Questions (FAQs)

1. Does Elementor Popup Builder Require Elementor Pro?

Yes. The Popup Builder is an Elementor Pro exclusive feature and is not available in the free version of Elementor. Specifically, it is included in the Advanced Solo plan ($99/year for 1 site) and all higher Elementor Pro plans — the Advanced plan (3 sites) and Agency plan. The basic Essential plan also does not include Popup Builder. If you have an existing Elementor Pro subscription, check your plan level to confirm popup builder access. The free Form widget that you place inside the popup also requires Elementor Pro, as it is a Pro-only widget.

2. How Do I Trigger a Popup Contact Form by Clicking a Button in Elementor?

To trigger an Elementor popup from a button click, you use the On Click trigger in the popup’s publishing settings. After enabling the On Click trigger, Elementor provides a popup trigger link or CSS ID. In the Button widget that should open the popup, enter the popup trigger link in the button’s Link field. The standard format is a hash link referencing the popup’s CSS ID provided in the On Click trigger settings. When a visitor clicks this button, Elementor’s JavaScript detects the click and opens the designated popup. Importantly, the Display Conditions must include the page where the button appears, otherwise the popup will be configured but will not actually load on that page.

3. Can I Add Multiple Triggers to a Single Elementor Popup?

Yes. Elementor’s Popup Builder allows you to configure multiple trigger types simultaneously for a single popup. For example, a contact form popup can be set to open both via On Click (when a visitor clicks a button) and via Exit Intent (when a visitor shows abandonment behavior). The popup will open in response to whichever trigger fires first. This multi-trigger approach maximizes the opportunities for visitor engagement while keeping the popup experience relevant — the contact form is available to proactively interested visitors (via button click) and also serves as a recovery mechanism for departing visitors (via exit intent).

4. Can I Connect the Popup Contact Form to My CRM or Email Marketing Platform?

Yes. Elementor Pro’s Form widget inside your popup supports direct integrations with a wide range of CRM and email marketing platforms — including HubSpot, ActiveCampaign, Mailchimp, ConvertKit, Drip, GetResponse, Mailster, and more. After form submission, the contact’s information is automatically sent to your connected platform, creating a new contact or updating an existing one. You can also use webhooks for custom integrations with tools not in the native integration list. This means every popup contact form submission flows directly into your lead management and marketing automation workflows without any manual data entry.

5. Will the Popup Contact Form Appear on Mobile Devices?

Yes. Elementor popup contact forms are fully responsive and work on mobile devices. Elementor’s responsive editor allows you to independently configure the popup’s appearance on desktop, tablet, and mobile — adjusting width, padding, font sizes, and layout for each breakpoint separately. For mobile specifically, it is recommended to set the popup width to 90–100% of the viewport, increase field font sizes for easier typing, and ensure the submit button is large enough for comfortable tapping. You can also choose to disable specific popup triggers on mobile — for example, keeping the On Click trigger active on mobile while disabling Exit Intent (which does not work reliably on mobile devices due to the absence of a traditional cursor).

Conclusion

A popup contact form is one of the highest-impact improvements you can make to any business website. By making your contact opportunity available wherever visitors are on your site — appearing on demand when a visitor clicks your CTA, sliding in after they scroll through a blog post, or appearing as a last-chance opportunity when they show exit intent — you capture significantly more enquiries from the same traffic compared to a static, navigation-dependent Contact page.

Elementor Pro’s Popup Builder makes building this experience completely accessible. With a drag-and-drop design canvas that gives you complete visual control, six powerful trigger options for precise behavioral targeting, smart display conditions to ensure contextual relevance, advanced suppression rules to prevent visitor annoyance, and full integration with Elementor’s Form widget for professional form functionality — everything you need to create beautiful, effective popup contact forms is available within your existing Elementor Pro license.

The On Click trigger, in particular, makes creating button-triggered popup contact forms incredibly intuitive: design your popup, enable the On Click trigger, copy the trigger link, paste it into your button’s link field, and the experience is live. No third-party popup plugin required. No coding. No compatibility concerns.

If you already have Elementor Pro on your plan level that includes the Popup Builder, open Templates > Popups today, build your first popup contact form, and put your contact opportunity exactly where your visitors already are.