Contact form 7 защита от спама без капчи

Недавно понадобилось защитить сайт от спама в форму обратной связи от Contact Form 7 для WordPress. Простая математическая капча не спасала, а рекапчу ставить не хотелось (тем более ее уже тоже пробивают).

При защите от спама я исходил из того, что бот не исполняет javascript, хотя это не совсем так, есть например Zennoposter, однако мое решение в первую очередь от ковровых бомбардировок, а не от точечных ударов поэтому задача сводилась к тому, чтоб создать поле без которого Contact Form 7 не отправляло бы форму, и оперировать его значением с помощью JS при отправке реальных пользователях.

Самым лучшим мне показалось использовать чекбокс — или в простонародье галочку. Логика работы галочки необычная — форма отправляется только если галочка снята, при этом дефолтное состояние галочки — checked. То есть если заходит бот он

  • ничего сделает данному полю (если он его не знает)
  • сделает ее checked

т.е. в результате галочка будет checked и форма не отправится, и спам соответственно тоже.

Если же заходит браузер исполняющий JS, то галочка снимается через JS и форма отправляется.

Реализация:

1. Создаем в Contact Form 7 чекбокс

[acceptance agree class:agree default:on invert]

acceptance — собственно сам чекбокс
default:on — по умолчанию checked
class:agree — class=»agree»
invert — отправлять форму только если checked снят

2. Убираем чекбоксу видимость через CSS

.agree {display:none}

3. Снимаем галочку через JS

<script language="javascript">
jQuery('.agree').prop('checked', false);
</script>

или на нативном JS

<script language="javascript">
       var x = document.getElementsByClassName("agree");
       var i;
       for (i = 0; i < x.length; i++) {
            x[i].checked = false;
       }
</script>

Скрипт нужно поместить ниже чем чекбокс, и лучше всего обернуть его document.ready.

Это собственно и всё. Защитить Contact Form 7 от спама как видите — несложно, сложнее было придумать логику, а делов по реализации — на 15 минут.

