[Contact Form 7] Chuyển hướng trang Thank You sau khi submit (ok)

https://hoangan.net/contact-form-7-chuyen-huong-trang-thank-you-sau-khi-submit.html

[Contact Form 7] Chuyển hướng trang Thank You sau khi submit

• Hoàng An

• 19/05/2018

• 4

Contact Form 7 là một trong những plugin hàng đầu về tạo form. Ngoài mục đích tạo form liên hệ, plugin này còn đường dùng để tạo form đăng ký, đặt hàng, subscribe,… Việc chuyển hướng sang 1 trang cảm ơn (Thank You Page) ngay sau khi submit là 1 việc không thể thiếu. Nó giúp tăng trải nghiệm người dùng, đo lường hiệu quả Marketing.

Với phiên bản thấp hơn 5.0 thì việc này được thực hiện rất đơn giản bằng việc sử dụng phương thức on_sent_ok trong phần Additional Settings

Nhưng kể từ plugin này được nâng cấp lên phiên bản 5.0 thì phương thức on_sent_ok đã bị loại bỏ. Thay vào đó, bạn phải sử dụng DOM events trong Javascript

Dưới đây là code mẫu:

<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
    location = 'https://hoangan.net/thank-you'; //Thay thành link bạn muốn chuyển hướng
}, false );
</script>

Bạn chỉ cần bỏ đoạn code này vào file header.php hoặc footer.php của theme bạn đang sử dụng.

Tuy nhiên, nếu trong website của bạn có nhiều form thì nó sẽ đều chuyển hướng về 1 link. Nếu bạn muốn mỗi form chuyển hướng về 1 link khác nhau thì bạn thay đổi lại như sau:

<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
    if ( event.detail.contactFormId == '1') { //Thay 1 thành ID của form
        location = 'https://hoangan.net/thank-you-1'; //Thay thành link cần chuyển hướng
    }

    if ( event.detail.contactFormId == '2') { //Thay 2 thành ID của form
        location = 'https://hoangan.net/thank-you-2'; //Thay thành link cần chuyển hướng
    }
}, false );
</script>

Ngoài ra, bạn có thể đọc đầy đủ về Dom Events trong bài viết sau của Contact Form 7: https://contactform7.com/dom-events/