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/