Elementor Popup doesnt run with Contact Form 7 #7798

alfredo49 · 2019-04-09T09:41:35Z

Prerequisites

I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
The issue still exists against the latest stable version of Elementor.

Description

i put a contact form 7 in popup content, popup runs well but when the form is submitted, popup is closed and page is redirected to https://www.mipage.com/#wpcf7-f297-o1 the user does not know if the submission of the form has been successful or there is some type of error

Steps to reproduce

Isolating the problem

This bug happens with only Elementor plugin active (and Elementor Pro).
This bug happens with a default WordPress theme active.
I can reproduce this bug consistently using the steps above.

Environment

System Info

``` ```

lacccci · 2019-04-09T12:24:01Z

@alfredo49

Hi Alfredo

How do you close the popup automatically after press the submit/send etc. Contact 7 button?

alfredo49 · 2019-04-10T07:30:01Z

When you click Submit button (CF7) even if the form has errors in its fields, this ajax errors arent notified.. popup is closed automatically and you are redirected to https://www.mipage.com/#wpcf7-f297-o1, the popup should not be closed automatically , you should be closed clicking to close or after a number of seconds that you define how it happens in other plugins as "popup maker", but always when the submit is successful

bainternet · 2019-04-10T09:58:09Z

@alfredo49

we can't replicate,
Please contact our support at support @elementor.com for guidance in resolving this issue and mention that you were directed by me and reference this issue.

thanks.

unclerom · 2019-04-24T22:34:00Z

@bainternet I have this same issue and also if attempting to redirect from CF7 inside elementor popup the redirect fails and just closes popup and redirects to /#wpcf7-f297-o1 no validation notice, nothing

xtreamprince · 2019-05-18T09:10:02Z

same issue, please someone fix this. for reference check out - piidm, click on download brocher and syllabus.

xtreamprince · 2019-05-18T09:12:33Z

@bainternet please check this out

juancmaldonado · 2019-05-21T08:00:52Z

Hey There. same issue, has someone found the solution?

drinkmaker · 2019-05-27T14:38:12Z

Hi all,
Temporary solution:
After opening the popup we need to re-initialize Contact 7 Form
wpcf7.initForm( jQuery('.wpcf7-form') );
After that, the Ajax will work again.

xtreamprince · 2019-06-07T07:48:12Z

@drinkmaker how can we do that?

xtreamprince · 2019-06-07T07:49:27Z

@elementorbot reopen this ticket please

jghaanstra · 2019-06-18T20:11:16Z

Running into the same issue. A fix would be much appreciated.

@bainternet , could this issue be reopened. It's easy to reproduce. Create a pop-up, add a CF7 form using a shortcode widget. Open the popup for instance with a button. Press the submit button on the CF7 form without filling in the form and the pop will close. Then reopen the popup and you will see the field errors. There does not seem to be a way to prevent the pop-up from closing.

Zunichi · 2019-06-26T22:11:10Z

Why is this issue still not re-opened?? I am having the exact same problem.

Zunichi · 2019-06-27T21:53:56Z

[UPDATE] I submitted a support ticket and this is what they said:

We reviewed several similar issues, unfortunately, the Popup builder is not optimized to be populated with third-party forms so far. The developers are thinking about an option which will avoid conflicts. In the meantime, you can use the Form widget.

drinkmaker · 2019-07-13T00:49:13Z

@drinkmaker how can we do that?

Add to JavaScript something like:

// Extra initialisation for CF7 in Elementor popups.
    jQuery( 'body' ).on( 'click', function () {
        jQuery( 'form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
            wpcf7.initForm( jQuery( this ) );
            jQuery( this ).addClass( 'elementor' );
        } );
    } );

Zunichi · 2019-07-13T01:13:14Z

@drinkmaker how can we do that?

Add to JavaScript something like:

// Extra initialisation for CF7 in Elementor popups.
    jQuery( 'body' ).on( 'click', function () {
        jQuery( 'form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
            wpcf7.initForm( jQuery( this ) );
            jQuery( this ).addClass( 'elementor' );
        } );
    } );

Tested. This works. Thank you!!

hazelnutz77 · 2019-08-13T17:03:11Z

