Fix Contact Form 7 Validation Errors in Elementor Popup

Resolve Contact Form 7 validation issues in Elementor popups where errors not displayed before popup closes. Problem occurs because CF7 forms load via AJAX and JavaScript not initialized for dynamic HTML, reinitialize forms when popup opens using elementor/popup/show event listener, loop through all CF7 forms with jQuery selector, call wpcf7.init() for each form instance to reinitialize validation, add script in wp_footer action hook, ensure DOMContentLoaded event fires first, display validation errors properly in popup before closing, and maintain form functionality with proper CF7 AJAX initialization for dynamic popup content.

Contact Form 7’s Validation In PopUp

Hooks JavaScript Jquery Wordpress

Contact Form 7’s Validation In PopUp Tutorial/Guide

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.  

๐Ÿ’ก Have a Coding Problem?

Search our archives or reach out to our team for solutions and expert advice.