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/