@drinkmaker @Zunichi Hey guys, so I've tried this fix a few different ways....apparently incorrectly as I'm still redirecting after failed validation.

so I tried adding this to the themes functions.php file....

function wpb_hook_javascript() {
    ?>
        <script>
              jQuery( 'body' ).on( 'click', function () {
                  jQuery( 'form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
                      wpcf7.initForm( jQuery( this ) );
                      jQuery( this ).addClass( 'elementor' );
                  } );
              } );
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

also just tried using a code snippets plugin to insert this everywhere...

// Extra initialisation for CF7 in Elementor popups.
    jQuery( 'body' ).on( 'click', function () {
        jQuery( 'form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
            wpcf7.initForm( jQuery( this ) );
            jQuery( this ).addClass( 'elementor' );
        } );
    } );```

both to no avail....could you possibly elaborate a little more on specifically how to inject this to run after popup is opened?

Thank You

Zunichi · 2019-08-13T17:42:00Z

@drinkmaker @Zunichi Hey guys, so I've tried this fix a few different ways....apparently incorrectly as I'm still redirecting after failed validation.

so I tried adding this to the themes functions.php file....
function wpb_hook_javascript() {
    ?>
        <script>
              jQuery( 'body' ).on( 'click', function () {
                  jQuery( 'form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
                      wpcf7.initForm( jQuery( this ) );
                      jQuery( this ).addClass( 'elementor' );
                  } );
              } );
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');
also just tried using a code snippets plugin to insert this everywhere...
// Extra initialisation for CF7 in Elementor popups.
    jQuery( 'body' ).on( 'click', function () {
        jQuery( 'form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
            wpcf7.initForm( jQuery( this ) );
            jQuery( this ).addClass( 'elementor' );
        } );
    } );```
both to no avail....could you possibly elaborate a little more on specifically how to inject this to run after popup is opened?

Thank You

I placed it in the built-in field that my theme had for custom javascript which is being inserted before the </head> tag.

drinkmaker · 2019-08-14T08:22:53Z

Hello, @hazelnutz77
Here is a tidier and more versatile piece of code:

/**
 * Add extra initialisation for Contact 7 Form in Elementor popups.
 **/
function prefix_elementor_contact7_ini() {
    ?>
    <script type='text/javascript'>
        /** Document ready. We are waiting for the full page load. */
        jQuery( document ).ready( function() {
            
            /** Click on link or button that opens the popup. It contain "#elementor-action" in href. */
            jQuery( document ).on( 'click', "a[href*='#elementor-action']", function () {
            
                /** Let's give the elementor some time to animate popup. */
                setTimeout( function() { 
                    
                    /** Find all Contact 7 forms inside elementor popup. */
                    jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function ( index ) {
                        
                        wpcf7.initForm( jQuery( this ) ); // Extra initialisation for contact 7 form.
                        jQuery( this ).addClass( 'elementor' ); // Mark our form with class '.elementor' so as not to do the same thing.
                        
                    } );
                    
                }, 800 ); // END Timeout.
            
            } ); // END link click.
            
        } ); // END Document ready.
    </script>
    <?php
}
add_action( 'wp_footer',  'prefix_elementor_contact7_ini' );

Add this to your functions.php file.

hazelnutz77 · 2019-08-14T14:06:32Z

@drinkmaker Thank you so much brother. This one works flawlessly !

montagal · 2019-10-17T07:27:43Z

@drinkmaker Thank You!

Contributolo · 2019-10-22T13:09:24Z

Same problem here. Thank you drinkmaker.

Contributolo · 2019-10-22T13:10:22Z

Please reopen...

bainternet · 2019-10-23T06:19:21Z

in Elementor Pro 2.7 we added popup events so you can initialize JavaScript-based elements when a popup is shown like CF7 forms, ex:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
	jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( ( index, formElement ) => { 
		// store from i
		$cf7From = jQuery( formElement );
		// re-init for cf7 form.
		wpcf7.initForm( $cf7From );
		// add class to avoid running again
		$cf7From.addClass( 'elementor' );
	} );
} );

to read more about popup events:
https://developers.elementor.com/elementor-pro-2-7-popup-events/

drinkmaker · 2019-10-23T08:29:48Z

@bainternet perfect solution!

Contributolo · 2019-10-23T08:40:30Z

