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

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

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 ) {
    if (event.detail.status=='mail_sent'){
       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' && event.detail.status=='mail_sent') { //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' && event.detail.status=='mail_sent') { //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/

Chúc bạn thành công!

[Total: 6   Average: 3.8/5]

Hoàng An

Tôi không phải là 1 chuyên gia lập trình, cũng không phải là 1 chuyên gia SEO. Với niềm đam mê với CNTT, tôi có thể biến ý tưởng thành sản phẩm và thích chia sẻ kiến thức cho người khác. Nếu có duyên, mời bạn đến với khoá học của tôi
0 0 vote
Article Rating
Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Le Huyen
Le Huyen
2 years ago

Mình làm theo rồi, song có một vấn đề là, khi validate form không đúng nó vẫn cứ chuyển đến trang cảm ơn, vậy xử lý sao bạn nhỉ, chỉ khi điền các trường form chính xác mới chuyển hướng

Phan Vu
Phan Vu
1 month ago
Reply to  Le Huyen

Mình cũng vướng vấn để như bạn, không biết bạn đã xử lý được chưa, cho mình học hỏi với.

Phạm Ngọc Tưởng

Bạn có thể sử dụng mẫu sau :)))
Nếu có thắc mắc bạn có thể liên hệ với mình để mình giúp
https://www.facebook.com/teenviet24h
document.addEventListener( ‘wpcf7submit’, function( event ) {
if(event.detail.status == “mail_sent”) {
location = ‘http://localhost/success/ischoolvietnam.com/dang-ky-khoa-hoc-thanh-cong’;
};
}, false );

Phan Vu
Phan Vu
1 month ago

Cảm ơn bạn, một đoạn code hay. Mình dùng đoạn code trên để redirect thành công. Khi dùng đoạn dưới để chặn lại khi dữ liệu điền trên form không đúng thì dù khi mình đã điền đúng nó vẫn không redirect qua trang mới, mong bạn giúp đỡ, cảm ơn nhiều.

Kha Hà
5 months ago

Chuyển hướng thì mất trang đang xem, vậy mình muốn chỉ mở 1 trang mới thankyou thôi thì sửa code ntn bạn

9
0
Would love your thoughts, please comment.x
()
x