Contact Form 7’s Validation In PopUp

When CF7 form (Contact form 7) is placed in elementor’s popup the issue is that the popup closes before it can show the after submit confirmation text or submission error.

Usually PopUp closes before showing Contact Form 7’s validation error after submit. Because form loads using ajax , so js not load for dynamic html. for stopping this error we need to re initialize the form after popup loads.

We need to reinitialize the form after the opening of the popup.

We can use the script in “wp_footer” action.

function elementor_popup_reinitialize() {
?>
   <script>
     window.addEventListener('DOMContentLoaded', function() {
        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','elementor_popup_reinitialize ');

Place this code in your theme’s functions.php file and se the results.