Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Elementor Popup doesnt run with Contact Form 7 #7798

Closed
5 tasks done
alfredo49 opened this issue Apr 9, 2019 · 63 comments
Closed
5 tasks done

Elementor Popup doesnt run with Contact Form 7 #7798

alfredo49 opened this issue Apr 9, 2019 · 63 comments

Comments

@alfredo49
Copy link

alfredo49 commented Apr 9, 2019

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 ``` ```
@alfredo49 alfredo49 changed the title Elementor Popup dont run with Contact Form 7 Elementor Popup doesnt run with Contact Form 7 Apr 9, 2019
@lacccci
Copy link

lacccci commented Apr 9, 2019

@alfredo49

Hi Alfredo

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

@alfredo49
Copy link
Author

alfredo49 commented Apr 10, 2019

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
Copy link
Contributor

@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
Copy link

@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
Copy link

xtreamprince commented May 18, 2019

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

@xtreamprince
Copy link

@bainternet please check this out

@juancmaldonado
Copy link

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

@drinkmaker
Copy link

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
Copy link

@drinkmaker how can we do that?

@xtreamprince
Copy link

@elementorbot reopen this ticket please

@jghaanstra
Copy link

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
Copy link

Zunichi commented Jun 26, 2019

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

@Zunichi
Copy link

Zunichi commented Jun 27, 2019

[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
Copy link

drinkmaker commented Jul 13, 2019

@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
Copy link

Zunichi commented Jul 13, 2019

@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
Copy link

hazelnutz77 commented Aug 13, 2019

@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
Copy link

Zunichi commented Aug 13, 2019

@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
Copy link

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
Copy link

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

@montagal
Copy link

@drinkmaker Thank You!

@Netzlichter
Copy link

Same problem here. Thank you drinkmaker.

@Netzlichter
Copy link

Please reopen...

@bainternet
Copy link
Contributor

bainternet commented Oct 23, 2019

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
Copy link

@bainternet perfect solution!

@Netzlichter
Copy link

Thank you.

@alfredo49
Copy link
Author

alfredo49 commented Oct 25, 2019

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
Copy link

@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.

@martin-lonelyviking
Copy link

People who wonder where to add @bainternet code. You can do the following;
Add an HTML component inside the popup and put this 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 ) {

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

                    } );

                }, 800 ); 

            } ); 

        } ); 
    </script>

And that’s it.

I hope Elementor fix that.

This......!!
Saved me hours... Thank you @abderraouf-safsaf

@paramonaff
Copy link

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/

To this code can add snippet so that the popup automatically closes after the form is successfully submitted.

jQuery('.wpcf7-submit').click(function(event){
	setTimeout(function(){
		if(jQuery('.wpcf7-form').hasClass('sent')){
			elementorProFrontend.modules.popup.closePopup( {}, event );
		}
	}, 1000);
});

@karelles
Copy link

Has anyone rewritten these snippets for gravity forms? Is it as simple as subbing .wpgf-form for .wpcf7-form?
I REALLY need a GF form to run in an Elementor popup. Any other ideas?

@karelles
Copy link

So what I've done to get around the failure of the form to show a confirmation message - I directed it to a page with a confirmation notice and set up a notification that goes to the user with the details of the form they just submitted. Best I could do on short notice.
Still open to javascript/jquery solutions to the problem. There is some money in it, though not a lot.

@mhutch77
Copy link

People who wonder where to add @bainternet code. You can do the following;
Add an HTML component inside the popup and put this 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 ) {

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

                    } );

                }, 800 ); 

            } ); 

        } ); 
    </script>

And that’s it.
I hope Elementor fix that.

This......!!
Saved me hours... Thank you @abderraouf-safsaf

This works great ... can you please add some code to direct to a page with a confirmationmessage after the form is successfully submitted.

@chandresh77
Copy link

i tried using all solution which is provided in this forum inside function.php but problem not resolved yet. when i click send button data get saved but popup is not getting exit page get refresh. kindly help.

@jolaviska
Copy link

New Contact form 7 version 5.4 stopped working with the above JS solutions.

Any new solutions to get this fixed again?

@drinkmaker
Copy link

New Contact form 7 version 5.4 stopped working with the above JS solutions.

Any new solutions to get this fixed again?

Just checked it out. The latest version of Elementor Pro 3.0.10 and Contact Form 7 5.4 works together in a popup, without any additional code.

@marlonruiz
Copy link

marlonruiz commented Mar 10, 2021

Im using Elemento 3.1.1 and CF7 5.4 and not working, with or without script. The popup close when click on contact form submit. When scripts load, an erro from 'wpcf7.initForm is not a function'

@raulopezvi
Copy link

Yea, it is not working. Elementor Pro 3.1.1 and CF7 5.4. "#wpcf7-f10949-o1" in the url

@drinkmaker
Copy link

drinkmaker commented Mar 10, 2021

@marlonruiz, @raulopezvi

Use this code:

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.init( $cf7From );
		// add class to avoid running again
		$cf7From.addClass( 'elementor' );
	} );
} );

wpcf7.initForm replaced by wpcf7.init https://nimb.ws/5ye0Ap

@adshrc
Copy link

adshrc commented Mar 15, 2021

For themes, which bring their own Elementor elements with them (In my case Pixfort Essentials):

function pixfort_elementor_popup_cf7_initForm_fix() {
?>
<script type='text/javascript'>
    jQuery(document).ready(function() {
        jQuery(".pix-popup-link").on("click", function() {
            console.log("Opened popup...");
            setTimeout(function() {
                jQuery(".pix-popup-content-div form.wpcf7-form:not(.elementor)").each(function(index, value) {
                    console.log("re-initialized CF7!");
                    wpcf7.init(value); 
                    jQuery(value).addClass('elementor'); 
                });
            }, 2000);
        });
    });

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

@aparnamathew123aps
Copy link

aparnamathew123aps commented Mar 17, 2021

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

This code worked for me finally!

@Libinwac
Copy link

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

This code worked for me finally!

Awesome! This works great ...

@pcarantes
Copy link

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
Copy link

klaudgrave commented Apr 8, 2021

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
Copy link

pcarantes commented Apr 9, 2021 via email

@jolaviska
Copy link

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
Copy link

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
Copy link

VIPbyte commented Apr 27, 2021

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
Copy link

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
Copy link

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

@germanrandhawa
Copy link

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

@Stephenraj1997
Copy link

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
Copy link

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
Copy link

klaudgrave commented Jun 24, 2022

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
Copy link

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
Copy link

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
Copy link

mayday295 commented Jul 11, 2022

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
Copy link

xzax commented Sep 13, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests