После создания сайта и размещения на нем форм обратной связи, со временем на вашу почту начинают приходить письма от “Eric Jones” и других ботов рассылающих спам. В день может приходить по нескольку писем, которые со временем просто забивают ваш почтовый ящик, а среди кучи спама, очень сложно не пропустить заявки от реальных клиентов. Для решения проблем со спамом существует множество инструментов и сервисов, но наверное самый действенный способ, это подключение “recaptcha”. В этой статье подключим к форме обратной связи от Elementor, защиту от спама recaptcha v3 от Google.
reCAPTCHA – это один из самых популярных способов защиты от спама, благодаря которой вы больше не будете получать письма от ботов.
Получение ключа reCAPTCHA v3
Для получения ключа капчи, необходимо перейти на сайт Google reCAPTCHA и нажать на кнопку «v3 Admin Console»
Если у вас нет аккаунта в Google или вы не авторизованы, то гугл предложит создать новый аккаунт или авторизоваться (наличие аккаунта гугл обязательно). После авторизации откроется окно в котором необходимо заполнить данные:
- Укажите название вашего проекта (для удобства можно вписать название вашего сайта),
- Выберите тип reCAPTCHA v3,
- Добавьте ваш домен и нажмите “Enter” или иконку “+” слева от домена,
- Отметьте чекбокс условий использования,
- Нажмите кнопку “Отправить”.
Откроется окно в котором система отображается ключ сайта и секретный ключ. Сохраняем эти ключи или пока не закрываем эту страницу.
Добавление ключа reCAPTCHA v3 в Elementor PRO
Для добавления полученных ключей reCAPTCHA v3 в Elementor PRO, необходимо перейти в панель управления WordPress нашего сайта. В левом меню ищем Elementor
- > Настройки
- > Вкладка “Интеграции” (вверху) и ищем пункт reCAPTCHA v3
- > Вставляем полученный ключ сайта
- > Вставляем полученный секретный ключ
- > Прокручиваем вниз и нажимаем кнопку “Сохранить”
Порог оценки я обычно оставляю по умолчанию “0,5”.
На этом этапе reCAPTCHA v3 добавлена в Элементор ПРО и можно переходить к настройке формы обратной связи.
Подключение reCAPTCHA v3 к форме обратной связи Elementor PRO
Для того чтобы капча начала работать в форме обратной связи Элементор ПРО, необходимо перейти на страницу или попап, где размещена форма обратной связи и выполнить несколько простых действий:
- Выбрать форму чтобы открылось окно ее редактирования,
- Выбрать вкладку “Содержимое”,
- В блоке “Поля формы” нажать кнопку “Добавить элемент”,
- В открывшемся элементе выбрать пункт раскрывающегося списка “Тип”,
- В раскрывающемся списке выбрать reCAPTCHA v3,
- Не забываем сохранить/опубликовать внесенные изменения на странице.
Если у вас на сайте установленно несколько форм обратной связи Elementor PRO, то необходимо проделать эти шаги на каждой форме.
Когда внесены все изменения, можно перейти на страницу, где размещена форма обратной связи. На странице с настроенной формой будет отображаться логотип reCAPTCHA, который сообщает, что в формах обратной связи на этой странице работает защита от спама.
Скрываем значок reCAPTCHA v3
На некоторых сайтах отображение логотипа капчи от гугла неуместно, мешает или просто захотелось его скрыть, можно добавить простой CSS код:
.grecaptcha-badge {
display: none!important;
}Код можно добавить в стили вашей темы, через плагин добавления сниппетов (рекомендую использовать этот способ), или через функцию добавления пользовательского CSS в Elementor PRO.
Но, по условиям соглашения, которые мы принимали на момент выпуска ключей капчи, в случае, если мы хотим скрыть логотип reCAPTCHA, то Google просит разместить пользовательское соглашение под нашей формой, но как показывает практика, это не обязательно.
Для добавления пользовательского соглашения, необходимо добавить еще один элемент к нашей форме обратной связи, который называется “Соглашение”
И в это соглашение вставить следующий текст:
<p style="font-size: 10px;color: gray;">This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a>and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>И теперь наша форма обратной связи будет выглядеть примерно так: появится текст пользовательского соглашения, а логотип капчи пропадет.
Теперь формы обратной связи на вашем сайте WordPress защищены от спама.
