If you are using Contact Form 7 on Elementor Pro pop up builder, you may face an error where when you hit the Submit button, the whole page will refresh. It does not show a failure or success message
To fix it, It requires some tweaks to your WordPress theme code such that it works appropriately without refreshing the entire page.
One of the solutions (tested personally on my site) is to paste the below code on your functions.php file (located under /wp-content/themes/[your-theme]/).
/**
* 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' );The above code was contributed in Github by @drinkmaker, and you may find out more from the link: https://github.com/elementor/elementor/issues/7798
If the above does not work, you may also try the other solutions posted inside.
