Philipp Stracker

Tim Strifler

Jenn

After the plugin is activated, the Visual Builder displays a new tab called “Popup” in the Section Settings modal. In the “Popup” tab, you can turn a regular Section into a Popup!
It’s super simple, as you can see on the plugins Demo Page: <a href="https://divimode.com/divi-popup/demo/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">divimode.com/divi-popup/demo</a>
ℹ️ How it works
First, activate the plugin (no configuration needed!)
<ol>
<li>Open up your Visual Builder and edit a Section – you’ll see a new “Popup” tab in the Section Settings.</li>
<li>Toggle the option “This is a Popup” and set the “Popup ID” to something (e.g., “<code>newsletter-optin</code>“). Close the Section Settings.</li>
<li>Add a Button Module somewhere else on the page and set the “Link URL” to your Popup ID, with a leading “#” hash (e.g. “<code>#newsletter-optin</code>“)</li>
<li>That’s all. Save the page and exit the Visual Builder! Click on the button, and you’ll see your Popup. Congratulations!</li>
</ol>
⭐️ Additional details
Check out the <a href="https://divimode.com/divi-popup/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">Plugin website</a> for more details. You’ll find:
<ul>
<li>Examples</li>
<li>CSS class options</li>
<li>JS API documentation</li>
<li>WP filter documentation</li>
</ul>
Tested in all major browsers on Windows and Mac: Chrome, Firefox, Safari, IE 11, Edge!
Popups for Divi Course
During the past years, we’ve added a ton of features and have created a stable and powerful marketing plugin.
To celebrate the anniversary, we have created a six-day course that teaches you everything about the plugin. It walks you through the basics of creating your first Popup, shows possible ways to customize your Popup layouts and goes into advanced techniques and usages of the plugin.
<blockquote>
“The instruction emails really helped me to understand how to use the plugin correctly!”
</blockquote>
The course is available in your wp-admin Dashboard right after you install and activate the plugin. Check out the screenshots to see the form. Also, have a look in the FAQ section, if you want to disable this feature.
🥳 Want more?
If you want to get the most out of Divi, you need to have a look at <a href="https://divimode.com/divi-areas-pro/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">Divi Areas Pro</a> to get additional features:
<blockquote>
<ul>
<li>An admin UI to create and configure your popups</li>
<li>Choose between 4 Area Types: Popup, Inline, Fly-in, Hover</li>
<li>A beautiful UI that blends in perfectly with Divi</li>
<li>Add advanced triggers to your Areas:
<ul>
<li>On click</li>
<li>On hover</li>
<li>On scroll</li>
<li>After delay</li>
<li>On Exit</li>
</ul>
</li>
<li>Customize the Area Display
<ul>
<li>Show on certain pages</li>
<li>Show on certain devices</li>
<li>Show for certain user roles or guests</li>
</ul>
</li>
<li>Customize Area Behavior
<ul>
<li>Show/Hide the Close button</li>
<li>Display the Area once per hour, day, week, …</li>
</ul>
</li>
<li>Flexible position for Inline Areas
<ul>
<li>Replace/extend the page header</li>
<li>or Footer</li>
<li>or Comment section</li>
<li>or actually any Divi section inside the page content</li>
</ul>
</li>
<li>It comes with an extended version of the JS API</li>
<li>Great documentation built into the plugin and an online knowledge base</li>
<li>and much more…</li>
</ul>
👉 <a href="https://divimode.com/divi-areas-pro/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">Learn more about Divi Areas Pro</a> (with screenshots!)
</blockquote>

Popups for Divi

I would request to improve it constantly, thank you 

Great Plugin


I inherited a client site with 4 other popup builder plugins installed. None worked after I updated Divi theme to its latest version. This plugin worked very well and had good documentation, which was helpful because it's a smart but non-obvious way to add and design popups in the Divi visual editor.



One area for improvement is built-in popup templates to choose from, such as borders, modal background designs (stripes), etc.


It works well, very easy and smart

A quick and easy way to create Popup layers inside the Divi Visual Builder!

PlugPress

Fahim Reza

WPPaw

Divi Torque

DiviEpic

M. Asif Hossain

DiviPeople by PlugPress

