If you’re using Contact Form 7 and want to set up a redirection when the form is submitted.

Redirecting Contact Form 7 to a thank you page not only allows you to measure form conversions with Google Analytics but also gives users a more personal experience. Additionally, it notifies you whenever data is submitted.

By default, Contact Form 7 sends users to the same form URL when they submit a form. In other words, you can’t use the plugin alone to redirect it to a different URL, such as a thank you page, after submission.

However, according to its creator, Takayuki Miyoshi, we can still use its custom DOM event to redirect Contact Form 7 to a thank you page. This event lets you use JavaScript to call a function in a specified condition.

One Thank You Page

Just paste the below code after the contact form end in back end like

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>

Change https://www.example.com/ (in the fifth line) to your thank you page URL before saving your file.

Multiple Thank You Pages

The process becomes more complicated if you have a form that each lead to a different thank you page based on the page. Regrettably, the code above will route all submissions to the same thank you page. Your tracking may still be impacted as a result of this

The good news is that there is a solution to it as well. However, this will necessitate further effort.

just paste the below code after the contact form end in back end like 

<script type="text/javascript">
// this section is to get the current page id
function get_current_page_id() {
    var page_body = $('body.page');
    var page_id = 0;
    if(page_body) {
        var classList = page_body.attr('class').split(/s+/);

        $.each(classList, function(index, item) {
            if (item.indexOf('page-id') >= 0) {
                var item_arr = item.split('-');
                page_id =  item_arr[item_arr.length -1];
                return false;
            }
        });
    }
    return page_id;
}
// this section is for redirecting the contact form page to thank you page based on page id
document.addEventListener( 'wpcf7mailsent', function( event ) {
var current_page_id = get_current_page_id();
   if ( '47' == current_page_id ) { //here 47 is page id that form is implemented that will redirect to first thank you page
    location = 'https://www.example.com/thank-you-1/';
    } else if ( '107' == current_page_id ) { //here 107 is page id that form is implemented that will redirect to first thank you page
        location = 'https://www.example.com/thank-you-2/';
    } else { // Sends submissions on all unaccounted for forms to the third thank you page
        location = 'https://www.example.com/thank-you-3/';
    }
}, false );
</script>

Categorized in:

CodingWordpress

Tagged in:

, , , ,