Chia sẻ cách chống SPAM cho Contact Form 7 hiệu quả nhất

Thông báo: Nội dung trên trang web này là những kiến thức mà mình đã sưu tầm từ nhiều nguồn trên mạng, cũng như những gì mình học hỏi và tích lũy được. Nếu bất kỳ bài viết nào trên trang vô tình vi phạm bản quyền của tác giả, xin vui lòng thông báo cho mình để mình có thể gỡ bỏ ngay lập tức. Rất mong nhận được sự thông cảm và hỗ trợ từ mọi người. Xin cảm ơn!

Một vấn đề nhức nhối nhất khi chèn form vào website là bị bot nó auto spam quá. Mail spam từ cf7 suốt ngày luôn. Tức mà không làm gì được thì bài này sẽ giúp bạn chống/chặn luôn auto spam đó nhé

Chuyện là gần đây mình có 1 người inbox hỏi cách chặn spam cho cf7. Thấy bạn đó bảo đã cài akismet, recaptcha, wordfence, format sđt theo Việt Nam mà vẫn bị spam… may mắn cho bạn đó là mình sẵn có code tự làm nên chia sẻ luôn. Ấy vậy mà hiệu quả lắm nhé. Bạn đó bảo không còn thấy spam nữa… mừng quá và chia sẻ luôn cho mọi người cùng thử nha

Cách 1: Cách chống spam bằng field ẩn

Nguyên nhân: Đa số spam này là do bot auto spam. Nó cứ chèn đủ các field trong form và submit thôi. Kiểu submit auto luôn ý

Giải pháp: Nên mình nghĩ sao không làm 1 field ẩn. Sau đó check field đó nếu nó được nhập nội dung thì đích thị nó là SPAMER rồi đó 😀 chứ người thường không thể thấy field ẩn đó để điền được 😀

Đến code: mình bắt tay vào code luôn nhé. do code sẵn nên các bạn chỉ cần copy code sau chèn vào wp-content/themes/{your-theme}/functions.php là được

/*
 * Chống spam cho contact form 7
 * Author: levantoan.com
 * */
/*Thêm 1 field ẩn vào form cf7*/
add_filter('wpcf7_form_elements', 'devvn_check_spam_form_cf7');
function devvn_check_spam_form_cf7($html){
    $html = '<div style="display: none"><p><span class="wpcf7-form-control-wrap" data-name="devvn"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="devvn"></span></p></div>' . $html;
    return $html;
}
/*Kiểm tra form đó mà được nhập giá trị thì là spam*/
add_action('wpcf7_posted_data', 'devvn_check_spam_form_cf7_vaild');
function devvn_check_spam_form_cf7_vaild($posted_data) {
    $submission = WPCF7_Submission::get_instance();
    if (!empty($posted_data['devvn'])) {
        $submission->set_status( 'spam' );
        $submission->set_response( 'You are Spamer' );
    }
    unset($posted_data['devvn']);
    return $posted_data;
}

* Chống spam cho contact form 7

* Author: levantoan.com

* */

/*Thêm 1 field ẩn vào form cf7*/

add_filter('wpcf7_form_elements', 'devvn_check_spam_form_cf7');

function devvn_check_spam_form_cf7($html){

$html = '<div style="display: none"><p><span class="wpcf7-form-control-wrap" data-name="devvn"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text" name="devvn"></span></p></div>' . $html;

return $html;

}

/*Kiểm tra form đó mà được nhập giá trị thì là spam*/

add_action('wpcf7_posted_data', 'devvn_check_spam_form_cf7_vaild');

function devvn_check_spam_form_cf7_vaild($posted_data) {

$submission = WPCF7_Submission::get_instance();

if (!empty($posted_data['devvn'])) {

$submission->set_status( 'spam' );

$submission->set_response( 'You are Spamer' );

}

unset($posted_data['devvn']);

return $posted_data;

}

Giải thích một chút thì code trên sẽ thêm 1 field ẩn có name = devvn vào các form cf7 của bạn. Nếu field đó được nhập thì => spamer. Code được chia sẻ trên levantoan.com và nếu okie thì nhớ chia sẻ rộng rãi nha

Cách 2: Format số điện thoại theo định dạng Việt Nam

