Pawan Kumawat

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.

 

Categories

Related Blogs

Disable Repeat Purchase Of Product

To disable repeat purchase of products in WooCommerce, you can implement a custom solution using a combination of code snippets and WooCommerce hooks. The idea is to prevent customers from adding the same product to the cart if it already exists in the cart. Below are the steps to achieve this:

Sort A ACF Repeater Field Results

Filters the field $value after being loaded. Sort a repeater field using a function called array_multisort(). Sorting Filtering Modifying ACF results .