Contact Form 7 - close Popup after submit
CF7 offers some JavaScript events that we can hook into. Using those events, we can create a small snippet to automatically close a Popup after a successful contact form submission:
<script>(function($) { DiviArea.addAction('show_area', function(area) { area.find('.wpcf7').on('wpcf7submit', function (event) { var areaId = $(this).closest('[data-da-area]').data('da-area'); // This CF7 form is not inside a Divi Area. if (!areaId) { return; } // Status "mail_sent" means, that the form submit is complete. if ('mail_sent' === event.detail.status) { DiviArea.hide(areaId); } }); }); })(jQuery); </script>
→ Open in the Script Generator
Here is another example that will close the Popup 2 seconds after the form submit, so the user has time to see the success message:
<script>(function($) { DiviArea.addAction('show_area', function(area) { area.find('.wpcf7').on('wpcf7submit', function (event) { var areaId = $(this).closest('[data-da-area]').data('da-area'); if (!areaId) { return; } if ('mail_sent' === event.detail.status) { // Close the Popup after 2 seconds: setTimeout(function() { DiviArea.hide(areaId); }, 2000); } }); }); })(jQuery); </script>
→ Open in the Script Generator
Contact Form 7 DOM events
Currently, CF7 implements the following events that we can hook into:
wpcf7invalid
— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.wpcf7spam
— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.wpcf7mailsent
— Fires when an Ajax form submission has completed successfully, and mail has been sent.wpcf7mailfailed
— Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.wpcf7submit
— Fires when an Ajax form submission has completed successfully, regardless of other incidents.- Source: https://contactform7.com/dom-events/