Contact Form 7 is rock-solid but plain. CF7 Mate fills in the parts most people end up writing CSS or shopping around for: a clean visual styler that lives inside your page builder, an AI generator that writes a working CF7 form from a one-sentence description, and a few extra field types CF7 doesn’t ship — star ratings, range sliders, an international phone field.
Nothing replaces CF7. You still build and manage forms in the regular CF7 editor. CF7 Mate just makes the result look the way you want and adds the things power users keep asking for.
Works with Divi 4 & 5, the WordPress block editor, Elementor, and Bricks.
<a href="https://cf7mate.com" rel="nofollow ugc">Product site</a> · <a href="https://cf7mate.com/docs" rel="nofollow ugc">Documentation</a> · <a href="https://cf7mate.com/pricing" rel="nofollow ugc">Pricing</a> · <a href="https://github.com/plugpressco/cf7-styler-for-divi" rel="nofollow ugc">GitHub</a>
<h4>AI Form Generator (free)</h4>
Describe the form you want in plain English — “a booking form with name, date, time slot, and a notes box” — and CF7 Mate writes the Contact Form 7 markup for you. The result is a normal CF7 form you can save, edit field-by-field, or extend with any other CF7 plugin. There’s no proprietary format and no lock-in.
You bring your own OpenAI (or compatible) API key. Generation costs a fraction of a cent per form, and your key is stored only in your own WordPress database.
Useful for contact forms, booking forms, surveys, NPS questionnaires, quote requests, job applications, and anything else you’d normally build by hand.
<h4>Visual styling that lives in your builder</h4>
Open a CF7 form inside Divi, Elementor, Bricks, or the WordPress block editor and you get the same point-and-click styling controls you already use for the rest of your page — colors, typography, spacing, focus states, responsive breakpoints. No CSS file to maintain, no shortcode to remember.
The integrations are real builder modules, not generic shortcode wrappers, so they pick up your theme’s global colors, presets, and breakpoints automatically.
<h4>Extra field types CF7 doesn’t ship</h4>
<ul>
<li>Star rating for reviews, feedback, and CSAT-style questions.</li>
<li>Range slider for budgets, quantities, and quote calculators.</li>
<li>International phone number with a country flag picker and dial-code prefixing.</li>
<li>Heading, separator, image, and icon decorative elements to break up long forms.</li>
</ul>
Each one is registered as a real CF7 form tag — the values land in your notification emails like any built-in field.
<h4>Grid layout for CF7</h4>
Arrange fields into responsive multi-column rows so your forms don’t look like a stack of inputs on desktop. Per-breakpoint column counts mean a 3-column lead form on desktop still stacks cleanly on phones.
<h4>Pro features</h4>
The Pro plan (<a href="https://cf7mate.com/pricing" rel="nofollow ugc">cf7mate.com/pricing</a>) adds the heavyweight features most form-building plugins charge extra for:
<ul>
<li>Multi-step forms — split long forms into a guided wizard so visitors don’t bounce.</li>
<li>Conditional logic — show, hide, or skip fields and steps based on what the user enters.</li>
<li>Form entries — save every submission to your own WordPress database with search, filter, and CSV export. Never lose a lead to a missed email.</li>
<li>Form analytics — per-form views, submissions, and conversion rate, stored locally, no third-party tracker.</li>
<li>Form scheduling — open and close any form on a date/time window with a custom closed-state message.</li>
<li>Conditional email routing — send notifications to different recipients based on what the user picked.</li>
<li>Save and continue later — let visitors resume long forms from an email link.</li>
<li>Style presets — save a styled form as a reusable preset and apply it to other forms in one click.</li>
<li>White label (Agency plan) — replace CF7 Mate branding with your own for client sites.</li>
</ul>
Everything stays inside the standard CF7 workflow. Pro doesn’t fork CF7 or hide your data — entries live in your database, schedules in post meta, analytics in your database.
<h4>Who this is for</h4>
Anyone who uses Contact Form 7 and wants modern styling, smarter forms, or both. We hear most often from agencies and freelancers building branded forms for clients, service businesses capturing leads, and event organizers running registration windows.
<h4>Privacy</h4>
The free plugin sends nothing off your site. The AI generator sends only your design prompt (not user submissions) to the AI provider you configure. The Pro license check exchanges your license key with our licensing server — no form data, no submissions. Form Entries stores submissions only in your own database.
<h4>Source</h4>
The free plugin is open source: <a href="https://github.com/plugpressco/cf7-styler-for-divi" rel="nofollow ugc">github.com/plugpressco/cf7-styler-for-divi</a>. Issues and PRs welcome.

CF7 Mate – AI Form Builder, Styler & Multi-Step Forms for Contact Form 7

Contact Form 7 add-on with an AI form generator, visual styling for every major page builder, and extra field types.

Popups for Divi vs CF7 Mate – AI Form Builder, Styler & Multi-Step Forms for Contact Form 7