Contact Form 7 in Elementor Popup Closing on Submit? Here’s the Real Fix

If you use Contact Form 7 inside an Elementor popup, you may face a frustrating issue.
You click submit, the popup closes, and you see no validation error. When you reopen it, errors appear.

This looks like a popup problem. It is not.

This guide walks through the exact issue, failed fixes, and the final working solution. Use it to fix your site fast.

The Problem

You create a form using Contact Form 7 and place it inside a popup built with Elementor.

Expected behavior:

• Submit with errors → show validation messages
• Popup stays open

Actual behavior:

• Click submit → popup closes
• No validation shown
• Reopen popup → errors appear

This creates a poor user experience and drops conversions.

Why This Happens

At first glance, it feels like a popup close trigger issue. Many developers try:

• Blocking click events
• Overriding popup close functions
• Disabling overlay clicks

None of these solve the real problem.

The actual cause

Contact Form 7 JavaScript is not running properly inside the popup.

When CF7 fails to initialize:

• It cannot validate fields
• It cannot use AJAX submission
• The form falls back to normal HTML submit

That triggers:

• Page action or navigation
• Elementor detects it
• Popup closes instantly

So the popup is not the problem.
CF7 is not initialized correctly inside the popup.

Common Failed Fixes (Avoid These)

During troubleshooting, you may try:

1. Blocking popup close events

Using JS like:

event.stopPropagation();

Result:

• Breaks other Elementor features
• Does not fix root issue

2. Overriding Elementor popup functions

Example:

elementorProFrontend.modules.popup.closePopup = function() {};

Result:

• Breaks animations and sliders
• Affects entire site

3. Preventing form submit

Example:

e.preventDefault();

Result:

• Breaks CF7 completely
• Form stops working

4. Removing form action or hash

Result:

• No real impact
• Problem persists

The Correct Fix

You must reinitialize Contact Form 7 when the popup opens.

This ensures CF7 binds its validation and AJAX logic to the form.

Add this script

function ao_cf7_reinitialize_popup() {
    ?>
    <script>
    jQuery(document).on('elementor/popup/show', function() {        document.querySelectorAll('.wpcf7 form').forEach(function(form) {
            if (typeof wpcf7 !== 'undefined') {
                wpcf7.init(form);
            }
        });    });
    </script>
    <?php
}
add_action('wp_footer', 'ao_cf7_reinitialize_popup');

Why This Works

Elementor loads popup content dynamically.
CF7 does not automatically rebind scripts to dynamic content.

This script:

• Detects when popup opens
• Re-initializes CF7
• Enables validation and AJAX submission

Now:

• Validation runs instantly
• No default form submission
• Popup stays open

Result After Fix

You will see:

• Submit with errors → validation shows immediately
• Popup stays open
• No page reload
• Smooth user experience

Optional: Reset Form on Reopen

When users reopen the popup, you may want a clean form.

Add this:

function ao_cf7_reset_popup_form() {
    ?>
    <script>
    jQuery(document).on('elementor/popup/show', function(){
        jQuery('.wpcf7 form').each(function(){
            this.reset();
            jQuery(this).find('.wpcf7-not-valid').removeClass('wpcf7-not-valid');
            jQuery(this).find('.wpcf7-response-output').hide();
            jQuery(this).find('.wpcf7-not-valid-tip').remove();
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'ao_cf7_reset_popup_form');

Optional: Close Popup After Successful Submission

Once the form submits successfully, you can close the popup automatically.

Use this fallback method:

function ao_close_popup_on_success() {
    ?>
    <script>
    document.addEventListener('wpcf7mailsent', function() {        setTimeout(function(){
            jQuery('.dialog-close-button').trigger('click');
        }, 1500);    }, false);
    </script>
    <?php
}
add_action('wp_footer', 'ao_close_popup_on_success');

Why This Method Works Best

• Uses Elementor’s actual close button
• Avoids unreliable API calls
• Works across all setups

Important Best Practices

Keep your setup clean:

• Use default CF7 [submit] button
• Avoid custom JS submit handlers
• Do not mix multiple popup scripts
• Avoid aggressive JS optimization for CF7

Debug Checklist

If your form still fails, check:

• Console errors in browser
• jQuery loading properly
• No JS conflicts from plugins
• Cache or optimization plugins disabled

Final Thoughts

This issue looks complex, but the root cause is simple.

👉 CF7 is not initialized inside Elementor popup

Once you fix that:

• Validation works
• Popup behaves correctly
• User experience improves

This solution is stable, clean, and safe for production.

If you build websites with Elementor and CF7, save this fix. It will save hours of debugging later.