Với cách 1 phù hợp với tất cả các form và đặc biệt form dạng đăng ký email hoặc chỉ có 1 field đơn giản nào đó sẽ không ảnh hưởng tới thao tác người dùng. Và nếu cách 1 chưa chặn được spam cho form của bạn thì bạn có thể xem thêm cách 2 này nhé

Trong cách này mình sẽ format cho chuẩn số điện thoại theo Việt Nam là: số 0 đằng trước và có 9-10 số ở đằng sau số 0 nhé

Tất nhiên cách này chỉ phù hợp với 1 số trường hợp nhất định và bạn phải chú ý khi dùng

Ví dụ form của bạn ô số điện thoại như sau:

Thì code chèn vào wp-content/themes/{your-theme}/functions.php sẽ như sau

/*
 * Chống spam cho contact form 7 bằng định dạng số điện thoại
 * Author: levantoan.com
 * */
add_filter('wpcf7_validate_tel', 'devvn_custom_validate_sdt', 10, 2);
add_filter('wpcf7_validate_tel*', 'devvn_custom_validate_sdt', 10, 2);
function devvn_custom_validate_sdt($result, $tag) {
    $name = $tag->name;
    if ($name === 'your-tel') {
        $sdt = isset($_POST[$name]) ? wp_unslash($_POST[$name]) : '';
        if (!preg_match('/^0([0-9]{9,10})+$/D', $sdt)) {
            $result->invalidate($tag, 'Số điện thoại không hợp lệ.');
        }
    }
    return $result;
}

* Chống spam cho contact form 7 bằng định dạng số điện thoại

* Author: levantoan.com

* */

add_filter('wpcf7_validate_tel', 'devvn_custom_validate_sdt', 10, 2);

add_filter('wpcf7_validate_tel*', 'devvn_custom_validate_sdt', 10, 2);

