how to show contact form 7 messages in popup?

Question

In wordpress site , I am using Contact Form 7. In addition I added plugin Contact Form 7 Response Message Popup to show the validation error message and success message. The problem is sometimes the popup is working fine and sometimes though validation error occurs shows blank popup. Why is this happening? Any help/suggestions are welcome. Thank you.

For time being I added settimeout function on fancybox call. I don't think it's a best approach though.

Answer 1

Please have a look on my developed plugin to add custom styles over contact form 7 messages, specifically developed for the purpose of setting custom style for the messages, Even you can manage the whole styling of contact form 7 messages manually, I hope the plugin fit for you.

Download the plugin from bellow link on Github and follow the instructions provided on readme.txt file for further details.

https://github.com/basirebadi/contact-form-7-Messages-Styles

Answer 2

Use fancybox: http://fancyapps.com/fancybox/

enqueue a script in wordpress functions.php file with this code:

jQuery( document ).ready(function() {
     jQuery('.wpcf7-popup-invalid, .wpcf7-popup-mailsent').fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
    });
});//document

jQuery(document).on('invalid.wpcf7', function () {
    //console.log('invalid.wpcf7 was triggered!');
    jQuery('.wpcf7-popup-invalid').trigger('click');
});
jQuery(document).on('mailsent.wpcf7', function () {
    //console.log('mailsent.wpcf7 was triggered!');
    jQuery('.wpcf7-popup-mailsent').trigger('click');
});

and in your page template file (ex. page.php) add the following:

<a class="wpcf7-popup-mailsent" href="#f-success" title="" style="display: none;">PopUp</a>

<div id="f-success" style="width:400px;display: none;">
    <p>
        Success message.
    </p>
</div>

<a class="wpcf7-popup-mailsent" href="#f-failure" title="" style="display: none;">PopUp</a>

<div id="f-failure" style="width:400px;display: none;">
    <p>
        Failure message.
    </p>
</div>

Notes:

1) This didn't work for me: https://contactform7.com/dom-events/

2) Hidden links and jQuery triggers was the easiest solution to make the fancybox open directly from the js code

3) Yes. I know. You can use "$" instead of "jQuery" in Wordpress js files if you want to