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

****EASY SOLUTION****

The options of using the EventListener script didn't work for me, but I found a super simple solution. Just add the Wordpress plugin called "Redirection for Contact Form 7". (Look at screenshot below).

After installing the plugin, a new tab called "Redirect Settings" will appear when you go inside any of your created Contact Forms ( Look at the 2nd screenshot). Here you have the option of either setting one of your already existing custom pages of the project as redirection url, or setting an external url for the purpose. You also have other options like setting a delay in redirection etc.

Answer 2

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 3

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 );  

Answer 4

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 5

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.