Redirect to “Thank You Page” after success sent mail

Redirecting to another URL after submissions Contact Form 7

Problem: We should make redirect to “Thank You Page” after success sent mail from Contact Form 7.

Solution: Developer of plugin Contact Form 7 write:

By the way, I’m often asked by users that how they can redirect to so-called “Thank You Page”. In most cases, they want to know it because they assume that redirecting to “Thank You Page” is necessary for tracking form submissions with Google Analytics. That’s not necessary at all. In fact, it’s an outdated and nonsense custom. Today you can track submissions with Google Analytics without any redirection.

However, "clients will, we fulfill". Let's go!

In the Network I saw many solutions, but majority is basic examples. Here I'll write 100% work solutions - copy/paste version 🙂 . So, I proposal 2 ways for resolve this problem, each has its own characteristics.

Way 1: Back-end version. This way provides for works with use only back-end, without JavaScript (some times it's important). Also, its has limit: AJAX doesn't work (we get errors after reload page) and redirect link must be absolute.

<?php
add_action( 'wpcf7_mail_sent', 'redirect_to_success_page' );
    
function redirect_to_success_page( $contact_form ) {
    $redirect_location = get_field( 'redirect_location', 'options' );
    $redirect_status = get_field( 'redirect_status', 'options' );
        
    if ( $redirect_location && $redirect_status ) {
        wp_redirect( $redirect_location, $redirect_status );
        exit;
    }
}

Way 2: Front-end version. This way provides AJAX and relative links:

<?php
add_action( 'wp_footer', 'redirect_to_success_page' );
	
function redirect_to_success_page() {
	$redirect_location = get_field( 'redirect_location', 'options' );
	if ( ! $redirect_location ) {
		return;
	} else { ?>
        <script>
			document.addEventListener( 'wpcf7mailsent', function ( event ) {
    			window.location.href = '<?php echo $redirect_location; ?>';
			}, false );
        </script>
	<?php }
}

Notes:

As you can see, both ways use ACF fields, which makes it possible to set redirect link from admin dashboard.

About, redirects using JavaScript:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

Events Contact Form 7:

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.If for each contact form using own "Thank You Page" we can use next example:

If for each contact form using own "Thank You Page" we can use next example:

var wpcf7Elm = document.querySelector( '.wpcf7' );
 
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    alert( "Fire!" );
}, false );

Good luck!

Sources:

1. https://contactform7.com/redirecting-to-another-url-after-submissions
2. https://contactform7.com/tracking-form-submissions-with-google-analytics
3. https://contactform7.com/dom-events
4. https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage