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/