Thank you.

alfredo49 · 2019-10-25T11:16:26Z

Where you put that js?? who is the best way?
Using HTML a elementor block in the page?
Code Snippets plugin whit that js?

klaudgrave · 2019-10-27T20:05:21Z

@alfredo49 if you're using a child theme - put it in your main.js or script.js or whatever file your child theme is using for scripts.
If your aren't using a child theme (though it really is the best way) - you should use a plugin that would "emulate" it for your - something like Simple Custom CSS and JS by SilkyPress.com.

Basically you want this snippet to be on every page that has CF7 forms in popup.

pcarantes · 2021-04-08T19:55:47Z

jQuery( document ).on( 'elementor/popup/show', () => {
wpcf7.init(jQuery(".wpcf7-form")[0]);
});

This code worked for me finally!
This worked for me but when I got more than one pop-up of the elementor I have problems. is it possible for the code to apply this condition in a specific pop-up?

klaudgrave · 2021-04-08T23:27:30Z

This worked for me but when I got more than one pop-up of the elementor I have problems. is it possible for the code to apply this condition in a specific pop-up?

@pcarantes just use it like this:

jQuery( document ).on( 'elementor/popup/show', (event, id, instance) => {
 if (id === your-popup-id) {  // for example (id === 123)
 /* all your code goes here */
 }
});

'your-popup-id' - is the ID of the popup record in WP, you can see it in the address bar when you click Edit on popup (i.e. 'wp-admin/post.php?post=1234&action=edit' - 1234 is the id of the popup)

pcarantes · 2021-04-09T15:43:03Z

great, everything worked out. Thank you very much Em qui., 8 de abr. de 2021 às 20:27, Eugene Fedorov < ***@***.***> escreveu:

…

jQuery( document ).on( 'elementor/popup/show', () => { wpcf7.init(jQuery(".wpcf7-form")[0]); }); This code worked for me finally! This worked for me but when I got more than one pop-up of the elementor I have problems. is it possible for the code to apply this condition in a specific pop-up? use it like this: jQuery( document ).on( 'elementor/popup/show', (event, id, instance) => { if (id == 'your-popup-id') { /* all your code here */ } }); 'your-popup-id' - is the ID of the popup record in WP, you can see it in the address bar when you click Edit on popup (i.e. 'wp-admin/post.php?post=1234&action=edit' - 1234 is the id of the popup) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#7798 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABY7LKMMV2UNSKYU2ROUCTTTHY3XLANCNFSM4HEQIGSQ> .

jolaviska · 2021-04-09T22:46:19Z

jQuery( document ).on( 'elementor/popup/show', () => {
wpcf7.init(jQuery(".wpcf7-form")[0]);
});

This code worked for me finally!

Doesn't work for me. What would be another work-around?

stevethewebsiteguy · 2021-04-11T14:04:08Z

I'm trying to add this script to a popup but can't get it to trigger: <script src="https://calculator.roofr.com/roofr-calculator.js" cid="4235"></script>

Not sure how to do this. Any help would be great.

VIPbyte · 2021-04-27T15:34:31Z

Figured I would share my workaround for dummies. Hope it helps someone.

I added this code to the bottom of functions.php in my child theme:
It doesn't close the popup until it's validated, once sent, it redirects to a confirmation page.

// Stop Elementor Popup from Closing after CF7 submission with no validation
function vipbyte_elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
jQuery( document ).on( 'elementor/popup/show', () => {
    for(var i = 0; i < jQuery(".wpcf7-form").length ; i++)    {
     wpcf7.init(jQuery(".wpcf7-form")[i]);   
    }
});

</script>
<?php
}
add_action( 'wp_footer',  'vipbyte_elementor_popup_cf7_fix' );

// Redirect to submission acknowledgment page after successfull submission
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://www.example.com/thank-you/';
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'redirect_cf7' );

jolaviska · 2021-04-30T19:26:32Z

Figured I would share my workaround for dummies. Hope it helps someone.

I added this code to the bottom of functions.php in my child theme:
It doesn't close the popup until it's validated, once sent, it redirects to a confirmation page.

// Stop Elementor Popup from Closing after CF7 submission with no validation
function vipbyte_elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
jQuery( document ).on( 'elementor/popup/show', () => {
    for(var i = 0; i < jQuery(".wpcf7-form").length ; i++)    {
     wpcf7.init(jQuery(".wpcf7-form")[i]);   
    }
});

</script>
<?php
}
add_action( 'wp_footer',  'vipbyte_elementor_popup_cf7_fix' );

// Redirect to submission acknowledgment page after successfull submission
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://www.example.com/thank-you/';
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'redirect_cf7' );

That worked like charm, thanks!

adcadesigns · 2021-07-09T09:58:38Z

Figured I would share my workaround for dummies. Hope it helps someone.

I added this code to the bottom of functions.php in my child theme:
It doesn't close the popup until it's validated, once sent, it redirects to a confirmation page.

// Stop Elementor Popup from Closing after CF7 submission with no validation
function vipbyte_elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
jQuery( document ).on( 'elementor/popup/show', () => {
    for(var i = 0; i < jQuery(".wpcf7-form").length ; i++)    {
     wpcf7.init(jQuery(".wpcf7-form")[i]);   
    }
});

</script>
<?php
}
add_action( 'wp_footer',  'vipbyte_elementor_popup_cf7_fix' );

// Redirect to submission acknowledgment page after successfull submission
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://www.example.com/thank-you/';
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'redirect_cf7' );

this works for me, but having a lot of popup modal forms everytime it sends it gets send twice or 3x.
example: I fill up the first popup form, it works, then I fill up another popup form from the same page, then the 3rd one. the last form (not in a popup) gets all the popup sent 3x... any fix, please. @VIPbyte thank you

simarnrandhawa · 2021-07-13T17:18:34Z

I have tried everything from above, but nothing works for me. is it still opened?

Stephenraj1997 · 2021-10-27T07:29:32Z

Thanks. The below code works fine after adding in the function.php file.

add_action( 'wp_footer', 'elementor_popup_cf7_fix' );

function elementor_popup_cf7_fix() { ?>
<script type='text/javascript'>
jQuery( document ).on( 'elementor/popup/show', () => {
for(var i = 0; i < jQuery(".wpcf7-form").length ; i++) {
wpcf7.init(jQuery(".wpcf7-form")[i]);
}
});
</script>

broomcorp · 2022-06-24T14:29:54Z

I have same problem on pages like that (by clicking on "Нашли дешевле"). The contact form is in the popup elementor. After clicking on the submit button, the page reloads. Tried all the methods above. Nothing helped me.

klaudgrave · 2022-06-24T14:40:02Z

I have same problem on pages like that (by clicking on "Нашли дешевле"). The contact form is in the popup elementor. After clicking on the submit button, the page reloads. Tried all the methods above. Nothing helped me.

You can see an error in the console after opening mentioned popup

Uncaught TypeError: wpcf7.init is not a function

Replace

jQuery( document ).on( 'elementor/popup/show', () => {

    for(var i = 0; i < jQuery(".wpcf7-form").length ; i++)    {

     wpcf7.init(jQuery(".wpcf7-form")[i]);   

    }

});

with

jQuery( document ).on( 'elementor/popup/show', () => {

    for(var i = 0; i < jQuery(".wpcf7-form").length ; i++)    {

     wpcf7.initForm(jQuery(".wpcf7-form")[i]);   // method changed to initForm here

    }

});

broomcorp · 2022-06-24T14:55:01Z

You can see an error in the console after opening mentioned popup

Uncaught TypeError: wpcf7.init is not a function

Replace

This code works, but after this the contact form throws an error after filling on the first attempt to submit. If you click a second time, the data is sent successfully. Why?

klaudgrave · 2022-06-24T15:18:36Z

This code works, but after this the contact form throws an error after filling on the first attempt to submit. If you click a second time, the data is sent successfully. Why?

The current live version worked fine for me on the first attempt. I'm not sure which error you're referring to and if it's JS-related or an error message shown by CF7, but I don't think it's related to Elementor's popups anymore.

mayday295 · 2022-07-11T19:31:14Z

Edit FIXED: Looks like when the script ran just inside the popup element it threw the validation error twice, but running on the actual page seems to have fixed it.

So the following script works great, but for some reason the "missing fields" error message is showing two or three times on the page under each missing/unvalidated field. See screenshot here: Screenshot

Single popup button on the page, and shows on first unsuccessful submission, with any missing fields. Any way to fix that?

<script type='text/javascript'> jQuery( document ).on( 'elementor/popup/show', () => { wpcf7.init(jQuery(".wpcf7-form")[0]); }); </script>

xzax · 2022-09-13T13:34:50Z

Issue/bug still continue even with the latest update. was using the CF7 - form in popup could not make it work. it is simply closed on press of submit button.

A genuine solution/workaround would be helpful for at least PRO version.

IonTulbure · 2023-03-27T13:16:45Z

It is march 2023 - this bug still persists. Any CF7 in an Elementor (Pro) Popup will reload the page upon submission.

fvonberg · 2023-08-13T08:40:17Z

I had to slightly update the script, to work with the actual version of Elementor and Contact Form 7. Place a HTML Snippet in your Popup with the following code:

<script type='text/javascript'>

    jQuery( document ).ready( function() {

        jQuery( document ).on( 'click', "a[href*='#elementor-action']", function () {

            setTimeout( function() { 

                jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function ( index, element ) {

                    wpcf7.init( element ); 
                    jQuery( this ).addClass( 'elementor' ); 

                } );

            }, 800 ); 

        } ); 

    } ); 
