Содержание

Как добавить капчу для С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 — простая капча, которая не требует от пользователя решения головоломок и угадывания сложных символов. Чтобы пройти капчу, достаточно выбрать один из трёх простых значков (например, чашку, грузовик или ель). Также можно скрыть появление капчи до момента, пока пользователь не начнёт взаимодействовать с контактной формой.

Внимание

Перед установкой плагина капчи для контактной формы не забудьте установить плагин Contact Form 7.

Чтобы добавить капчу на сайт:

  1. 1.

    Войдите в панель управления WordPress.

  2. 2.

    Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите «Contact Form 7 Image Captcha» и нажмите Установить. Затем нажмите Активировать.

  3. 3.

    В панели управления WordPress перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [cf7ic], например, после тега [submit] (кнопка Отправить). Это можно сделать вручную или нажав на тег формы

    Изображение Captcha.

    Совет

    Если вы хотите, чтобы пользователь видел капчу только в момент взаимодействия с формой, то добавьте шорткод с тегом «toggle»: [cf7ic «toggle»].

    Нажмите Сохранить:

  4. 4.

    Добавьте контактную форму на сайт по инструкции Как добавить Contact Form 7 на сайт.

Готово, вы добавили на сайт «Image Captcha»:

Captcha WordPress для Contact Form 7

Contact Form 7 Captcha

Contact Form 7 Captcha — надёжный плагин для reCaptcha v2 («Я не робот» и невидимая капча) от Google. Для размещения капчи на сайте нужно зарегистрироваться в Google Captcha и получить API-ключи

Внимание

Перед установкой плагина капчи для контактной формы не забудьте установить плагин Contact Form 7.

Чтобы добавить капчу на сайт:

  1. 1.

    Войдите в панель управления WordPress.

  2. 2.

    Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите «Contact Form 7 Captcha» и нажмите Установить. Затем нажмите Активировать.

  3. 3.

    Перейдите на страницу регистрации сайта для Google Captcha и заполните нужные поля:

    • Ярлык — введите любое имя для капчи (например, ваш домен),
    • Тип reCAPTCHA — выберите версию капчи, которую хотите установить (в примере мы добавим на сайт reCAPTCHA v2 в виде флажка «Я не робот»),
    • Домены — укажите домен (имя сайта), для которого хотите добавить капчу,
    • поставьте галочки напротив полей Примите Условия использования reCAPTCHA и Отправлять владельцам оповещения.

    Нажмите Отправить:

  4. 4.

    На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ

    . Сохраните их.

  5. 5.

    В панели управления WordPress перейдите в раздел Настройки — CF7 Simple Recaptcha и заполните поля:

    • Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,

    • Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,

    • Invalid captcha error message — пропишите текст, который увидят пользователи в случае, если не пройдут капчу.

    Нажмите Save Settings (Сохранить настройки):

  6. 6.

    Перейдите в раздел

    Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» перед тегом [submit] (кнопка Отправить) вставьте в поле шорткод [cf7sr-simple-recaptcha] и нажмите Сохранить:

  7. 7.

    Добавьте контактную форму на сайт по инструкции Как добавить Contact Form 7 на сайт.

Готово, вы добавили на сайт капчу «Я не робот»:

Contact Form 7 капча

CAPTCHA 4WP

CAPTCHA 4WP — платный плагин с возможностью выбора вида капчи — reCaptcha v2 («Я не робот» и невидимая капча) или v3 (которая не требует действий от пользователя). Для капчи версии v2 можно менять тему (светлая или тёмная) и размер. Капчу можно настроить для всех пользователей или только для неавторизованных. Кроме этого, можно указать количество неудачных попыток входа в систему, после которых будет всплывать капча.

Внимание

Перед установкой плагина капчи для контактной формы не забудьте установить плагин Contact Form 7.