function devvn_custom_validate_sdt($result, $tag) {

$name = $tag->name;

if ($name === 'your-tel') {

$sdt = isset($_POST[$name]) ? wp_unslash($_POST[$name]) : '';

if (!preg_match('/^0([0-9]{9,10})+$/D', $sdt)) {

$result->invalidate($tag, 'Số điện thoại không hợp lệ.');

}

return $result;

}

Trong đoạn code trên bạn chú ý 3 chỗ cần chú ý là :

wpcf7_validate_tel: chữ tel ở đây là loại field bạn dùng. Ở ví dụ dùng tel nhé. còn bạn dùng text thì nhập là text
wpcf7_validate_tel*: chữ tel* ở đây là loại field bạn dùng và có bắt buộc.
your-tel là tên field nhé. Đổi thành tên field của bạn cho đúng

Cách 3: Thêm dạng câu hỏi – trả lời vào form

Nếu qua 2 cách trên mà bạn vẫn bị spam thì.. cách này chắc chắn sẽ triệt để luôn nè nhưng nó cũng hơi phiền cho người dùng nhé 😀

Giải pháp: thêm 1 danh sách câu hỏi đơn giản để khi khách điền form sẽ nhập câu trả lời vào đó. Nếu đúng thì mới cho submit form. Tất nhiên là thêm vài câu đơn giản hết mức có thể thôi. Dạng như 1 + một bằng mấy? hoặc 2 + một bằng mấy? thế thì bố bot cũng không biết đâu 😀

Cách làm: cái này thì không cần code thêm mà dùng luôn field quiz của cf7 nhé. Trong ví dụ mình thêm 3 câu hỏi thôi. Bạn có thể thêm câu hỏi khác và nhiều hơn nữa nha

Sửa form mà bạn muốn chống spam => đặt chuột vào vị trí muốn hiển thị field trong form của bạn => ấn vào Câu hỏi như hình dưới

Bên ngoài sẽ hiển thị như sau:

Ưu điểm:

Chắc chắn chống spam triệt để luôn

Hạn chế:

Gây khó cho người dùng khó tính 😀
Form phải thêm 1 field

Cách 4: Chống spam bằng cách kiểm tra người dùng đã cuộn chuột (scroll) hay chưa

Cách này mình nghĩ là cách đơn giản và hiểu quả nhất. Vừa đơn giản cho người dùng vừa hạn chế được auto spam

Cơ chế: Form thì đa số để ở giữa hoặc cuối web, nên người dùng kiểu gì cũng phải cuộn chuột thì mới tới được form và nhập thông tin > sau đó mới submit đúng không? Vì vậy mình sẽ tính toán số con số mà khách đã cuộn và nếu cuộn tới mức mà mình thấy okie thì sẽ cho submit

Ưu điểm:

Không gây khó chịu cho người dùng. Giống cách 1
Đơn giản ko ảnh hưởng tới giao diện form

Nhược điểm:

Hiện tại chưa nghĩ ra nhược điểm nào 😀

Cách thực hiện:

Thêm code sau vào wp-content/themes/{your-theme}/functions.php là được nhé

/*
 * Check spam cf7 bằng scroll
 * Author: levantoan.com
 * */
add_filter('wpcf7_form_elements', 'devvn_check_scroll_form_cf7');
function devvn_check_scroll_form_cf7($html){
    $html = '<div style="display: none"><p><span class="wpcf7-form-control-wrap" data-name="devvn-scroll"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="0" type="text" name="devvn-scroll"></span></p></div>' . $html;
    return $html;
}
add_action('wpcf7_posted_data', 'devvn_check_scroll_form_cf7_vaild');
function devvn_check_scroll_form_cf7_vaild($posted_data) {
    $submission = WPCF7_Submission::get_instance();
    $scroll = isset($posted_data['devvn-scroll']) ? intval($posted_data['devvn-scroll']) : 0;
    //nếu form ở ngay trên đầu page thì thay 5000 thành số nhỏ hơn. ví dụ 200
    if (!$scroll || $scroll <= 5000) {
        $submission->set_status( 'spam' );
        $submission->set_response( 'You are spamer' );
    }
    unset($posted_data['devvn-scroll']);
    return $posted_data;
}
add_action('wp_footer', function (){
    ?>
    <script>
        const scrollInputs = document.querySelectorAll('input[name="devvn-scroll"]');
        if(scrollInputs.length > 0) {
            let accumulatedScroll = 0;
            function devvnCheckScroll() {
                accumulatedScroll += window.scrollY;
                scrollInputs.forEach(input => {
                    input.value = accumulatedScroll;
                });
                //nếu form ở ngay trên đầu page thì thay 6000 thành số nhỏ hơn. ví dụ 300
                if (accumulatedScroll >= 6000) {
                    window.removeEventListener('scroll', devvnCheckScroll);
                }
            }
            window.addEventListener('scroll', devvnCheckScroll);
        }
    </script>
    <?php
});

* Check spam cf7 bằng scroll

* Author: levantoan.com

* */

add_filter('wpcf7_form_elements', 'devvn_check_scroll_form_cf7');

function devvn_check_scroll_form_cf7($html){

$html = '<div style="display: none"><p><span class="wpcf7-form-control-wrap" data-name="devvn-scroll"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="0" type="text" name="devvn-scroll"></span></p></div>' . $html;

return $html;

}

add_action('wpcf7_posted_data', 'devvn_check_scroll_form_cf7_vaild');

function devvn_check_scroll_form_cf7_vaild($posted_data) {

$submission = WPCF7_Submission::get_instance();

$scroll = isset($posted_data['devvn-scroll']) ? intval($posted_data['devvn-scroll']) : 0;

//nếu form ở ngay trên đầu page thì thay 5000 thành số nhỏ hơn. ví dụ 200

if (!$scroll || $scroll <= 5000) {

$submission->set_status( 'spam' );

$submission->set_response( 'You are spamer' );

}

unset($posted_data['devvn-scroll']);

return $posted_data;

}

add_action('wp_footer', function (){

const scrollInputs = document.querySelectorAll('input[name="devvn-scroll"]');

if(scrollInputs.length > 0) {

let accumulatedScroll = 0;

function devvnCheckScroll() {

accumulatedScroll += window.scrollY;

scrollInputs.forEach(input => {

input.value = accumulatedScroll;

});

//nếu form ở ngay trên đầu page thì thay 6000 thành số nhỏ hơn. ví dụ 300

if (accumulatedScroll >= 6000) {

window.removeEventListener('scroll', devvnCheckScroll);

}

window.addEventListener('scroll', devvnCheckScroll);

}

</script>

<?php

});

Trong code có 2 số là 5000 và 6000 như mình cũng đã note trực tiếp ở code. Con số này tuỳ thuộc vào form ở vị trí nào trên web nhưng theo mình để số đó là okie rồi nhé. Bạn có thể đổi theo ý nha