</script>
<!-- replace this with the contact form snippet from contact form 7 -->
[contact-form-7 id="8bdd3dd" title="Your-Contact-Form"]

akashadroitminds58 · 2023-09-06T11:17:29Z

<script type='text/javascript'> jQuery( document ).ready( function() { jQuery( document ).on( 'click', "a[href*='#elementor-action']", function () { setTimeout( function() { jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function ( index, element ) { wpcf7.init( element ); jQuery( this ).addClass( 'elementor' ); } ); }, 800 ); } ); } ); </script>
[contact-form-7 id="8bdd3dd" title="Your-Contact-Form"]

Hi @fvonberg , this is working fine. However, after putting this script, I am encountering two spinners.

fvonberg · 2023-09-08T05:01:24Z

Hi @akashadroitminds58 ,
do you have any JavaScript Error in the developer console of your Browser?
Otherwise the spinner might come from some ControlForm7 configuration, if the form is rendered correctly.

doominio · 2023-10-24T19:10:24Z

do you have any JavaScript Error in the developer console of your Browser?
Otherwise the spinner might come from some ControlForm7 configuration, if the form is rendered correctly.

@fvonberg thanks for the code, it really fixes the issue!!! I'm also getting two spinners, but I kinda like it anyway...

fvonberg · 2023-11-17T08:18:24Z

@doominio @akashadroitminds58,
I also had the two spinners, if I open up the form a second time. I added an automatic close and reset to the script, maybe it helps:

<script type='text/javascript'>
var wpcf7FormElement;

jQuery( document ).ready( function() {

  jQuery( document ).on( 'click', "a[href*='#elementor-action']", function () {

    setTimeout( function() {

      jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function ( index, element ) {

        wpcf7FormElement = element;

        wpcf7.init( element );
        wpcf7cf.initForm(jQuery('.wpcf7-form'));

        jQuery( this ).addClass( 'elementor' );

        wpcf7FormElement.addEventListener( 'wpcf7mailsent', function( event ) {
          elementorProFrontend.modules.popup.closePopup( {}, event );
          if (wpcf7FormElement) {
            wpcf7.reset(wpcf7FormElement);
            wpcf7FormElement = undefined;
          }
        }, false );
      } );

    }, 800 );

  } );

} );
</script>

caaslu · 2024-01-16T20:34:58Z

Figured I would share my workaround for dummies. Hope it helps someone.

I added this code to the bottom of functions.php in my child theme: It doesn't close the popup until it's validated, once sent, it redirects to a confirmation page.

// Stop Elementor Popup from Closing after CF7 submission with no validation
function vipbyte_elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
jQuery( document ).on( 'elementor/popup/show', () => {
    for(var i = 0; i < jQuery(".wpcf7-form").length ; i++)    {
     wpcf7.init(jQuery(".wpcf7-form")[i]);   
    }
});

</script>
<?php
}
add_action( 'wp_footer',  'vipbyte_elementor_popup_cf7_fix' );

