Auto redirect sang URL bất kì khi gửi Contact Form thành công

Trong nhiều trường hợp, bạn muốn một page bất kì, post hay bạn tạo một custom post type và đặt form trong đó. Khi người dùng điền form thì nó sẽ tự động chuyển hướng sang url bất kì thì đây là đoạn script giúp bạn tối ưu điều đó.

Cách làm đơn giản này là mình sử dụng sự kiện DOM tùy chỉnh của Contact Form 7 để chạy JavaScript. Sau đây là ví dụ về tập lệnh chuyển hướng bạn đến một URL khác khi sự kiện wpcf7mailsent xảy ra:

Chuyển hướng sang URL ở Contact Form bất kì trên trang

Đây là đoạn script để bạn chuyển hướng tự động sau 3s. Bạn để nó ở file footer.php của trang.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    setTimeout( () => {
        location = 'https://my.azdigi.com/aff.php?aff=4199/';
    }, 3000 ); // Thời gian chờ chuyển hướng
}, false );
</script>

Code này thì bạn có thể dán luôn vào file function.php để không bị mất khi cập nhật code, theme

add_action( 'wp_footer', 'tndigi_add_redirect_script_for_specific_post_type' );
function tndigi_add_redirect_script_for_specific_post_type() {
        ?>
        <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            setTimeout( () => {
                location = 'https://my.azdigi.com/aff.php?aff=4199/';
            }, 3000 ); // Thời gian chờ chuyển hướng
        }, false );
        </script>
}

Ở mục location có URL thì bạn điền trang mà bạn muốn chuyển hướng đến. Bạn đặt nó thì bất kì khi nào có sự kiện điền form thành công thì nó sẽ chuyển hướng sang trang đích. Nhưng nếu bạn muốn chuyển hướng ở một form cụ thể hay những post type cụ thể thì bạn xem cách bên dưới.

Chuyển hướng với những Contact Form từ một bài đăng cụ thể

Thì khác với cách trên (ở vị trí đặt), bạn chỉ cần cho nó vào cuối bài viết bạn muốn (dùng plugin insert header footer script). Nhưng mình thì mình khuyến khích dùng cho những post type cụ thể. Vì mỗi form sẽ có mục đích khác nhau nên trang đích chuyển hướng (nếu cần) cũng khác nhau.

Bạn dán đoạn code này vào file function.php nhé:

add_action( 'wp_footer', 'tnd_add_redirect_script_for_specific_post_type' );
function tnd_add_redirect_script_for_specific_post_type() {
    if ( is_singular('post_type') ) { // Thay 'post_type' bằng tên post type của bạn
        ?>
        <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            setTimeout( () => {
                location = 'https://my.azdigi.com/aff.php?aff=4199/';
            }, 3000 ); // Thời gian chờ chuyển hướng
        }, false );
        </script>
        <?php
    }
}

Giải thích thêm về đoạn code:

• is_singular('post_type'): Kiểm tra xem trang hiện tại có phải là một bài viết của post type cụ thể hay không
• Nếu điều kiện đúng, đoạn mã JavaScript sẽ được chèn vào footer của trang

Nếu như bạn muốn sử dụng cho nhiều post type cùng lúc thì thay điều kiện bằng điều kiện này nha:

if ( is_singular( array('post_type_1', 'post_type_2') ) ) {

Những post type cụ thể thường dùng trong wordpess bạn có thể tham khảo:

• Bài đăng (bài viết): post
• Trang : page
• Sản phẩm: product (nếu bạn có sử dụng)
• Còn nếu bạn có tạo custom post type thì điền nó trong mục cụ thể nha.

Vậy trên đây là cách mà mình hướng dẫn bạn để thêm chuyển hướng sang URL bất kì khi gửi form thành công. Bonus thêm quả kiểm tra tất cả các post type có trên web của bạn thì bạn dùng hàm này nhé: get_post_types( '', 'objects' );

Nếu bạn gặp khó khăn trong chỉnh sửa hoặc muốn phát triển tính năng riêng cho website thì có thể tham khảo dịch vụ bảo trì - phát triển tính năng website wordpress tại TNDigi nhé!

Mình tự học - tìm hiểu - nghiên cứu và làm việc với WordPress được khoảng thời gian nhất định nên lên serial chia sẻ những gì mà mình từng gặp qua. Sẽ có nhiều thiếu sót nên nếu như có chổ nào chưa đúng hay chưa hoạt động được bạn contact với mình để hoàn thiện hơn.

Ghi chú quan trọng:
Cách tuỳ biến không cần can thiệp vào CODE mà sử dụng hook (nếu chưa có trong hướng dẫn) sẽ được mình sớm cập nhật!

Kênh Zalo hỗ trợ miễn phí. Chúc bạn áp dụng thành công!