Contact Form 7 redirect after submission

Question

I'm using contact form 7 and I'm trying to redirect to another page after a successful contact form submission.

I've tried using Contact Form 7 – Success Page Redirects (https://nl-be.wordpress.org/plugins/contact-form-7-success-page-redirects/) but the plugin isn't compatible with the theme and gives some errors.

Is there another way to redirect without using that plugin? I've found this https://contactform7.com/redirecting-to-another-url-after-submissions/ too, but I'm not able to implement it. The redirection is also only necessary for one contact form on the site, not all of them.

Thank you!

J.

Answer 1

I've seen quite a few answers with the same responses. The major question comes when you have 10 forms and 10 different thank you pages and this solution won't work.

I have a workaround for this.

Step 1: Create a hidden field in your form and add the thank you page URL in that.

[hidden thankyouURL id:thankyouURL default:http://example.com/thank-you/ "http://example.com/thank-you/"]

Step 2: In the DOM event, get the thank you URL from the field and redirect the user.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    var thankyouURL = document.getElementById("thankyouURL").value;
    location = thankyouURL;
}, false );
</script>

That's it.

Answer 2

I'm trying to do the same thing but yet no success. the on_sent_ok is about to be no longer recommended. Check this page DOM EVENTS on the end of the page you can find the code for a specific form.

Answer 3

Add below code in functions.php (located in themes -> themeName Folder)

add_action( 'wp_footer', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( e ) {
    var str = window.location.href;
    if( str.includes("flp") ){
        window.location.href = "http://www.YourWebsite.com/facebook-thank-you";
    } else if( str.includes("glp") ){
        window.location.href = "http://www.YourWebsite.com/google-thank-you";
    }
}, false );
</script>
<?php
}

Answer 4

What do you do if you have multiple forms on the same page? Using the current answers, this could be a problem (For example, IDs must be unique, or the redirect ID is on the page but the user submits a different form).

The code below attempts to fix these potential issues. This answer uses hidden form fields in CF7, but allows you to have a unique redirect URL for each form without having to edit your JS code every time you create a new form (just use a consistent name, such as "url_redirect" as shown in the code below):

Contact Form 7:

[hidden url_redirect "http://customurl.com?customvar=1"]

Javascript:

document.addEventListener( 'wpcf7mailsent', function( e ) {

    var url_redirect = '';

    var inputs = e.detail.inputs;
    for ( var i = 0; i < inputs.length; i++ ) {

        if( 'url_redirect' == inputs[i].name ) {//used for misc forms
            url_redirect = inputs[i].value;//set the redirect value from current submitted form
        }

    }

    //Check for redirect 
    if( url_redirect ){
        location = url_redirect;
    }

}, false );