// Redirect to submission acknowledgment page after successfull submission
function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = 'https://www.example.com/thank-you/';
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'redirect_cf7' );

I've been looking to solve this problem for days, this code solved it, thank you very much!

saa20ce · 2024-03-01T04:50:06Z

the 1st of march the bug is still here

haydnbannister · 2024-06-09T06:41:04Z

Hi @fvonberg , this is working fine. However, after putting this script, I am encountering two spinners.

I've solved this by adding this to the page CSS - hides all spinners other than the first.
It's not ideal but it does the job!
.wpcf7-spinner:not(:first-of-type) { display: none !important; visibility: hidden !important; }

rotem925 · 2024-08-03T22:49:14Z

@bainternet this ticket needs to be open again. It's been a few years and still no fix. There is no way to use elementor popups with contact form 7. Please fix this. The solution offered here does not work, this is creating an issue with cf7.

louiswol94 · 2024-08-20T07:04:17Z

<script>
window.addEventListener( 'elementor/popup/show', () => {
    const forms = document.querySelectorAll( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' );

    forms.forEach( ( form ) => {
        wpcf7.init( form );
        form.classList.add( 'elementor' ); // Add class to avoid running again.
    } );
} );
</script>

Can you please try the vanilla JS version?

christianhimmer · 2024-09-02T18:07:17Z

Yes please. It's 2024 and we still have the same problem. Please Mr. Elementor can you fix this?

doominio · 2024-09-28T15:34:47Z

Can you please try the vanilla JS version?

This worked for me, but I also had to add @haydnbannister CSS fix so I wouldn't get multiple spinners.

However, there's another problem. The [_post_title] variable is not passed. I use this for the email subject, so I can reuse the same form in multiple pages and know what it's about.

Any ideas how to make it work?

RastyDen · 2025-01-14T23:56:27Z

I found a solution for the issue where Contact Form 7 doesn't work properly inside Elementor popups.

This solution preserves all CF7 functionality while preventing page refresh.

function add_custom_form_handler() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $(document).on('submit', '.wpcf7-form', function(e) {
            e.preventDefault();
            
            const $form = $(this);
            const formData = new FormData(this);
            formData.append('action', 'process_cf7_form');
            
            $.ajax({
                type: 'POST',
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $form.find('.wpcf7-spinner').addClass('is-active');
                },
                success: function(response) {
                    if(response.success) {
                        if(response.data.message) {
                            $form.find('.wpcf7-response-output')
                                 .attr('class', 'wpcf7-response-output wpcf7-mail-sent-ok')
                                 .html(response.data.message)
                                 .show();
                        }
                        $form[0].reset();
                    } else {
                        if(response.data.message) {
                            $form.find('.wpcf7-response-output')
                                 .attr('class', 'wpcf7-response-output wpcf7-validation-errors')
                                 .html(response.data.message)
                                 .show();
                        }
                    }
                },
                error: function() {
                    $form.find('.wpcf7-response-output')
                         .attr('class', 'wpcf7-response-output wpcf7-validation-errors')
                         .html(wpcf7.messages.fail)
                         .show();
                },
                complete: function() {
                    $form.find('.wpcf7-spinner').removeClass('is-active');
                }
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_custom_form_handler');

// AJAX request handler
function process_cf7_form() {
    if(isset($_POST)) {
        $form_id = isset($_POST['_wpcf7']) ? intval($_POST['_wpcf7']) : 0;
        
        if($form_id) {
            $contact_form = wpcf7_contact_form($form_id);
            
            if($contact_form) {
                $result = $contact_form->submit();
                wp_send_json_success([
                    'message' => $result['message']
                ]);
            }
        }
    }
    
    wp_send_json_error([
        'message' => wpcf7_get_message('mail_sent_ng')
    ]);
}
add_action('wp_ajax_process_cf7_form', 'process_cf7_form');
add_action('wp_ajax_nopriv_process_cf7_form', 'process_cf7_form');

alfredo49 changed the title ~~Elementor Popup dont run with Contact Form 7~~ Elementor Popup doesnt run with Contact Form 7 Apr 9, 2019

bainternet closed this as completed Apr 10, 2019

Contributolo mentioned this issue Oct 22, 2019

Elementor Popup doesnt run with Contact Form 7 #7798 #9385

Closed

Elementor Popup doesnt run with Contact Form 7 #7798

Elementor Popup doesnt run with Contact Form 7 #7798

Comments

alfredo49 commented Apr 9, 2019 • edited Loading

Prerequisites

Description

Steps to reproduce

Isolating the problem

Environment

lacccci commented Apr 9, 2019

alfredo49 commented Apr 10, 2019 • edited Loading

bainternet commented Apr 10, 2019

unclerom commented Apr 24, 2019

xtreamprince commented May 18, 2019 • edited Loading

xtreamprince commented May 18, 2019

juancmaldonado commented May 21, 2019

drinkmaker commented May 27, 2019

xtreamprince commented Jun 7, 2019

xtreamprince commented Jun 7, 2019

jghaanstra commented Jun 18, 2019

Zunichi commented Jun 26, 2019

Zunichi commented Jun 27, 2019

drinkmaker commented Jul 13, 2019 • edited Loading

Zunichi commented Jul 13, 2019

hazelnutz77 commented Aug 13, 2019 • edited Loading

Zunichi commented Aug 13, 2019 • edited Loading

drinkmaker commented Aug 14, 2019

hazelnutz77 commented Aug 14, 2019

montagal commented Oct 17, 2019

Contributolo commented Oct 22, 2019

Contributolo commented Oct 22, 2019

bainternet commented Oct 23, 2019 • edited Loading

drinkmaker commented Oct 23, 2019

Contributolo commented Oct 23, 2019

alfredo49 commented Oct 25, 2019 • edited Loading

klaudgrave commented Oct 27, 2019

pcarantes commented Apr 8, 2021

klaudgrave commented Apr 8, 2021 • edited Loading

pcarantes commented Apr 9, 2021 via email

jolaviska commented Apr 9, 2021

stevethewebsiteguy commented Apr 11, 2021

VIPbyte commented Apr 27, 2021 • edited Loading

jolaviska commented Apr 30, 2021

adcadesigns commented Jul 9, 2021

simarnrandhawa commented Jul 13, 2021

Stephenraj1997 commented Oct 27, 2021

broomcorp commented Jun 24, 2022

klaudgrave commented Jun 24, 2022 • edited Loading

broomcorp commented Jun 24, 2022

klaudgrave commented Jun 24, 2022

mayday295 commented Jul 11, 2022 • edited Loading

xzax commented Sep 13, 2022

IonTulbure commented Mar 27, 2023 • edited Loading

fvonberg commented Aug 13, 2023

akashadroitminds58 commented Sep 6, 2023 • edited Loading

fvonberg commented Sep 8, 2023

doominio commented Oct 24, 2023

fvonberg commented Nov 17, 2023 • edited Loading

caaslu commented Jan 16, 2024

saa20ce commented Mar 1, 2024

haydnbannister commented Jun 9, 2024

rotem925 commented Aug 3, 2024

louiswol94 commented Aug 20, 2024

christianhimmer commented Sep 2, 2024

doominio commented Sep 28, 2024

RastyDen commented Jan 14, 2025 • edited Loading

alfredo49 commented Apr 9, 2019 •

edited

Loading

alfredo49 commented Apr 10, 2019 •

edited

Loading

xtreamprince commented May 18, 2019 •

edited

Loading

drinkmaker commented Jul 13, 2019 •

edited

Loading

hazelnutz77 commented Aug 13, 2019 •

edited

Loading

Zunichi commented Aug 13, 2019 •

edited

Loading

bainternet commented Oct 23, 2019 •

edited

Loading

alfredo49 commented Oct 25, 2019 •

edited

Loading

klaudgrave commented Apr 8, 2021 •

edited

Loading

VIPbyte commented Apr 27, 2021 •

edited

Loading

klaudgrave commented Jun 24, 2022 •

edited

Loading

mayday295 commented Jul 11, 2022 •

edited

Loading

IonTulbure commented Mar 27, 2023 •

edited

Loading

akashadroitminds58 commented Sep 6, 2023 •

edited

Loading

fvonberg commented Nov 17, 2023 •

edited

Loading

RastyDen commented Jan 14, 2025 •

edited

Loading