85 thoughts on “Contact form 7 защита от спама без капчи”

  1. Здравствуйте!
    Прочитала вашу статью. Интересно вооплотить на своем сайте. Можно для «чайников» более подробно указать в какой файл плагина CF7 вставлять код и в какую часть именно. И как обернуть в документ?
    Заранее спасибо.
    Ответ можно и на почту если Вас не затруднит.

    1. Вставлять надо не в файл плагина, а в шаблон сайта.
      для тех кто плохо разбирается, то
      Админка сайта — Внешний вид — Редактор
      п.2. Таблица стилей (style.css)
      п.3. Основной шаблон (index.php), перед закрывающим тегом

  2. Спасибо! Но не совсем понятно, какие файлы нужно редактировать в действиях по пунктам 2 и 3.

  3. Блин вообще тема, реализовал по инструкции все работает. Не люблю капчу просто, надеюсь боты не пройдут.

  4. Куда это добавлять? — Снимаем галочку через JS

    В какой именно файл? В ВордПресс нет файла индекс, то есть им не пользуется. Напишите точнее. В какой файл php его вбивать?

    1. А смысл в скриншотах, если темы разные. Вбивать в JS темы желательно, если нет то в footer.php

  5. Что то не работает, последняя версия CF7, хром.
    скрипт корректно отрабатывает, снимает чекбокс, но на кнопку все равно не нажать, пока руками чек бокс не поставишь или снимешь заново

  6. Здравствуйте! Отличная идея, но разобраться никак не могу.
    Я правильно понял, что чекбокс необходимо поместить в тело каждой формы обратной связи в contact form 7? Или надо создать новую форму с чекбоксом?
    Не понимаю, куда нужно поместить скрип, если чекбокс должен быть в contact form7, скрип должен быть в index.php, при этом скрипт должен располагаться ниже чекбокса…Как это возможно, если они в разных местах?)

    1. Правильно понимаете — чекбокс нужно поместить в каждую форму, а скрипт добавьте в любой .js темы, или прямо в тело страницы

  7. Скрипт не срабатывает в мобильной версии. То есть галочка не снимается и соответственно кнопка «Отправить» не работает. Как заставить работать на мобильных устройствах?

    1. Вообще мобильники должны обрабатывать JS, на каком именно браузере не работает на мобильниках?

      1. пробовал добавлять в форму так, но тогда $( document ).ready(function() {
        и }); вылезает на сайте в форме, но в принципе и без него все работает как я писал.. только кроме IE

  8. Добрый день!

    А как сделать, если не WordPress? Можно ли просто в форму обратной связи поставить?

    1. Конечно можно, просто решение будет чуток другое. Добавьте любое скрытое поле и проверяйте его заполненность через JS, или на какое то значение в обработчике.

  9. В index.php страници добавил, Жава работает а вот скрыть не получается
    пробовал добавлять в style.css. style_core.css. 0 эффекта

    .agree { display:none;}
    .agree { visibility: hidden;}

    var x = document.getElementsByClassName(«agree»);
    var i;
    for (i = 0; i < x.length; i++) {
    x[i].checked = false;
    }

  10. Вопрос: как заставить работать эту защиту от спама, если контактная форма открывается во всплывающем окне? Всплывающее окно создается через Popup Maker

    1. Точно как же как обычную, тут же используется логика самого CF7 и стили которые галочку убирают.

      1. К сожалению с формой во всплывающем окне такое сделать не получается: при вставке скрытого чекбокса контактная форма не отправляется. Без всплывающего окна формы с защитой работают отлично.

        1. Затрудняюсь сказать — всплывающее окно ничем не отличается от обычного, за исключением того что оно в начале скрыто — его даже в коде видно. Попробуйте через стили убрать невидимость и отправить таким образом.

  11. Добавил javascript прямо в шаблон формы сразу после [acceptance agree class:agree default:on invert]. Работает!

    1. У меня было также, оказалось, что нужно было почистить кэш и все заработало.

    1. То закидываем в каждую, поэтому защита и сделана через класс, чтоб можно было сколько угодно добавлять на страницу

  12. В целом отличная идея, начал тестировать.

    Как маленькое дополнение:
    на строке .agree {display:none} нужно в конце поставить точку с запятой 😉

  13. для некоторых тем с особенностями, нужно эмулировать клик
    $(‘.agree’).trigger(‘click’);

  14. У меня не идет запрет на нажатие отправки формы. И оборачивал и так и не понял что не работает. Форма работает через Popup Maker. Может из-за этого?

  15. Здравствуйте! В какое именно место style.css нужно вставить .agree {display:none}? Большое спасибо за ответ!

  16. Автор, молодец.
    Применил методику ко всем сайтам. Спам как рукой сняло. Столько сложных и продуманных решений перепробовали, а нужно было всего-то пару строк кода добавить 🙂
    Читая все что написано выше, люди, очнитесь, написано все доступным языком. А если не понимаете, зачем лезете в сайтостроение? На любой бирже рублей за 500 вам это настроят!

    1. Спасибо.
      Откровенно говоря — немного спама проскакивает, но достаточно еще одно поле подцепить и все будет ОК если будет время то проверю и напишу.

  17. Спасибо!
    Интересный трюк. Посмотрим, на сколько эффективный =)

    p.s. для разработчика веб-приложений вставить код в одну форму и два файла — дело не более 5 минут 😉

    p.p.s. любопытно пошагово вносить изменения и смотреть, что получается. После первых двух шагов форма становится заблокированной, когда добавил галочку в фору и скрыл её через css… 😀

  18. Доброго времени суток

    Сама галочка работает отлично, но функция, которая снимает проставленную галочку — не работает.

  19. Хорошая статья, спасибо!

    Для тех кто не понял, как реализовать это на своей сайте:
    1. Добавить в форму
    [acceptance agree class:agree default:on invert]

    2. Добавить в style.css
    .agree {display:none}

    3. Добавить JS код (лучше в саму форму, чтобы код не выполнялся на лишних страницах!)

    jQuery(‘.agree’).prop(‘checked’, false);

  20. Добрый день всем!
    Данный способ не работает при использовании плагина WP Super Cache.
    Поэтому если хотите пользоваться данным способом, то используйте другой плагин для кэширования.
    Теперь моё мнение по поводу способа — как антиспам работает, устанавливаю на всех своих сайтах и всех проектах клиентов. Большинство левых сообщений отсеиваются.
    На одном из моих проектов полностью ликвидировали проблему.

  21. Классный способ! На первый взгляд, должен работать.
    Но у меня сомнения: если в браузере включена поддержка JS, разве не может быть она включена для бота? Т.е. бот, как и обычный пользователь, получит в итоге unchecked нашу галочку и весь способ насмарку. Это первое.
    Второе, это то, что боту без разницы, скрыт чек-бок или не скрыт. Поэтому «ничего сделает данному полю (если он его не знает)» говорит о том, что бот вообще ничего не знает. Если он умеет находить поля, необходимые для заполнения, и отправлять форму, то найти наш чек-бокс не составит труда. Кроме того, ему достаточно сделать две попытки «наспамить», одна из которых увенчается успехом: чекнуть галочку, или un-чекнуть. Все зависит от качества бота.
    Очень надеюсь, что моя теория неверна. И на всякий случай такое решение реализовал на своих сайтах

    1. Вы не учитываете то, что бот в 99,9% случаев работает в режиме ковровой бомбардировки, что пробилось то и норм, а заморачиваться почему не пробит ваш конкретный блог будет 0.1%, но это тот случай когда «вас заказали», и тут подход намного сложнее.

      А чекбокс от юзера скрывается, чтоб он кликать по нему не начал

      1. Хорошо, что такая вероятность.
        Т.е. вы утверждаете, что у бота не сработает JS?

  22. Приветствую
    Решение соблазнительно простое, люблю такие.
    Но у меня почему-то не работает снятие флажка с помощью JS…
    Код присутствует в форме ниже чекбокса, document ready присутствует (хотя пробовал все варианты)…

    Код с чекбоксом:
    https://hela.com.ua/imNotRobot_jsProblem.jpg

    Буду признателен за помощь по внедрению вашего варианта.

    1. Не актуально — протупил, просто в инспекторе неправильно отображается текущее состояние объекта.

  23. Здравствуйте, помогите пожалуйста, чекбокс устанавливается для контактной формы которая отображается в popup окне. Чекбокс не скрывается, он виден. Что можно сделать?

  24. Чекбокс не скрывается. Добавил в styles.css
    {
    .agree {display:none}
    }

    Добавил в index.php

    jQuery(‘.agree’).prop(‘checked’, false);

    перед
    <?php
    В форме галочка есть и ее видно.

  25. Для тех у кого не работает в 2021 году снятие галочки (после обновления contact form 7) еще можно реализовать так

    window.onload = function() {
    var x = document.getElementsByClassName(«agree»);
    for(var i = 0; i < x.length; i++) {
    x[i].removeAttribute('checked');
    }
    };

    1. Спасибо большое. Работает с WP Fastest Cache и W3 Total Cache.
      Только «agree» нужно в «agree» (англ. скобки)

  26. В новом Contact form 7 не работает, при отправке появляется надпись «accept the terms to proceed». Решил добавлением тега optional после invert, чтобы получилось так — [acceptance agree class:agree default:on invert optional], тестирую.

    1. Да, но если вы ставить параметр optional, то поле становится необязательным, а значит вся защита коту под хвост

    1. Таки что нынче после обновления форм делать нужно? Можете написать фулл ман для не очень сведующего?

  27. Не работает от слова совсем
    [acceptance agree class:agree default:on invert] — появляется галочка в контакт форме

    вставляю в style.CSS — .agree {display:none} — ноль эмоций — галочка видна.

    вставляю в index.php —
    jQuery(‘.agree’).prop(‘checked’, false);

    вообще по*ую — галочка не снимается.
    короче не работает код от слова совсем.

    1. Только у тебя и не работает, зима скоро, может тебе стоит помахать лопатой то?

Добавить комментарий для Виталий Отменить ответ

Ваш e-mail не будет опубликован.