Чтобы добавить капчу на сайт:

  1. 1.

    Войдите в панель управления WordPress.

  2. 2.

    Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите «CAPTCHA 4WP» и нажмите Установить. Затем нажмите Активировать.

  3. 3.

    Перейдите на страницу регистрации сайта для Google Captcha и заполните нужные поля:

    • Ярлык
       — введите любое имя для капчи (например, ваш домен),
    • Тип reCAPTCHA — выберите версию капчи, которую хотите установить (в примере мы добавим на сайт reCAPTCHA v3),
    • Домены — укажите домен (имя сайта), для которого хотите добавить капчу,
    • поставьте галочки напротив полей Примите Условия использования reCAPTCHA и Отправлять владельцам оповещения.

    Нажмите Отправить:

  4. 4.

    На открывшейся странице «Добавление reCAPTCHA на сайт» скопируйте ключ сайта и секретный ключ. Сохраните их.

  5. 5.

    В панели управления WordPress перейдите в раздел Настройки — CAPTCHA 4WP и заполните поля:

    • Ключ сайта — введите ключ сайта, который вы скопировали на шаге №4,

    • Секретный ключ — укажите секретный ключ, который вы скопировали на шаге №4,

    Также вы можете внести дополнительные настройки. Нажмите Сохранить изменения:

  6. 6.

    Перейдите в раздел Contact Form 7 — Контактные формы. На вкладке «Шаблон формы» вставьте в поле шорткод [anr_nocaptcha g-recaptcha-response]

    и нажмите Сохранить:

  7. 7.

    Добавьте контактную форму на сайт по инструкции Как добавить Contact Form 7 на сайт.

Готово, вы добавили на сайт reCAPTCHA v3:

Теперь вы знаете какие бывают плагины капчи для контактной формы WordPress и как добавить капчу в Contact Form 7.

Помогла ли вам статья?

Да

7 раз уже помогла

Не работает reCAPTCHA в Chrome, Opera, Firefox: 5 способов исправления

reCAPTCHA является бесплатным сервисом от Google для защиты от ботов. Если встроенная система сайта имеет какие-то подозрения, она высвечивает пользователю капчу с просьбой решить простую головоломку (обычно выбрать картинки). Также ее вставляют при выполнении важных действий, вроде входа в аккаунт. Вот только reCAPTCHA не всегда работает. Головоломки могут появляться и сразу исчезать, совсем не реагировать на клики или всегда показывать ошибки. Вот как исправить любые проблемы в работе капчи.

Содержание

  • Что делать, если не работает reCAPTCHA?
    • Способ 1: обновляем браузер
    • Способ 2: отключаем VPN или прокси
    • Способ 3: сброс кэша IP
    • Способ 4: сканируем компьютер на наличие вирусов
    • Способ 5: сбрасываем настройки браузера

Начнем с самого эффективного и простого в реализации. Так постепенно рассмотрим все методы, дойдя до самого последнего – сброса настроек.

Способ 1: обновляем браузер

Чтобы обновить браузеры на базе Chromium (Chrome, Opera и др.), достаточно открыть правильную страницу. Вот ссылка на нее в Хроме. Альтернативный способ – открыть основное меню браузера и выбрать там:

  • Google Chrome. «Справка» – «О браузере Google Chrome».

  • Opera. «Обновление & Восстановление».
  • Firefox. «О Firefox».

На следующей вкладке запустится поиск актуальных версий браузера и покажется кнопка, если есть возможность его обновить.

Способ 2: отключаем VPN или прокси

Настройка VPN-сервиса может блокировать отображение определенного контента или загрузку данных с некоторых IP. Если проблема в этом, поможет временное отключение подобных служб.

Способ 3: сброс кэша IP

Если IP уже заслужил плохую репутацию и все сервисы распознают его в качестве подозрительного, сброс может помочь. Об этом свидетельствует то, что reCAPTCHA не срабатывает во всех браузерах.

Как это сделать:

  1. Правой кнопкой мыши жмем по Пуску и выбираем «Командная строка».
  2. Поочередно вводим следующие команды, после каждой нажимая Enter:
    1. netsh winsock reset
    2. netsh int ip reset
    3. ipconfig /release
    4. ipconfig /renew

Остается только перезагрузить браузер.

Способ 4: сканируем компьютер на наличие вирусов

Возможно, в систему закралось вредоносное ПО. Это легко исправить с помощью любого популярного антивируса. Даже Защитник Windows должен справиться со своей задачей.

Способ 5: сбрасываем настройки браузера

Это должно сработать у большинства пользователей, но заранее лучше включить синхронизацию данных с сервером и удалить аккаунт. Принцип сброса прост:

  1. Переходим в «Настройки» браузера через основное меню.
  2. Листаем список в самый конец, для этого придется открыть «Дополнительные настройки».
  3. Жмем на элемент «Восстановление настроек по умолчанию» или «Сброс».
  4. Подтверждаем намерение.

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

Интернет #reCAPTCHA

reCAPTCHA — Formidable Forms

Что такое Google reCAPTCHA?

Google reCAPTCHA — это программа, которая определяет, является ли пользователь человеком или роботом. Вы, наверное, видели некоторые варианты reCAPTCHA.

CAPTCHA используются многими веб-сайтами для предотвращения злоупотреблений со стороны «ботов» или автоматических программ, обычно написанных для создания спама. Боты не могут легко отправлять формы, защищенные reCAPTCHA. Formidable Forms предлагает reCAPTCHA (V2) в один клик и невидимую reCAPTCHA. При настройке reCAPTCHA для форм вашего сайта вы будете выбирать между этими двумя вариантами.

Formidable Forms — лучший плагин для конструктора форм WordPress. Получите это бесплатно!

Настройте reCAPTCHA

  1. Создайте бесплатную учетную запись для Google reCAPTCHA.
  2. Нажмите ссылку v3 Admin Console в верхнем меню.
  3. Зарегистрируйте сайт, на котором вы хотите использовать reCAPTCHA. Чтобы идентифицировать свой сайт, вставьте метку, которая может быть псевдонимом или URL-адресом веб-сайта.
  4. Выберите предпочтительный тип reCAPTCHA, и вы получите ключ сайта и секретный ключ для сайта. Дополнительные сведения см. в разделе Типы сайтов reCAPTCHA.
  5. Перейдите на свой сайт Formidable → Глобальные настройки → CAPTCHA . Выберите reCAPTCHA в качестве типа капчи и введите ключ сайта и секретный ключ.
  6. Установите для типа reCAPTCHA значение Checkbox (V2) , Invisible или v3 . Для каждого сайта разрешен только один тип reCAPTCHA.
    • v3 : Использование reCAPTCHA v3, которая проверяет запросы с оценкой. Узнайте больше о пороге reCAPTCHA.
    • Флажок (V2) : Использование reCAPTCHA v2, которая проверяет запрос с помощью флажка «Я не робот».
    • Невидимый : Использование reCAPTCHA v2, которая проверяет запросы в фоновом режиме с помощью значка Invisible reCAPTCHA.
  7. Установите язык по умолчанию для вашей reCAPTCHA.
  8. Если вы используете несколько полей reCAPTCHA на одной странице, вы должны установить флажок Разрешить использование нескольких полей reCAPTCHA на одной странице.
  9. Добавьте поле reCAPTCHA в каждую форму, которую вы хотите защитить.

    Если это многостраничная форма, поместите reCAPTCHA на последнюю страницу.

Параметры поля

Поле reCAPTCHA имеет следующие параметры:

  • Тип поля
  • Полевой ключ
  • Классы компоновки CSS
  • Позиция метки

— Премиум-функция —

  • Видимость
  • Условная логика

Специальные опции

Цвет

Когда вы вставляете в форму поле reCAPTCHA, у вас есть возможность использовать либо светлую тему (по умолчанию), либо темную тему. Вы можете настроить это в настройках поля в поле reCAPTCHA.

Обратите внимание: этот параметр не применяется к невидимой reCAPTCHA.

Размер

Когда вы вставляете поле reCAPTCHA в свою форму, у вас есть возможность сделать окно reCAPTCHA размером по умолчанию или компактным размером, как показано ниже. Это особенно полезно, если ваша форма находится в небольшом пространстве! Вы можете настроить это в параметрах поля вашего поля reCAPTCHA.

Обратите внимание: этот параметр не применяется к невидимой reCAPTCHA.

reCAPTCHA V3

Вы также можете защитить свои формы с помощью Google reCAPTCHA v3. Вместо использования флажка «Я не робот» или невидимого значка reCAPTCHA, reCAPTCHA v3 проверяет запросы с помощью оценки. Вы можете настроить оценку с помощью ползунка порога reCAPTCHA.

  • Оценка 0,5 является текущим значением по умолчанию. Оценка 0, скорее всего, будет ботом, а оценка 1, скорее всего, не ботом.
  • Установка более высокого порога блокирует больше спама, но также может блокировать больше реальных людей. Установка более низкого порога позволит увеличить количество ботов и уменьшить количество ложных срабатываний. Это также остановит меньшее количество реальных пользователей.
  • Значение баллов для каждой записи будет отображаться в деталях записи.

Как отключить reCAPTCHA

Если ваша форма включает reCAPTCHA и вы хотите отключить ее, удалите поле reCAPTCHA со страницы конструктора форм. Удалите поле reCAPTCHA в любой форме, содержащей reCAPTCHA, которую вы хотите отключить. Вы также можете посетить страницу настроек Formidable -> Global и удалить ключи reCAPTCHA.

Устранение неполадок

Невидимый reCAPTCHA не является невидимым

Если вы используете Invisible reCAPTCHA на своем сайте, и Google помечает вас как подозрительного (скорее всего, из-за многократной отправки формы с одного и того же IP-адреса), может отображаться проблема с изображением после нажатия кнопки отправки. Это ожидаемое поведение Invisible reCAPTCHA, чтобы убедиться, что вы человек, а не робот.

ReCAPTCHA введен неправильно

При отправке формы вы можете увидеть сообщение «ReCAPTCHA введено неправильно».

  1. Ключи вашего сайта могут быть неправильными. Во-первых, повторно введите ключи сайта reCAPTCHA и убедитесь, что в них нет табуляции или пробелов.
  2. Если ваш сайт использует SSL на некоторых страницах, но не на других, вы можете получить ошибку межсайтового сценария, блокирующую сценарий. Попробуйте заставить страницы формы использовать SSL.
  3. Если у вас есть другой подключаемый модуль, загружающий reCAPTCHA на той же странице, вероятно, они конфликтуют. Отключите другие плагины reCAPTCHA.

ReCAPTCHA не удалось найти предоставленную пользователем функцию

Эта ошибка может появиться, когда активен другой плагин WordPress, который загружает reCaptcha по-другому и включает скрипт на каждой странице. Мы особенно видели это с плагином «Pie Register». Узнайте, как найти конфликт в WordPress, чтобы предотвратить сбой reCAPTCHA.

Google ReCAPTCHA на локальном хосте

Если вы работаете в локальной среде, reCAPTCHA будет работать. Однако он покажет сообщение «reCAPTCHA в настоящее время работает на локальном хосте». Это нормальное поведение, и сообщение исчезнет при использовании reCAPTCHA на действующем сайте.

Не удается связаться с reCAPTCHA

При загрузке страницы с reCAPTCHA может появиться сообщение об ошибке «Не удается связаться с reCAPTCHA. Проверьте подключение и повторите попытку». Одна из причин, по которой мы видели эту ошибку, заключается в том, что для ключа reCAPTCHA установлено значение v2, но ваши формы используют невидимую reCAPTCHA. Узнайте, как переключить ключи на невидимую reCAPTCHA.

Флажок reCAPTCHA не отображается

Для отображения и проверки reCAPTCHA требуется JavaScript. Если ничего не появляется, это частый признак ошибки javascript на странице. У вас также может быть установлен другой плагин reCAPTCHA, который плохо работает, например 9. 0016 Google Captcha (reCAPTCHA) от BestWebSoft .

reCAPTCHA не работает в Chrome

Мы наблюдали сбой reCAPTCHA в определенном браузере. Случаи, которые мы видели, оказались не проблемой браузера, а связаны с кэшированием страниц для вышедших из системы пользователей. Если у вас reCAPTCHA работает в одном браузере, а не в другом, начните с отключения кэширования на вашем сайте.

Неверный домен для ключа сайта

Если вы используете reCAPTCHA на своем сайте и видите ошибку «ОШИБКА для владельца сайта: неверный домен для ключа сайта», это означает, что ваш ключ сайта больше не действителен.

Кроме того, URL-адрес вашего веб-сайта должен точно совпадать с тем, что указано в настройках ключа сайта. Поддомены не нужно добавлять отдельно. Изменения в списке доменов вступят в силу в течение 30 минут.

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

Неверный тип ключа

Если вы используете reCAPTCHA на своем сайте и видите ОШИБКУ для владельца сайта: Неверный тип ключа , это означает, что вы используете неправильный тип ключа reCaptcha. Например, ключи V3 не совместимы с reCaptcha V2, а ключи V2 несовместимы с Invisible reCaptcha. Типы ключей не взаимозаменяемы.

Убедитесь, что тип сгенерированного ключа совпадает с типом reCaptcha, который вы настроили в Formidable → Global Settings → CAPTCHA . Если вы не можете решить свою проблему, не стесняйтесь открыть тикет в службу поддержки для получения дополнительной помощи.

Неверный ключ сайта

Если вы используете reCAPTCHA на своем сайте и видите сообщение ОШИБКА: Неверный ключ сайта  , это означает, что вы используете неправильный ключ сайта reCAPTCHA и он больше недействителен.

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

Значок reCAPTCHA с изображением

Чтобы соответствовать условиям Google, значок reCAPTCHA должен быть размещен на странице. Чтобы скрыть это, вы можете добавить пользовательский CSS ниже на свой Грозный → Стили → Пользовательская страница CSS .

 .frm_form_field .grecaptcha-значок {
  дисплей:нет;
} 

Ошибка проверки Google reCAPTCHA

При отправке формы входа вы можете увидеть это сообщение об ошибке. Если у вас есть другой плагин reCAPTCHA, например Simple Google reCAPTCHA и reCAPTCHA Lite , они, скорее всего, конфликтуют.

В этой форме отсутствует капча

Если вы используете reCAPTCHA на своем сайте и видите это сообщение об ошибке, это означает, что на вашей странице есть ошибка Javascript или в вашей теме отсутствует хук wp_footer.

  • frm_recaptcha_lang

Улучшение веб-производительности ленивая загрузка reCaptcha

Несколько дней назад я запускал Lighthouse на паре своих веб-сайтов, и оценка производительности была не очень хорошей (около ~50). Большинство рекомендаций, предоставленных для улучшения оценки, были на стороне сервера, например, кэширование и сжатие ресурсов, но увеличение оценки, когда я их применил, было не таким уж хорошим. Я понял, что больше всего на производительность сайта влияет reCaptcha.

Я использую reCaptcha на каждой странице, содержащей форму, чтобы избежать спама, поэтому избавиться от нее было невозможно. После поиска в Интернете способов улучшить ситуацию я нашел эту статью, в которой объяснялось, как решить все мои проблемы. Решение потрясающее своей простотой: не загружать recaptcha при начальной загрузке страницы, а лениво загружать ее, когда пользователь фактически взаимодействует с одной из ваших форм .

Допустим, у нас есть страница с простой формой подписки, и мы загружаем reCaptcha, как это подробно описано в их документации:

 
  <голова>
    Моя страница
  
  <тело>
    <заголовок>
       

Мой замечательный сайт

<основной>
<ввод ария-метка = "Имя" тип = "текст" требуется placeholder="Джонни Мнемоник" /> <ввод aria-label="Адрес электронной почты" тип = "электронная почта" требуется placeholder="eightgigs@memory. com" /> <ввод значение = "Подписаться" тип = "отправить" data-sitekey="GOOGLE_RECAPTCHA_KEY" обратный вызов данных = "отправить форму" /> <скрипт> функция отправки формы () { document.getElementById('contactForm').submit() }

API-библиотека reCaptcha загружается со страницей, всего 1,2 КБ, но она автоматически запускает запрос на https://www.gstatic.com/recaptcha/releases/ , что добавляет к нашей странице еще 127 КБ. А что произойдет, если пользователь никогда не взаимодействует с формой? Мы загрузили файл JavaScript без всякой причины.

Решение довольно простое и легко реализуемое:

 
  <голова>
    Моя страница
  
  <тело>
    <заголовок>
       

Мой замечательный сайт

<основной> <ввод ария-метка = "Имя" тип = "текст" требуется placeholder="Джонни Мнемоник" /> <ввод aria-label="Адрес электронной почты" тип = "электронная почта" требуется placeholder="eightgigs@memory. com" /> <ввод значение = "Подписаться" тип = "отправить" data-sitekey="GOOGLE_RECAPTCHA_KEY" обратный вызов данных = "отправить форму" /> <скрипт> функция отправки формы () { document.getElementById('contactForm').submit() } // Функция, загружающая рекапчу в фокусе ввода формы функция reCaptchaOnFocus() { var head = document.getElementsByTagName('head')[0] var script = document.createElement('сценарий') script.type = 'текст/javascript' script.src = 'https://www.google.com/recaptcha/api.js' head.appendChild (скрипт) // убираем фокус, чтобы избежать ошибки js: документ .getElementById('подимя') .removeEventListener('фокус', reCaptchaOnFocus) документ .getElementById('subEmail') .removeEventListener('фокус', reCaptchaOnFocus) } // добавляем начальный прослушиватель событий к входным данным формы документ . getElementById('подимя') .addEventListener('фокус', reCaptchaOnFocus, ложь) документ .getElementById('subEmail') .addEventListener('фокус', reCaptchaOnFocus, ложь)

Позвольте мне объяснить, что здесь происходит:

  • Мы больше не загружаем JS-библиотеку reCaptcha API по умолчанию
  • Мы объявили функцию recaptchaOnFocus , которая добавляет тег script с JS-библиотекой API reCaptcha в заголовок нашей страницы при ее вызове.
  • Мы добавили прослушиватели событий во входные данные формы для вызова функции recaptchaOnFocus .

Таким образом, при начальной загрузке страницы на 2 запроса меньше, и мы сэкономили 128 КБ. Для меня это была разница между этими двумя результатами:

Я надеюсь, что это поможет вам улучшить время загрузки вашей страницы но не применяйте это только к reCaptcha. Подумайте о других библиотеках, которые вы можете загружать по умолчанию на своих страницах и которые можно откладывать аналогичным образом. Я уверен, что вы сможете найти некоторые из них, которые необходимы только в крайних случаях.

Удачного кодирования!

Если вам понравилась эта статья, подумайте поделиться им в социальных сетях или купить мне кофе ✌️

Купи мне кофе

Помимо написания статей в этом блоге я провел большую часть своего времени, работая над своим личных проектов .

LIFEBOARD.приложение

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

Зарегистрироваться

SolidityTips.