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/