If a user submits a form with errors the popup simply closes

I have several popups on the same page, each one with a Contact Form 7 form in it. They are activated by clicking different links on the page. The problem arises if a user submits a form with errors. Then the popup simply closes. The only way the user can see if the form was submitted or if it has errors is to click that same link again to re-open the popup (where the error messages from Contact Form 7 can be seen)

I have created a bit of custom jQuery that checks the URL hash for the unique identifier of whichever popup form was submitted, and re-opens that popup automatically if it has errors. The code works perfectly in browser console, but just can't get it to work on a live site either in a script.js file in theme, or in footer.php

The code is here: https://pastebin.com/KBeZTzvU

  • Karolina

    I've fixed it brutal force myself. I 've written a long post but havent been sent or whatever. Have a look into the code, will post it here later.

    However, it's super weird cause there are two different hashes randomly added to the url. Sometimes the id of form, somerimes hash of popup.

    Even if my solution works, its not nice and I think you should fix it in the next release.

    Karolina

  • Mahlamusa

    Hello Karolina,

    I hope you are doing great today. I am sorry you were having issues using the PopUp plugin, and I am happy if you found a workaround for this issue.

    We have had another Member report this issue before and we provided a fix, in our fix we have modified the file:

    /wp-content/plugins/popover/js/public.min.js

    and added the following lines of code:

    //find and initialize "Contact Form 7" form
    jQuery(document).ready( function(){
    			var cf7 = jQuery(document).find('.wpcf7-form');
    			cf7.wpcf7InitForm();
    } );

    we added this code in the section as follows:

    me._show = function _show() {
    	//all the code here, then at the bootom:
    	//find and initialize "Contact Form 7" form
    	jQuery(document).ready( function(){
    		var cf7 = jQuery(document).find('.wpcf7-form');
    		cf7.wpcf7InitForm();
    	} );
    
    	return true;
    };

    This worked but unfortunately it is not yet planned for the next release of the plugin and I cannot give an ETA as to when this can be expected.

    I hope this helps. Please enjoy your day.

    Cheers,
    Mahlamusa