-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Elementor Popup doesnt run with Contact Form 7 #7798
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
Comments
Hi Alfredo How do you close the popup automatically after press the submit/send etc. Contact 7 button? |
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 |
we can't replicate, thanks. |
@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 |
same issue, please someone fix this. for reference check out - piidm, click on download brocher and syllabus. |
@bainternet please check this out |
Hey There. same issue, has someone found the solution? |
Hi all, |
@drinkmaker how can we do that? |
@elementorbot reopen this ticket please |
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. |
Why is this issue still not re-opened?? I am having the exact same problem. |
[UPDATE] I submitted a support ticket and this is what they said:
|
Add to JavaScript something like:
|
Tested. This works. Thank you!! |
@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....
also just tried using a code snippets plugin to insert this everywhere...
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 |
Hello, @hazelnutz77 /**
* 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. |
@drinkmaker Thank you so much brother. This one works flawlessly ! |
@drinkmaker Thank You! |
Same problem here. Thank you drinkmaker. |
Please reopen... |
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: |
@bainternet perfect solution! |
Thank you. |
Where you put that js?? who is the best way? |
@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. Basically you want this snippet to be on every page that has CF7 forms in popup. |
|
@pcarantes just use it like this:
'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) |
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>
.
|
Doesn't work for me. What would be another work-around? |
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. |
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:
|
That worked like charm, thanks! |
this works for me, but having a lot of popup modal forms everytime it sends it gets send twice or 3x. |
I have tried everything from above, but nothing works for me. is it still opened? |
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() { ?> |
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
Replace
with
|
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. |
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?
|
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. |
It is march 2023 - this bug still persists. Any CF7 in an Elementor (Pro) Popup will reload the page upon submission. |
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> Hi @fvonberg , this is working fine. However, after putting this script, I am encountering two spinners. |
Hi @akashadroitminds58 , |
@fvonberg thanks for the code, it really fixes the issue!!! I'm also getting two spinners, but I kinda like it anyway... |
@doominio @akashadroitminds58,
|
I've been looking to solve this problem for days, this code solved it, thank you very much! |
the 1st of march the bug is still here |
I've solved this by adding this to the page CSS - hides all spinners other than the first. |
@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. |
Can you please try the vanilla JS version? |
Yes please. It's 2024 and we still have the same problem. Please Mr. Elementor can you fix this? |
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? |
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.
|
Prerequisites
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
Environment
System Info
``` ```The text was updated successfully, but these errors were encountered: