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
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. |
This......!! |
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);
}); |
Has anyone rewritten these snippets for gravity forms? Is it as simple as subbing .wpgf-form for .wpcf7-form? |
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. |
This works great ... can you please add some code to direct to a page with a confirmationmessage after the form is successfully submitted. |
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. |
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. |
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' |
Yea, it is not working. Elementor Pro 3.1.1 and CF7 5.4. "#wpcf7-f10949-o1" in the url |
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' );
} );
} );
|
For themes, which bring their own Elementor elements with them (In my case Pixfort Essentials):
|
jQuery( document ).on( 'elementor/popup/show', () => { This code worked for me finally! |
Awesome! This works great ... |
|
@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. |
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: