Redirect to Thank You Page After Contact Form 7 Submission — Multiple Forms Solution

Home » Coding » Redirect to Thank You Page After Contact Form 7 Submission — Multiple Forms Solution
August 5, 2019 Coding, Contact Form 7, WordPress
Redirect to Thank You Page After Contact Form 7 Submission — Multiple Forms Solution

Redirecting a visitor to a custom “Thank You” page after a Contact Form 7 submission is a straightforward task — until your site has multiple forms, each of which may need to redirect to a different URL. This article walks through a robust, per-form solution.

Problem: A WordPress site has multiple Contact Form 7 forms, each needing to redirect to a different "Thank You" URL after submission — but CF7 only supports a single redirect without custom code.

Solution: Store each form's thank-you page URL in an ACF field on the page, then enqueue a JavaScript snippet via wp_footer that listens for the CF7 wpcf7mailsent event and redirects to the URL associated with that specific form instance.

The approach stores the thank-you page URL in an ACF field on each page and then injects JavaScript via wp_footer to listen for the CF7 wpcf7mailsent event. Because the same contact form can appear multiple times on a single page (e.g., once in the body and once in a modal) with slightly different DOM IDs, we need querySelectorAll to capture every instance:

<?php
add_action( 'wp_footer', 'redirect_to_success_page', 99 );

function redirect_to_success_page() {
    $post_id                        = get_queried_object_id();
    $contact_form_redirect          = get_field( 'contact_form_thank_you_page_link', $post_id );
    $subscribe_form_redirect        = get_field( 'subscribe_form_thank_you_page_link', $post_id );

    if ( ! $contact_form_redirect && ! $subscribe_form_redirect ) {
        return;
    }
    ?>
    <script>
        ( function () {
            var contactForm            = document.querySelector( '[id^="wpcf7-f4-"]' );
            var contactFormRedirect    = '<?php echo esc_js( $contact_form_redirect ); ?>';
            var subscribeForms         = document.querySelectorAll( '[id^="wpcf7-f457-"]' );
            var subscribeFormRedirect  = '<?php echo esc_js( $subscribe_form_redirect ); ?>';

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

            if ( subscribeForms.length && subscribeFormRedirect ) {
                subscribeForms.forEach( function ( form ) {
                    form.addEventListener( 'wpcf7mailsent', function () {
                        window.location.href = subscribeFormRedirect;
                    }, false );
                } );
            }
        } )();
    </script>
    <?php
}

Using the attribute selector [id^="wpcf7-f457-"] matches all copies of the same form regardless of the instance suffix that CF7 appends. Without this, a hidden form in a modal would never trigger the redirect.

Key takeaways:

— CF7 can render the same form multiple times on a page with slightly different DOM IDs. Always check the page source before assuming there is only one instance.

— Use querySelectorAll with a prefix selector ([id^="..."]) to capture every copy of a form.

— Use esc_js() when outputting PHP values inside a JavaScript context to prevent XSS.

NOTE: If you do not use ACF, you can store the redirect URLs in a custom options page or as post meta using any method you prefer. The JavaScript logic remains the same regardless of how you retrieve the URL in PHP.

Related posts