как подключить капчу к форме обратной связи
Оригинальная капча для сайта и формы обратной связи
Что такое капча (captcha)?
Вечная проблема, с которой сталкиваются большинство веб-мастеров, это богатое обилие спама в комментариях и почтовом ящике, отправленного через форму обратной связи. Было придумано большое количество способов бороться с этим недугом, но большинство из них утратили свою актуальность, так как работы научились распознавать текст на картинках и простейшие задачи.
Капча (от CAPTCHA — англ. Completely Automated Public Turing test to tell Computers and Humans Apart — полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей) – это эффективный и чуть ли не единственный метод защиты от рекламы в комментариях и письмах. Специальный тест для определения пользователя системы (человек или робот). Зачастую это автоматически генерируемая картинка с искаженными символами (буквами или цифрами).
Виды капчи
Один из самых простых и неэффективных видов капчи – это отметка в поле checkbox, согласие с чем бы то ни было. Эту проверку до сих пор использует Google при подтверждении прав на сайт в панели веб-мастера.
Цифровая или буквенная капча, содержащая различные символы, часто искаженные (с применением шума, искривления, наложения дополнительных линий или произвольных фигур). Может содержать два слова сразу.
Образная капча, основанная на выборе одного или нескольких изображений в соответствии с заданием, о чем в дальнейшем пойдет речь.
Математическая капча часто представляется в виде простого примера (сложить или вычесть целые числа). Достаточно эффективно, но, в случае сложных задач, далеко не каждый сможет вычислить конечный результат.
Оригинальная капча на PHP, CSS, JS
В этом уроке мы рассмотрим, как создать оригинальную капчу для сайта с использованием PHP, CSS и JS, которая на протяжении нескольких месяцев успешно боролась со спамом. Я не претендую на высокую эффективность данной защиты, скорее этот метод для тех, кто хочет отличиться оригинальностью.
При выборе правильного варианта обрамление картинки окрашивается зеленым, неправильного – красным. При обновлении страницы очередность изображений каждый раз меняется.
Это не обязательно должны быть животные. Составляйте группу картинок по своему вкусу.
Предположим, у вас уже есть готовая форма на HTML и составлен обработчик событий на PHP. Перед кнопкой отправки сообщения вставляем JS скрипт:
И составляем массив из наших картинок:
К правильному варианту в теге IMG дописываем класс access. Собственно, и сам код CSS:
Как подключить капчу к форме обратной связи
Курс предназначен для базовой подготовки администраторов сайтов, созданных на «1С-Битрикс: Управление сайтом». Изучив курс, вы освоите основные методы администрирования системы, а также пополните знания по темам, изученным в курсе Контент-менеджер.
Если вы добросовестно изучите курс, то научитесь:
Если вам предстоит самостоятельная установка системы или перенос сайта на хостинг, то без курса Установка и настройка Курс Установка и настройка предназначен для специалистов устанавливающих «1С-Битрикс: Управление сайтом» или «Битрикс24 в коробке».
Начальные требования
Необходимый минимум знаний для изучения курса:
Неплохо было бы иметь базовые навыки установки и администрирования *nix-систем.
У нас часто спрашивают, сколько нужно заплатить
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
уроке.
Тесты и сертификат
Иконка успешно сданного вами курса отображается в вашем профиле на Freelance, если вы укажите ссылку на ваш профиль на сайте компании 1С-Битрикс.
Комментарии к урокам
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 3 дня (24 академических часа).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
Как проходить учебный курс?
Капча для Contact Form 7 и защита от спама формы обратной связи (все нюансы)
До недавних пор я даже не интересовался какие существуют плагины антиспама в Contact Form 7 потому что проверенная годами связка с Captcha от BestWebSoft работала как часы. Однако недавно разработчики, продвигая свой личный модуль обратной связи, перевели поддержку Contact Form7 в платную PRO версию. Хотя на самом деле это не такая уж и большая проблема, т.к. в самой форме имеется встроенная интеграция официальной Google Captcha. Единственный минус этого подхода (как по мне) в использовании 3-тьей версии капчи без возможности отката до предыдущей.
Итак, первым делом, чтобы внедрить защиту от спама в Contact Form 7 для WordPress сайта, мы после установки плагина обратной связи переходим в его подраздел “Интеграция”.
Здесь в блоке reCAPTCHA имеется на официальный сайт этой капчи. Переходите по ссылке, где представлена краткая информация и самой технологии и ее использованию. Там же на странице будет кнопка «Admin Console», позволяющую залогиниться в свой Гугл-аккаунт или для перехода на регистрацию новой учетной записи.
В личном кабинете находите иконку “+” для создания/добавления нового веб-ресурса. После нажатия увидите следующую форму:
На следующем шаге вам выдадут 2 значения:
Можете записать их в какой-то файл или временно не закрывать данное окно.
Возвращаемся в наш модуль обратной связи и кликаем по кнопке «Настройка интеграции» (см. первый скриншот выше). На открывшейся странице вводите свои ключи.
Включение reCAPTCHA в Contact Form 7 (v3 или v2)?
Теперь мы приходим к самому интересному – как поставить капчу в Contact Form 7. И тут важным моментом есть то, какой именно вариант защиты вы выбрали. Сейчас Гугл продвигает третью версию и разработчик модуля внедрил именно ее (как передовую технологию). Однако, если почитать форум поддержки в репозитории, то можно увидеть отзывы многих пользователей о том, что данный антиспам фильтр не всегда хорошо справляется.
В общем, если вы решили применять reCAPTCHA v3, то никакие дополнительные настройки после ввода ключей делать не нужно. Вам даже не требуется размещать в форме шорткод [recaptcha], который теперь просто игнорируется. Скрипт капчи работает сразу «из коробки» и самостоятельно в фоновом режиме будет определять является человек реальным или ботом.
Плагин Contact Form 7 – reCaptcha v2
Как я уже говорил выше, новой технологии пока не доверяю, поэтому нашел для себя модуль, совместимый с reCAPTCHA v2. Из его однозначных плюсов выделю: активную и быструю работу над ошибками, более 70к загрузок, простота подключения. Скачивайте отсюда либо ставьте сразу из WP-админки.
После его активации вам нужно:
1. Зайти в раздел «Contact Form 7» — пункт «Версия reCaptcha», где выбираете вторую (источник, как и был по умолчанию, остается google.com).
2. Кликаем по кнопке “Отправить”.
3. Далее открываем для редактирования нужную форму и добавляем перед кнопкой отправки шорткод [recaptcha]. Сохраняем настройки и проверяем результат на вебсайте.
Для шорткода, кстати, есть несколько доп.параметров.
Дополнительные нюансы. Если вдруг по какой-то причине автор забросит этот замечательный плагин, то выбирая среди всех остальных плагинов для капчи в Вордпресс с подобными функциями я бы посоветовал попробовать Advanced noCaptcha & invisible Captcha (v2 & v3) (находится тут). Его аналогично часто упоминают как альтернативу, но баги там исправляются чуть менее быстро (хотя также имеется 70к скачиваний).
Если вы используете в работе Flamingo, то я бы настоятельно рекомендовал ставить капчу на Contact Form 7 ибо спам в данном случае изначально фильтруется через Akismet. И когда последний у вас не настроен, то ооочень многие реальные сообщения из формы помечаются как спам. Если я правильно понял, форма в первую очередь ориентируется на Akismet, когда в проекте нет более серьезного решения от Гугла. В общем, тут еще надо тестировать всякие нюансы, но чтобы бы вы не выбрали без антиспама Flamingo лучше не оставлять.
Как добавить капчу для Сontact Form 7
Если вы в поисках оптимального плагина капчи для Contact Form 7, эта статья вам поможет. Мы рассмотрим самые популярные плагины капчи и расскажем, как добавить их на сайт WordPress. Подробнее о том, что такое капча и какие виды капчи бывают, читайте в статье Капча для сайта на WordPress.
Чтобы добавить капчу для Contact Form 7, нужно установить совместимый с ней плагин, активировать и настроить его.
Плагины капчи для Contact Form 7
Плагины капчи для Contact Form 7 — это расширения, с помощью которых можно добавить капчу для контактной формы Contact Form 7 в WordPress. Если у вас ещё не установлен плагин Contact Form 7, это можно сделать по инструкции Контактная форма WordPress.
Ниже мы рассмотрим, как настроить три популярных плагина капчи: Contact Form 7 Image Captcha, Contact Form 7 Captcha и Advanced noCaptcha & invisible captcha (v2 & v3).
Contact Form 7 Image Captcha
Contact Form 7 Image Captcha — простая капча, которая не требует от пользователя решения головоломок и угадывания сложных символов. Чтобы пройти капчу, достаточно выбрать один из трёх простых значков (например, чашку, грузовик или ель). Также можно скрыть появление капчи до момента, пока пользователь не начнёт взаимодействовать с контактной формой.
Чтобы добавить капчу на сайт:
В панели управления WordPress перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [cf7ic], например, после тега [submit] (кнопка Отправить). Это можно сделать вручную или нажав на тег формы Изображение Captcha.
Готово, вы добавили на сайт «Image Captcha»:
Captcha WordPress для Contact Form 7
Contact Form 7 Captcha
Contact Form 7 Captcha — надёжный плагин для reCaptcha v2 («Я не робот» и невидимая капча) от Google. Для размещения капчи на сайте нужно зарегистрироваться в Google Captcha и получить API-ключи
Чтобы добавить капчу на сайт:
На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.
В панели управления WordPress перейдите в раздел Настройки — CF7 Simple Recaptcha и заполните поля:
Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,
Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,
Invalid captcha error message — пропишите текст, который увидят пользователи в случае, если не пройдут капчу.
Нажмите Save Settings (Сохранить настройки):
Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» перед тегом [submit] (кнопка Отправить) вставьте в поле шорткод [cf7sr-simple-recaptcha] и нажмите Сохранить:
Готово, вы добавили на сайт капчу «Я не робот»:
Contact Form 7 капча
Advanced noCaptcha & invisible captcha (v2 & v3)
Advanced noCaptcha & invisible captcha (v2 & v3) — плагин с возможностью выбора вида капчи — reCaptcha v2 («Я не робот» и невидимая капча) или v3 (которая не требует действий от пользователя). Для капчи версии v2 можно менять тему (светлая или тёмная) и размер. Капчу можно настроить для всех пользователей или только для неавторизованных. Кроме этого, можно указать количество неудачных попыток входа в систему, после которых будет всплывать капча.
Чтобы добавить капчу на сайт:
На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.
В панели управления WordPress перейдите в раздел Настройки — Advanced noCaptcha & invisible captcha и заполните поля:
Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,
Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,
Также вы можете внести дополнительные настройки. Нажмите Сохранить изменения:
Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [anr_nocaptcha g-recaptcha-response] и нажмите Сохранить:
Готово, вы добавили на сайт reCAPTCHA v3:
Теперь вы знаете какие бывают плагины капчи для контактной формы WordPress и как добавить капчу в Contact Form 7.
Как установить капчу на WordPress-сайт: инструкция и обзор лучших плагинов
Капча – это отличный способ защитить свой ресурс от спама, рекламы и нежелательных отправок данных с формы. Установка капчи необходима на сайтах с открытой регистрацией или форумах, где отправлять сообщения может любой пользователь. Если предоставить открытый доступ ко всем текстовым полям, то в последующем будет сложно очистить сайт от рекламного мусора.
Именно поэтому многие используют капчу, и сегодня я вам покажу, как установить ее на сайт с WordPress.
Что такое капча и как она работает
CAPTCHA – это компьютерный тест, используемый для определения того, кем является пользователь системы: человеком или компьютером. Данный механизм используется в целях устранения спама и автоматизированного извлечения данных из веб-сайтов.
Одной из самых популярных капч является reCAPTCHA от Google. Наверняка вы ни раз сталкивались с тем, что нужно подтвердить, что вы не робот. Это она и есть – инструмент от Google, который был разработан для борьбы со спамом и ботами.
В разное время такую проверку проходили различными способами. Например, когда-то нужно было прослушивать текст, а потом его вводить либо печатать увиденные символы в отведенной для этого строке. С 2015 года для подтверждения личности достаточно поставить кнопку напротив графы «Я не робот», как это проиллюстрировано выше.
Не так давно вышло еще одно обновление – теперь доступна invisible reCAPTCHA, которая позволяет осуществлять фоновую валидацию действий пользователей на сайте. В отличие от предыдущей версии, она не требует от пользователей того, чтобы они нажимали на кнопку «Я не робот».
Invisible reCAPTCHA позволяет совершать на сайте какие-либо действия без ввода капчи. По умолчанию только самые подозрительные действия пользователей не позволят им пройти дальше. В этом случае капча предложит им решить задачу.
Стоит также понимать, что капча – это не только инструмент от Google, существует множество инструментов от других разработчиков.
Установка капчи на WordPress
Для установки капчи от нас потребуется всего две вещи – это регистрация сайта на специальном сервисе от Google и установка плагина, в котором будут прописаны все полученные данные из сервиса.
Готово! Теперь ваш сайт защищен от надоедливых ботов. Это был лишь один из способов установки капчи на WordPress. Мы также можем установить ее через HTML-код либо с помощью других плагинов, о которых речь пойдет ниже.
Топ-5 плагинов для установки капчи на WordPress
Выше мы установили капчу от Google, но это не единственная возможная капча, о чем я уже говорил. Есть множество других, о которых я расскажу в этом разделе. Здесь не будет уже рассмотренного плагина, но будут другие, также отлично справляющиеся со спамом и ботами.
Really Simple CAPTCHA
Первый в нашем списке плагин – это Really Simple CAPTCHA, используемый как дополнительный модуль для плагина Contact Form 7. Это очень простая и понятная Captcha для пользователей, с помощью которой можно легко защититься от спама. Достаточно ввести код с картинки, и капча будет пройдена.
Плюсы:
Минусы:
Ссылка на скачивание: Really Simple CAPTCHA
SI CAPTCHA Anti-Spam
SI CAPTCHA Anti-Spam добавляет различные методы анти-спама для форм в WordPress: комментариев, регистрации, утерянного пароля, логина или сразу всех. Он отлично совместим с WP, WPMU и BuddyPress.
Плюсы:
Минусы:
Ссылка на скачивание: SI CAPTCHA Anti-Spam
Captcha
Captcha – еще один плагин, позволяющий добавить капчу. Он устанавливает защиту к стандартным формам на WordPress с помощью математической логики. Расширение также совместимо с Contact Form, что позволяет создать отлично защищенную форму обратной связи.
Плюсы:
Минусы:
Ссылка на скачивание: Captcha
Google Captcha (reCAPTCHA) by BestWebSoft
Это один из самых популярных плагинов на WordPress, позволяющий установить Google-капчу в два клика. Google Captcha (reCAPTCHA) by BestWebSoft является универсальным инструментом, так как позволяет установить проверку на большинство разделов сайта. Среди них формы регистрации, входа, напоминания пароля, добавления комментариев, контактов и т.д.
Плюсы:
Минусы:
Ссылка на скачивание: Google Captcha (reCAPTCHA) by BestWebSoft
Confident CAPTCHA
Confident CAPTCHA – это не простой ввод символов, как было в предыдущих случаях, а капча с простым выбором картинки. Для прохождения проверки достаточно выбрать картинку, на которой изображен предложенный объект, например цветок.
Плюсы:
Минусы:
Ссылка на скачивание: Confident CAPTCHA
Заключение
Установка капчи на WordPress – это простой способ защитить свой сайт от нежелательных ботов и спама. Сегодня мы убедились, что в ее настройке и установке нет ничего сложного – достаточно лишь установить нужный плагин.