Redirect to “Thank You Page” after success sent mail from few contact forms

Redirecting to another URL after submissions few Contact Form 7

Problem: We should make redirect user to “Thank You Page” after success sent mail from Contact Form 7. Also, web-site use not one, and few different contacts forms.

Solution: Solution enough trivial and here I have already in detail describe similar solution. So, we could do that (put next code to functions.php):

<?php
// Redirect To Page Of Success Page After Success Sent Mail
add_action( 'wp_footer', 'redirect_to_success_page', 99 );
	
function redirect_to_success_page() {
	$post_id = get_queried_object_id();
	$contact_form_success_page_link = get_field( 'contact_form_thank_you_page_link', $post_id );
	$subscribe_form_success_page_link = get_field( 'subscribe_form_thank_you_page_link', $post_id );
	if ( ! $contact_form_success_page_link && ! $subscribe_form_success_page_link ) {
		return;
	} else { ?>
    <script>
		var contactForm = document.querySelector('#wpcf7-f4-o2');
		var contactFormSuccessPageLink = '<?php echo $contact_form_success_page_link; ?>';
		var subscribeForm = document.querySelector('#wpcf7-f457-o2');
		var subscribeFormSuccessPageLink = '<?php echo $subscribe_form_success_page_link; ?>';

		if ( contactForm && contactFormSuccessPageLink ) {
			contactForm.addEventListener( 'wpcf7mailsent', function ( event ) {
				window.location.href = contactFormSuccessPageLink;
			}, false );
		}

		if ( subscribeForm && subscribeFormSuccessPageLink ) {
		    subscribeForm.addEventListener( 'wpcf7mailsent', function ( event ) {
				window.location.href = subscribeFormSuccessPageLink;
			}, false );
		}

    </script>
	<?php }
}

As we can see, there's no rocket science here. I had about 20 pages, who contain contact forms, I checked not all pages, and just few some of them — all right. But QA enginer wrote me about bug — on the one page, who I not checked redirect was missing. It turns out, the same contact form may be has a little bit different IDs. It's allow use the same contact form several times on the one page. It's just my case — one subscribe form that I can saw on the page and other was hidden in pop-up, and I can saw it only after click the link. In this case it's 100% my mistake, at the start I need was look the source code of page.

So, for resolve this trouble we need get all copies one contact form and for each need be set redirect link. First idea was use something like this:

var contactForm = document.querySelector('[id^="wpcf7-f4-"]');
var subscribeForm = document.querySelector('[id^="wpcf7-f457-"]');

But, I as wrote above we can have few same forms on the page and we need get all their IDs, and not only the first. So, we'll use:

var subscribeForms = document.querySelectorAll( '[id^="wpcf7-f457-"]' );

Ultimately, I got next code:

<?php
// Redirect To Page Of Success Page After Success Sent Mail
add_action( 'wp_footer', 'redirect_to_success_page', 99 );
	
function redirect_to_success_page() {
	$post_id = get_queried_object_id();
	$contact_form_success_page_link = get_field( 'contact_form_thank_you_page_link', $post_id );
	$subscribe_form_success_page_link = get_field( 'subscribe_form_thank_you_page_link', $post_id );
	if ( ! $contact_form_success_page_link && ! $subscribe_form_success_page_link ) {
		return;
	} else { ?>
    <script>
		var contactForm = document.querySelector( '[id^="wpcf7-f4-"]' );
		var contactFormSuccessPageLink = '<?php echo $contact_form_success_page_link; ?>';
		var subscribeForms = document.querySelectorAll( '[id^="wpcf7-f457-"]' );
		var subscribeFormSuccessPageLink = '<?php echo $subscribe_form_success_page_link; ?>';

		if ( contactForm && contactFormSuccessPageLink ) {
			contactForm.addEventListener( 'wpcf7mailsent', function ( event ) {
				window.location.href = contactFormSuccessPageLink;
			}, false );
		}

		if ( subscribeForms && subscribeFormSuccessPageLink ) {
			subscribeForms.forEach( function ( element ) {
				element.addEventListener( 'wpcf7mailsent', function ( event ) {
					window.location.href = subscribeFormSuccessPageLink;
				}, false );

		    } );
		}
    </script>
    <?php }
}

Summarize:

• If we use Contact Form 7 need remember that the same form may be has a little bit different IDs.
• Check source code of the page in the your code editor or at least in a browser (Ctrl + U) to determine the presence of few copies the same form. In depending on this case solutions may be different. In fairness it should be noted, that last solutions is a universal.
• Use searching all forms by mask.