Contact Form 7 in Popup Fix

PROBLEM

If CF7 is used in an Elementor (or any other) Popup, clicking the [Submit] button closes the popup without giving user any chance to see the success or error messages. The following fix works for me:

SOLUTION

1. Place the CF7 shortcode into your popup design.

2. Add HTML class to the shortcode ( JS code will only apply to this copy of CF7 ):

[contact-form-7 id="...." title=".... ....." html_class="popup-form"]

3. Add following jQuery ( re-initializing the CF7 ) to Header or Footer:

<script>
jQuery( document ).on( 'elementor/popup/show', function() {
	wpcf7.init(jQuery('.popup-form')[0]);
});
</script>