Captcha contact form 7: Как добавить капчу для Сontact Form 7

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

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

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-ключи

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

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 капча

Advanced noCaptcha & invisible captcha (v2 & v3)

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

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

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

   Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите «Advanced noCaptcha & invisible captcha (v2 & v3)» и нажмите Установить. Затем нажмите Активировать.

3. 3.

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

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

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

4. 4.

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

5. 5.

   В панели управления WordPress перейдите в раздел Настройки — Advanced noCaptcha & invisible captcha и заполните поля:

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

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

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

6. 6.

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

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

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

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

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

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

Contact Form 7 – защита от спама с помощью recaptcha

В данном видео мы разберем, как максимально просто и эффективно защитить форму обратной связи «Contact Form 7» на WordPress сайте от спама. Вы наверняка сталкивались с ситуацией, когда какой-то упрямый бот начинает заполнять рандомными или спамными данными все формы на вашем сайте, присылая вам несколько десятков, а то и сотен сообщений. Чтобы такого не происходило, можно воспользоваться бесплатным сервисом/расширением для «Contact Form 7» – «Google reCAPTCHA».

Google reCAPTCHA  — защита от спама

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

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

Бывали случаи, когда я ставлю галочку, и всплывает картинка от Google reCAPTCHA версии 2, где нужно выбрать какую-то часть картинки. Или кликаешь на какие-то части изображений, в итоге тратишь дополнительно несколько минут на то, чтобы отправить эту форму, потом «забиваешь» и просто не отправляешь ее.

Настройка Google reCAPTCHA  версии 3 в Contact Form 7

В этом видео рассмотрим вариант, который является наименее время затратным. Он не мешает настоящему пользователю. Более того, даже не входит в поле его внимания, то есть пользователь не видит этой защиты.

Подключение Google reCAPTCHA

Для того чтобы подключить «reCAPTCHA», нужно зайти в меню Contact Form 7 — пункт «Интеграции»:

• Здесь есть раздел называется «reCAPTCHA». Чтобы ее активировать для нового сайта, переходим по ссылке google.com/recaptcha.
• Переходим в консоль администрирования. Если у вас несколько сайтов или несколько проектов, то выбирайте нужный. Если же у вас нет созданных проектов, то можно завести новый.
• Нажимаем плюсик в правом верхнем углу — «Создать».
• В графе «Ярлык» указываем название проекта. Например, если это группа однотипных сайтов, то там можно написать «Интернет-магазины». Или если у вас только один сайт, то можете написать его название.
• Выбираем вид reCAPTCHA. Версия 3 — последняя, когда пользователю не нужно ставить какие-то галочки, решать примеры, разгадывать картинки, если нет подозрения, что это робот. Это наиболее простой вариант. В данном случае мы выбираем его.
• Добавляем домены, например, site.com или mail.ru. В зависимости от того, как выглядит ваш домен.
• Указываем электронную почту владельца, принимаем условия использования и сохраняем.

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

Ключи reCAPTCHA

Допустим, мы добавили все нужные сайты, и reCAPTCHA генерирует нам два ключа. Это ключ сайта и секретный ключ. Мы копируем эти настройки и вставляем их в настройки интеграции в Contact Form 7.

Если вы пользуетесь Contact Form 7 уже давно, и у вас стоит предыдущая версия reCAPTCHA (версия 2 или версия 1), то вам нужно удалить эти ключи нажатием кнопки «Удаление ключей», а потом заново вставить скопированные ключи в поля «Ключ сайта» и «Секретный ключ» для версии 3.  После этого у вас на сайте появится  всплывающее окошко, где написано: «защищено reCAPTCHA» .

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

Google reCAPTCHA + Honeypot for Contact Form 7

Бывают такие случаи, когда одной только reCAPTCHA для защиты от спама бывает недостаточно. В таких случаях можно комбинировать reCAPTCHA и дополнительные методы защиты. Одним из вариантов, который дает хорошие результаты, является «Honeypot». Так называется плагин для «Contact Form 7» – «Honeypot for Contact Form 7».

Он добавляет на форму невидимое поле, которое незаметно для пользователей. Но боты, так как они стараются заполнить все поля, заполняют и его. А когда это поле заполнено, то форма не отправляется, то есть форма не валидируется, спам не отправляется.

После установки плагина «Honeypot for Contact Form 7» на вкладке «Шаблон формы» появляется новая кнопка «Honeypot» — это генератор тега. Если его нажать, то всплывает окошко, где можно задать любое имя для тега. Лучше использовать завуалированное поле стандартного назначения, которое с большой вероятностью бот заполнит(website, mail, name и тд…).  Потому что они не могут различить, что это за поле: валидное или не валидное(для ботов все поля одинаковы).

Можем указать ID, Class опционально, далее можем скрыть этот CSS, который отвечает за это невидимое поле, поставив галочку рядом с надписью «Move inline CSS (optional)», чтобы ботам было сложнее его опознать.

После этого у нас генерируется тег типа [honeypot website-5 move-inline-css:true], и поле становиться не заметным для пользователя. Когда это поле никак не заполнено, то форма проходит валидацию и срабатывает отправка данных.  А когда это поле заполняет бот, то валидация формы не проходит, и данные не отправляются.

Так же для удобства пользования можно скрывать всплывающий значок «Google reCAPTCHA». Для этого можно добавить CSS  правило:

.grecaptcha-badge{display:none;}

В данном случае я это указываю в настройках темы:

• Так как reCAPTCHA подгружается на каждой странице, то нам на каждой странице нужно его скрыть с помощью CSS.
• В настройках темы я указываю, что хочу скрывать этот бейджик на всех страницах, где он появляется.
• Если мы обновим страницу, его не будет видно. На самом деле он есть, просто для пользователя он не виден, потому что мы скрыли его с помощью CSS, чтобы он не отнимал место, особенно на мобильных устройствах.

Если у вас возникли вопросы, или вам нужна помощь, перейдите на страницу контактов и оставьте ваш комментарий, используя форму внизу страницы.

Подключение Google reCAPTCHA v3 к Contact Form 7

Установка reCAPTCHA v3 для Contact Form 7 в WordPress не вызовет сложностей даже у неопытных пользователей. Процесс очень простой. Для интеграции возиться с кодом, по сути, не нужно. Инструкцию, конечно же, решил написать. На всякий случай. Надеюсь, принесет пользу. Начнем.

Нужна помощь? Не проблема, напишите мне на почту: [email protected]

Получаем ключи в Google reCAPTCHA

Прежде всего нужно установить плагин Contact Form 7. Конечно, не обязательно в первую очередь, но лучше сразу. Далее переходим по ссылке: https://www.google.com/recaptcha/intro/v3.html. Нажимаем кнопку Admin console в верхнем правом углу.

Начинается этап подключения интеграции reCAPTCHA v3 для Contact Form 7. Те, кто уже работал с сервисом, наверняка увидели, что дизайн серьезно изменился. Смотрим на скриншот. Стрелочкой указано, куда нажимать. Пустое поле — статистика. Просто невидимой рекапчей никто не пользовался, потому стата пуста. Если мало посетителей, то в статистике так же ничего не будет. Нажимаем на кнопку.

Вот и перешли к следующему окну. Здесь нужно указать данные домена. Все довольно просто, смотрите на примере ниже.

Итак, по порядку:

1. Вбиваем ярлык. Это название проекта. Выбирайте любое удобное.

2. Выбираем тип рекапчи. В нашем случае — reCAPTCHA v3.

3. Указываем домен. Без http, htpps, если есть www, то тоже нужно указать.

4. Если нужно, указываем дополнительные адреса электронной почты.

5. Принимаем условия, листаем ниже. Отправляем данные.

После выполнения данных действий появится следующая страница.

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

Подключение reCAPTCHA v3 к Contact Form 7

Выбираем плагин, стрелочкой указано куда следует нажать. Выбираем раздел «Интеграция». В открывшемся окне в поле reCAPTCHA нажимаем кнопку Setup Integration. Попадаем в следующий раздел.

Кликните для увеличения

Копируем ключи, размещенные на сайте Google, вставляем в отмеченные поля. Нажимаем кнопку Save Changes. Установка reCAPTCHA v3 для Contact Form 7 закончена. Как видите, все просто. Но теперь появилась другая проблема. Появился раздражающий логотип в нижнем правом углу экрана. Как исправить, смотрите здесь.

Кейс борьбы со спамом в Contact Form 7 (WordPress)

Плагин Honeypot перестал справляться

На сайте стоял простой плагин, который раньше спасал от 99% спама. Принцип его работы прост: он создаёт у формы невидимое поле, которое привлекает интерес спам-ботов. Кто попытался заполнить такое поле – тот и спамер. Наш китаец оказался умным ботом и проигнорировал ловушку. Добавили 2 Honeypot поля – мимо. Изменили стандартный class поля-ловушки – мимо. CSS в футер? Мимо.

Шурик из советского фильма не смог обмануть хитрого пса, а мы – бота.

Что предлагает Contact Form 7

У Contact Form 7 нет своей защиты – плагин предлагает подружиться с reCAPTCHA или Akismet.

reCAPTCHA

У меня CAPTCHA и аналоги вызывают одну ассоциацию – боль. UX-дизайнеры работают над тем, чтобы пользователь тратил меньше усилий на решение своей задачи. CAPTCHA же делает абсолютно обратное.

Попробуйте распознать символы в CAPTCHA от Роскомнадзора. Если вы человек, конечно.Или догадаться о содержимом, которое не подгрузилось.

Даже игровой вариант с выделением автобусов, светофоров, знаков и т.п. вызывает раздражение и порождает мемы.

Психолог Даниэль Канеман опытным путём установил, что негативное в большинстве случаев убивает позитивное, поэтому CAPTCHA – не выход. Да, она решает задачу, но создаёт проблемы для обычных посетителей и рушит прежний положительный опыт от взаимодействия с сайтом.

Aksimet

Aksimet казался хорошим выбором: пусть нейросеть вычисляет ботов и не трогает потенциальных клиентов. Но ожидания от платного плагина не оправдались: он фильтровал только 50% спамных форм. Техподдержка обещала, что со временем плагин научиться распознавать назойливого спамера, но за несколько дней лучше не стало.

Блокировка по IP или фраз

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

CRM-форма – это победа

Проблема не решалась, и мы задали клиенту важный вопрос, с которого, по-хорошему, стоило начать: почему для сбора заявок стоит плагин для WordPress, а не форма от их CRM. Выбор можно понять: один раз выполнить простую синхронизацию сайта и CRM проще, чем на нескольких страницах каждой языковой версии (а их 9!) менять формы связи. Но несколько муторная работа себя оправдала: форма HubSpot CRM фильтрует спам на отлично.

Минусы конкретно HubSpot CRM: нет русского языка и платные тарифы только в валюте. Как альтернатива – присмотритесь к бесплатному тарифу в Битрикс24.

Знаете другие простые способы борьбы со спамом в формах связи WordPress? Поделитесь в комментариях.

Обзор плагинов-дополнений к Contact Form 7.

Недавно я рассматривал плагин создания контактных форм Contact Form 7 и плагин-дополнение к нему Flamingo. Contact Form 7 это один из самых популярных плагинов для WordPress и плагинов-дополнений к нему существует несколько десятков. Рассматривать каждый такой плагин отдельно было бы глупо, поэтому я попробую рассказать о части из них в одном обзоре.

1 Really Simple CAPTCHA.

Данный плагин реализует достаточно простую графическую капчу:

Капча слишком простая, а поэтому практически любая спам-программа пробьет ее на ура. Проще использовать в качестве защиты от спама тэг «Вопрос».

Really Simple CAPTCHA
Автор плагина: Takayuki Miyoshi
Рассматриваемая версия: 1.8 от 23.03.2014
Текущая версия: 2.1 от 28.02.2021
Совместимость с версией WordPress: 5.5 и выше
Активных установок плагина: 600 000+
Скачать плагин версии 2.1 (всего скачено 7 799 634 раза)

2 Flamingo.

Flamingo сохраняет заполненные пользователями контактные формы в базе данных и дает возможность просматривать их прямо в админке блога:

Более подробно я рассмотрел этот плагин в отдельной статье.

Flamingo
Автор плагина: Takayuki Miyoshi
Рассматриваемая версия: 1.1.1 от 03.06.2014
Текущая версия: 2.2.2 от 16.07.2021
Совместимость с версией WordPress: 5.4 и выше
Активных установок плагина: 700 000+
Скачать плагин версии 2.2.2 (всего скачено 4 112 633 раза)

3 Cf7 Mce.

Добавляет визуальный редактор для редактирования контактной формы:

Если вы не дружите с HTML, то плагин может оказаться полезным.

Contact Form 7 Tiny MCE
Автор плагина: bastho
Рассматриваемая версия: 0.1.3 от 05.08.2014
Текущая версия: 1.1.0 от 14.08.2015
Совместимость с версией WordPress: 3.1 и выше
Активных установок плагина: 800+
Скачать плагин версии 1.1.0 (всего скачено 11 633 раза)

4 Contact Form 7 — TinyMCE HTML Editor on mail area.

Добавляет визуальный редактор для редактирования шаблона письма:

По моему мнению – это бесполезный плагин. Визуальный редактор для шаблона письма вовсе не нужен, так как в письме не надо расставлять HTML-теги.

Contact Form 7 – TinyMCE HTML Editor on mail area
Автор плагина: Laurence Tuck
Рассматриваемая версия: 0.5 от 04.08.2014
Текущая версия: 0.8 от 07.10.2014
Совместимость с версией WordPress: 3.0.1 и выше
Активных установок плагина: 100+
Скачать плагин версии 0.8 (всего скачено 3 512 раз)

5 Contact Form 7 Dynamic Text Extension.

Плагин добавляет 2 новых тэга:

В которые можно автоматически вставить какой-либо текст. Например, если вы хотите знать, с какой страницы перешел пользователь на страницу контактной формы, то добавьте тэг «Dynamic Hidden field» такого вида:

В полученной контактной форме вы увидите referrer:

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

Contact Form 7 Dynamic Text Extension
Автор плагина: Chris Mavricos, SevenSpark
Рассматриваемая версия: 1.2 от 04.08.2014
Текущая версия: 2.0.3 от 11.08.2020
Совместимость с версией WordPress: 5.0 и выше
Активных установок плагина: 100 000+
Скачать плагин версии 2.0.3 (всего скачено 586 674 раза)

6 Contact Form 7 Integrations.

Плагин интеграции Contact Form 7 с сервисом ContactUs.com:

Плагин можно использовать в качестве менеджера контактов, он ведет статистику, сохраняет контактные формы в популярных онлайн-сервисах вроде Google Docs и делает еще кучу других вещей. И все это бесплатно.

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.

7 Contact Form 7 City Field Extension.

Плагин добавляет новый текстовой тэг для ввода города с функцией автозаполнения (используется сервис Google Maps):

Contact Form 7 City Field Extension
Автор плагина: Pasquale Bucci
Рассматриваемая версия: 1.0 от 28.06.2014
Текущая версия: 1.3 от 07.06.2017
Совместимость с версией WordPress: 4.0 и выше
Активных установок плагина: 900+
Скачать плагин версии 1.3 (всего скачено 12 189 раз)

8 Contact Form 7 Datepicker.

Плагин добавляет новый и более удобный тэг «Даты» (более 20 различных шаблонов), используется компонент выбора даты из jQuery UI.

Важным преимуществом этого плагина от аналогов является поддержка русского языка при выборе даты:

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.

9 Contact Form 7 Star Rating.

Плагин добавляет новый тэг «Star Rating», который выводит оценку:

Contact Form 7 Star Rating
Автор плагина: themelogger.com
Рассматриваемая версия: 1.5 от 12.05.2014
Текущая версия: 1.10 от 26.08.2017
Совместимость с версией WordPress: 3.8 и выше
Активных установок плагина: 1 000+
Скачать плагин версии 1.10 (всего скачено 9 914 раз)

10 Contact Form 7 Star Rating with font Awersome.

Клон предыдущего плагина от этого же автора, который умеет вместо звездочек использовать иконки шрифта Awesome:

Contact Form 7 Star Rating with font Awesome
Автор плагина: themelogger.com
Рассматриваемая версия: 1.0 от 06.05.2014
Текущая версия: 1.3 от 18.08.2017
Совместимость с версией WordPress: 3.8 и выше
Активных установок плагина: 1 000+
Скачать плагин версии 1.3 (всего скачено 7 262 раза)

11 Contact Form 7 Style.

Плагин стилизует выводимую контактную форму. Он содержит десяток встроенных стилей (на тему рождества и дня валентина) и дает возможность вручную настроить стиль формы. Пример встроенного стиля:

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.

12 Contact Form 7 Tag field.

Плагин добавляет тэг вставки меток:

Contact Form 7 Tag field
Автор плагина: Apprique Ltd.
Рассматриваемая версия: 1.1 от 18.12.2013
Текущая версия: 1.2 от 12.03.2016
Совместимость с версией WordPress: 3.7 и выше
Активных установок плагина: 100+
Скачать плагин версии 1.2 (всего скачено 3 875 раз)

13 Contact Form 7 Customizer.

Это еще один плагин, который позволит вам стилизовать вашу контактную форму без знания css, только через настройки плагина:

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.

Я не стал включать в этот обзор плагины-дополнения по интеграции Contact Form 7 с другими плагинами или сервисами. И возможно, что этот список далеко не полный – я описал только те плагины, которые смог найти и которые у меня заработали. Так как, к сожалению, есть множество плагинов для CF7, которые уже давно не обновлялись и не работают на последних версиях CF7.

плагин Contact Form 7 + CAPTCHA (капча)

Автор Алексей На чтение 3 мин Просмотров 2.6к. Опубликовано 25.07.2012 Обновлено 29.10.2018

Здравствуйте! Cегодня мы создадим форму обратной связи: создадим страницу Контакты (Обратная связь или что-нибудь похожее по смыслу). Форма обратной связи поможет читателям, рекламодателям и прочим посетителям при необходимости без труда связаться с вами.

Я считаю, что на любых нормальных сайтах (блогах) в обязательном порядке должны присутствовать страницы «Об авторе»/»О сайте (блоге)», ну и страница «Контакты».

Для создания формы для обратной связи нам понадобиться плагин Contact Form 7 – мастер создания форм, с его помощью мы без проблем создадим форму обратной связи в WordPress! Итак приступим:

Форма обратной связи с помощью плагина Contact Form 7.

Скачиваем и активируем плагин Contact Form 7 (Как устанавливать плагины)
Далее в админке WordPress идем во вкладку “Контакты (CF7)” и копируем код созданный плагином.

Теперь создаем новую страницу Контакты (или Обратная связь) и переходим HTML редактор этой страницы и вставляем ранее скопированный код:

Нажимаем Опубликовать, смотрим на нашу страницу Контакты:

Как вы видите форма уже на странице контакты!

В принципе, наша форма уже работает и удовлетворяет нашим требованиям. Но Вы также можете испробовать новые функции и добавить защиту от спама, форму прикрепления файлов и т.д.

Защищаем от спама нашу форму обратной связи

Для того, чтобы защитить нашу форму от спана необходимо:
Скачать и активировать еще один плагин: Really Simple CAPTCHA.
Зайти в настройки созданной нами формы (админ. панель WordPress — Контакты (CF7) — редактировать

и в открывшемся окошке нажимаете «сгенерировать тег» и в выпадающем меню выбираем CAPTCHA:

Настройки можно не трогать, просто скопируете с правого окошка по очереди 2 строки и вставляете их в окошке слева, перед кнопкой отправить. Также для более наглядного вида формы, создадим подсказку читателям: «Введите код с картинки»:

Теперь сохраняем форму

и смотрим на результат:

Вот в принципе и все. Ваша форма обратной связи защищена от спама.

Ещё на всякий случай, в настройках плагина, можите поменять Ваш Email, на который будут приходить все сообщения!

Так же, можно по эксперентировать и создать более продвинутую форму, например: вот такую форму заказа услуг:

или ещё что-нибудь в этом роде!

Все эксперементы советую делать на денвере, а затем воплощать на реальном блоге в интернете!

Ели у Вас есть какие-нибудь вопросы по поводу создания форм, Вы хотите создать более функциональную форму, но у Вас не получается! Задавайте вопросы! Я всегда рад Вам помочь!

Удачи и успехов!

reCAPTCHA (v2) | Контактная форма 7

On Contact Form 7 4.3 и выше, reCAPTCHA является стандартным решением CAPTCHA.

Не путайте reCAPTCHA с Really Simple CAPTCHA, которая была решением CAPTCHA по умолчанию до 4.3. Really Simple CAPTCHA — это плагин WordPress, который я создавал и поддерживаю в течение 8 лет. reCAPTCHA — это сервис Google, который имеет огромные преимущества перед Really Simple CAPTCHA.

Чтобы начать работу с reCAPTCHA, вам потребуется учетная запись Google и регистрация вашего сайта для пары ключей API.

Снимок экрана страницы администратора Google reCAPTCHA

1. Перейдите на страницу администратора reCAPTCHA Google.
2. Зарегистрируйте свой сайт.
3. Получите ключ сайта и секретный ключ.

Выберите тип «reCAPTCHA v2» + «Флажок».

Скопируйте пару ключей в админку WordPress сайта, который вы зарегистрировали.

1. Перейти в меню администратора Контакт > Интеграция .
2. Найдите панель reCAPTCHA и щелкните Настроить ключи .
3. Скопируйте ключ сайта и секретный ключ в поля и сохраните их.

Наконец, поместите заполнитель для виджета reCAPTCHA ( [recaptcha] ) в содержимое вашей контактной формы.

Заполнитель [recaptcha] — это тег формы, и, как и другие теги формы, он поддерживает несколько параметров.

Пример:

  [размер рекапчи: компактный]  

Нравится:

Нравится Загрузка …

Действительно простая CAPTCHA | Контактная форма 7

[Edit: 2015-09-17] Contact Form 7 4.3 и более поздние версии рекомендуют reCAPTCHA вместо Really Simple CAPTCHA. Для получения дополнительной информации см. Контактную форму 7 4.3.

Контактная форма 7 позволяет вставлять CAPTCHA в контактную форму, чтобы запретить ботам отправлять формы. Contact Form 7 использует Really Simple CAPTCHA в качестве официально санкционированного модуля CAPTCHA, поэтому вам нужно будет установить плагин Really Simple CAPTCHA, прежде чем использовать CAPTCHA в своей форме.

Остальная часть этой статьи объяснит, как использовать CAPTCHA с Contact Form 7, исходя из предположения, что вы уже установили Really Simple CAPTCHA.

Перед использованием CAPTCHA

Really Simple CAPTCHA требует, чтобы на вашем сервере были установлены библиотеки PHP GD и FreeType для создания образов CAPTCHA. Если вы не уверены, установлены ли они, обратитесь к администратору сервера.

Contact Form 7 создает временную папку и сохраняет в ней все файлы CAPTCHA. В большинстве случаев временная папка находится в wp-content / uploads / wpcf7_captcha , но она может отличаться в зависимости от ваших настроек.

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

Как использовать CAPTCHA

Чтобы добавить CAPTCHA в контактную форму, необходимо использовать теги формы captchac и captchar .

captchac означает CAPTCHA-Challenge и представляет собой элемент для изображения CAPTCHA. captchar означает CAPTCHA-Response и представляет собой элемент для поля ввода ответа.

Тег captchac всегда должен быть связан с тегом captchar с тем же именем. Например, теги, показанные ниже, действительны:

 [captchac captcha-1] [captchac captcha-1] 

Но они недействительны, потому что имеют разные имена. В этом случае CAPTCHA и ее ответ не совпадают:

 [captchac captcha-2] [captchar captcha-3] 

CAPTCHA-Challenge

captchac означает CAPTCHA-Challenge и представляет собой изображение CAPTCHA ( в HTML).

Пример:

 [captchac your-captcha size: s fg: #ffffff bg: # 000000] 

CAPTCHA-Response

captchar означает CAPTCHA-Response и представляет собой поле ввода ответа ( в HTML).

Пример:

 [captchar your-captcha] 

Демо

Примечание: это демонстрация. Эта форма практически не отправляет почту.

Просмотреть источник формы выше:

  1) По умолчанию
Введите этот код: [captchac captcha-170]
[captchar captcha-170 4/4]

2) Маленький размер, перевернутый
Введите этот код: [captchac captcha-778 size: s fg: #ffffff bg: # 000000]
[captchar captcha-778 4/4]

3) Большой размер, зеленый текст
Введите этот код: [captchac captcha-118 size: l fg: # 00ff00 bg: #ffffff]
[captchar captcha-118 4/4]

[отправить «Отправить»]  

Нравится:

Нравится Загрузка …

Как добавить капчу в контактную форму 7? (Лучший альтернативный способ)

Хотите добавить капчу в контактную форму 7?

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

Но нет встроенного способа добавить капчу в контактную форму 7. Однако контактная форма позволяет легко интегрировать Google Captcha с подключаемым модулем.

В этой статье я расскажу вам, как добавить капчу в контактную форму 7.

Как установить плагин WordPress?

Контактная форма 7 Captcha

Процесс интеграции reCaptcha в контактную форму 7.

Получение Google reCaptcha

Зайдите в Google reCaptcha и войдите в свою учетную запись Google.После входа в систему вам необходимо настроить Google reCaptcha для своего сайта.

Ярлык: Прикрепите к нему ярлык, чтобы вы могли запомнить настраиваемый reCaptcha.

Тип reCaptcha

В настоящее время существует две активные версии Google reCaptcha. Раньше было три версии, но V1 уже выключен.

ReCaptcha V2: Это версия, которую вам необходимо интегрировать с контактной формой 7. В V2 вы найдете еще три функции.

Флажок «Я не робот»: Эта функция откроет вызов, который сложно пройти роботам и сканерам.

Невидимый значок reCAPTCHA: Если вы щелкните по нему, Google не будет показывать вызов каждому пользователю. Вместо этого он будет работать в фоновом режиме

Однако Google покажет вызов, если клики будут подозрительными.

reCaptcha Android: Последний предназначен для приложений Android.

Добавление доменного имени: Добавьте домен вашего сайта.Ваша регистрация на reCaptcha будет работать только на тех сайтах, которые вы добавите. Он также будет работать на поддоменах.

Для отдельного сайта необходимо создать другую этикетку. Или вы можете добавить несколько сайтов к одному ярлыку.

После добавления сайтов примите условия обслуживания и нажмите «Отправить».

На следующей странице вы найдете «Ключ сайта» и «Секретный ключ».

Добавление ключа сайта и секретного ключа

Процесс добавления ключа сайта и секретного ключа.

Войдите в систему администратора WordPress и проверьте плагин контактов в меню боковой панели.

Щелкните Контактный плагин> Интеграция.

На странице отобразится опция добавления ключа сайта и секретного ключа.

Скопируйте и вставьте ключи и сохраните изменения. Интегратор reCaptcha проверит ключи и включит опцию reCaptcha на сайте

Вы получите уведомление.

Теперь интеграция Captcha контактной формы 7 завершена.

Добавить Captcha в контактную форму 7

Откройте форму, в которую хотите добавить капчу.

Теперь добавьте следующий шорткод в поле контактной формы.

 [recaptcha] 

Сохраните форму, и вы увидите изменения в интерфейсе.

Google reCaptcha влияет на скорость сайта

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

Хуже всего то, что Google reCaptcha влияет не только на скорость отдельной страницы. Это увеличивает время загрузки сайта в глобальном масштабе.

Лучше всего иметь быстрый хостинг WordPress, который не сможет вывести ни один плагин.

Альтернатива контактной форме 7 Captcha

Причиной добавления капчи в контактную форму 7 является блокировка спам-сообщений и заполнений.

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

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

Используйте этот шорткод, чтобы добавить простой математический расчет :

 [викторина по математике "12 + 48 =? | 60"] 

Если хотите, можете добавить различные тесты в контактную форму 7 :

Пример:

 [викторина заглавная-викторина «Столица Японии? | Токио»] 

Вы можете добавить несколько вопросов, которые будут чередоваться случайным образом :

 [викторина случайная-заглавная-викторина «Столица Японии? | Токио»
                          «Столица Франции? | Париж»
                          «Столица Мадагаскара? | Антананариву»]
 

Создайте викторину с генератором викторин в плагине Contact Form 7 :

Эти индивидуализированные викторины могут отлично блокировать спам.

Сводка

Вот и все. Вы добавляете капчу в контактную форму 7.

Contact Form 7 и Google reCaptcha делают весь процесс добавления капчи в контактную форму очень удобным.

Ваша контактная форма защищена от спама.

Но убедитесь, что у вас есть Fast Hosting, прежде чем добавлять Google reCaptcha, чтобы не было потерь в скорости.

Пользовательский опыт важен в любом онлайн-бизнесе.

Как добавить контактную форму с CAPTCHA в WordPress

Цель любого веб-сайта — охватить свою целевую аудиторию, и взаимодействие с посетителями и предоставление им возможности установить связь с сайтом имеет большое значение для достижения этой цели. Таким образом, владельцы веб-сайтов должны предоставить посетителям возможность связаться с ними. Вы можете просто указать свой адрес электронной почты на своем веб-сайте, но посетители могут посчитать открытие своего почтового ящика и написание всего электронного письма слишком большим трудом и решат вообще не связываться с вами, чего мы не хотим.Если ваш адрес электронной почты будет таким, то это также откроет ваш почтовый ящик для нежелательного спама, быстро и (очень) раздражающе обучая вас тому, что на самом деле означает интернет-сленг «RIP inbox».

Здесь появляется ваш новый друг, контактная форма. Наличие контактной формы на вашем веб-сайте позволяет пользователям просто вводить важную информацию (например, свое имя, адрес электронной почты и сообщение для вас) в форму, которая затем преобразуется в электронное письмо с использованием предварительно запрограммированного шаблона и отправляется на ваш адрес электронной почты.Оттуда вы можете посмотреть, что хочет сказать пользователь, и ответить им на адрес электронной почты, который они предоставили. Контактная форма намного удобнее, чем альтернатива перечислению вашего адреса электронной почты (который теперь остается защищенным от потенциальных спамеров) на вашем веб-сайте.

Однако у контактных форм есть своя уязвимость — ботов можно запрограммировать так, чтобы они заполняли их и отправляли их в почтовые ящики владельцев сайтов для рассылки спама. Чтобы свести к минимуму угрозу использования ботами контактной формы на вашем веб-сайте, вам необходимо добавить CAPTCHA в контактную форму.Чтобы упростить отслеживание, мы разделим процесс добавления контактной формы со встроенной CAPTCHA на ваш веб-сайт WordPress на две части — создание контактной формы и добавление ее на ваш сайт, а также то, как добавить CAPTCHA для связи. форма.

Как создать и добавить контактную форму в WordPress

Самый простой способ создавать и добавлять контактные формы в WordPress — использовать специальный плагин контактной формы, но существует множество специализированных плагинов контактных форм, как бесплатных, так и платных.Чтобы убедиться, что мы охватываем все наши базы (и что у вас есть несколько вариантов на выбор), мы поможем вам создать и добавить контактную форму со встроенной reCAPTCHA с помощью плагина Contact Form 7 от Такаюки Миёси, WPForms плагин и плагин для построения страниц Elementor Pro.

Шаг 1. Установите предпочтительный плагин

Контактная форма 7

Если вы не хотите тратить деньги на конструктор форм премиум-класса, вам подойдет плагин Contact Form 7 — по сей день Contact Form 7 остается золотым стандартом в отношении бесплатных плагинов для создания форм для WordPress. .Прежде всего, вам нужно будет пройти к официальному списку Contact Form 7 в каталоге плагинов WordPress и нажать Download . Это инициирует загрузку ZIP-файла, содержащего плагин — как только вы загрузите этот ZIP-файл, найдите его и переместите в какое-нибудь запоминающееся место на вашем компьютере. Затем вам нужно будет установить плагин — и вы можете сделать это двумя разными способами. Вы можете установить плагин с помощью панели администратора WordPress своего сайта или загрузить его прямо на серверы, на которых размещен ваш сайт.Чтобы установить плагин Contact Form 7 из панели администратора, просто:

1. На левой панели панели администратора WordPress нажмите Plugins > Add New .
2. Нажмите кнопку Загрузить подключаемый модуль .
3. Нажмите кнопку Выбрать файл .
4. Перейдите в каталог, в котором находится ZIP-файл, содержащий плагин Contact Form 7, и щелкните ZIP-файл, чтобы выбрать его.
5. Щелкните Откройте .
6. Вернитесь в панель администратора WordPress с выбранным файлом ZIP, нажмите Установить сейчас .
7. Подождите, пока WordPress установит плагин Contact Form 7. Когда плагин будет установлен, вы увидите сообщение «Плагин успешно установлен». Увидев это сообщение, нажмите кнопку Activate Plugin внизу — установленные плагины WordPress фактически не начнут работать, пока вы их не активируете.

Если репозиторий плагинов WordPress не работает или вам просто нравится делать что-то самостоятельно, вы также можете установить плагин Contact Form 7, загрузив содержимое загруженного вами ZIP-файла непосредственно на серверы, на которых размещен ваш веб-сайт.Для этого вам понадобится FTP-клиент, и мы рекомендуем FileZilla — это совершенно бесплатно, и это слишком плохо. После того, как вы загрузили и установили FileZilla, вам необходимо:

1. Перейдите в каталог, в котором находится ZIP-файл, содержащий плагин Contact Form 7, и распакуйте файл. После распаковки файла вы увидите папку, названную в честь плагина.
2. Запустите FileZilla и щелкните File > Site Manager… .
3. В окне Site Manager щелкните New Site .
4. Введите имя вашего веб-сайта и нажмите Введите .
5. Добавьте в правую панель окна настройки FTP и учетные данные для вашего веб-сайта (среди прочего, имя домена вашего веб-сайта, имя пользователя для FTP-соединений, пароль FTP и тип шифрования). Они будут предоставлены вам вашим хостинг-провайдером при регистрации на хостинге WordPress, но если у вас их больше нет, просто свяжитесь со своим веб-хостингом, и они вам помогут.
6. Щелкните ОК .
7. Щелкните File > Site Manager… .
8. Щелкните запись вашего веб-сайта на левой панели окна Site Manager , чтобы выбрать ее, и щелкните Connect .
   Примечание: Когда вы впервые устанавливаете FTP-соединение с вашим веб-сайтом, FileZilla может отобразить всплывающее окно для неизвестного сертификата. Просто установите флажок Всегда доверять сертификату для будущих сеансов во всплывающем окне и нажмите ОК .
9. После того, как FileZilla установит FTP-соединение с серверами, на которых размещен ваш веб-сайт, все файлы и папки, составляющие установку WordPress для вашего веб-сайта, будут отображаться в разделе FileZilla Remote site . В разделе Remote site откройте папку WordPress (которая обычно называется www или public_html ) и перейдите к wp-content > plugins .
10. В разделе FileZilla Local site перейдите в каталог, содержащий разархивированное содержимое ZIP-файла из step 1 , найдите папку contact-form-7 и щелкните ее правой кнопкой мыши.
11. В появившемся контекстном меню нажмите Загрузить . FileZilla продолжит перенос папки с вашего компьютера на серверы, на которых размещен ваш веб-сайт, эффективно установив плагин Contact Form 7 на вашем веб-сайте.
12. Если вы решите вручную установить плагин Contact Form 7 через FTP-соединение, вам не будет предоставлена ​​возможность активировать плагин при установке, и вам придется включить его вручную. Для этого перейдите в панель администратора WordPress вашего веб-сайта, нажмите Plugins > Installed Plugins на левой панели, найдите запись для Contact Form 7 в списке установленных плагинов на правой панели и нажмите Активируйте прямо под ним.

Elementor Pro

Elementor Pro — это плагин премиум-класса для WordPress, поэтому, если вы хотите использовать его для удовлетворения своих потребностей в создании форм, вам придется приобрести подписку на него на официальном веб-сайте. После того, как вы приобрели подписку на Elementor Pro и получили ZIP-файл, содержащий плагин, вы можете использовать процесс, описанный выше, для его установки. Обязательно активируйте плагин после его установки!

WPForms

Хотя WPForms — это плагин премиум-класса для создания форм, его бесплатная Lite-версия доступна в репозитории плагинов WordPress.Изюминкой WPForms является тот факт, что он предоставляет пользователям графический интерфейс для создания форм, позволяющий им добавлять и удалять поля формы, просто перетаскивая их.

1. На левой панели панели администратора WordPress нажмите Plugins > Add New .
2. Найдите « WPForms Lite ».
3. Нажмите Установить сейчас рядом с результатом поиска с именем Contact Form by WPForms — Drag & Drop Form Builder для WordPress .
4. Дождитесь установки WPForms Lite и нажмите Активировать на следующем экране, чтобы включить его.

Шаг 2. Создайте и настройте контактную форму

Использование контактной формы 7

Когда вы активируете плагин Contact Form 7, на левой панели панели администратора WordPress вашего сайта будет создан новый пункт меню с именем Contact . Щелкните Contact > Contact Forms , и вы увидите, что плагин уже создал для вас вашу первую контактную форму и метко назвал ее Contact form 1 .Наведите указатель мыши на Contact form 1 и щелкните Edit , чтобы настроить форму. Если вы хотите переименовать контактную форму, замените Contact form 1 в поле Title на то, что вы хотите, чтобы форма была названа. Обязательно перейдите на вкладку Mail и убедитесь, что поле To содержит адрес (а) электронной почты, на который вы хотите получать сообщения.

Продолжение статьи ниже

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

Если вы хотите создать новую контактную форму, просто нажмите Контакт > Добавить новый на левой панели панели администратора. Дайте новой контактной форме имя, добавьте / удалите поля по своему усмотрению и убедитесь, что вы указали адрес электронной почты для формы для отправки сообщений, прежде чем нажимать Сохранить .

Использование Elementor Pro

К сожалению, Elementor Pro не предоставляет пользователям никаких возможностей для создания, настройки и сохранения контактных форм или других форм любого типа для дальнейшего использования. Это означает, что каждый раз, когда вы хотите добавить контактную форму на свой веб-сайт, вам придется создавать новую. К счастью, создать контактную форму с нуля с помощью Elementor Pro исключительно просто, поскольку большую часть работы за вас делает плагин.

Использование WPForms

Когда вы активируете плагин WPForms, на левой панели панели администратора WordPress вашего сайта будет создан новый пункт меню с именем WPForms .Нажмите WPForms > Добавить новый , и вы увидите, что большая часть пространства вашей административной панели WordPress занята графическим интерфейсом создания форм WPForms. После того, как интерфейс создания формы будет запущен, вам необходимо:

1. Введите подходящее и запоминающееся имя для контактной формы в поле Имя формы . « Contact Form 1 » или что-то в этом роде подойдет.
2. Щелкните Simple Contact Form в разделе Select a Template .
3. Вы увидите, что в форме уже есть все основные поля для контактной формы ( Имя , Адрес электронной почты и Сообщение ). Дополнительные поля можно добавить в форму, щелкнув их на левой панели, а существующие поля можно изменить, перетащив их в нужное место на правой панели. Существующие поля также можно редактировать и изменять их размер, щелкая их на правой панели.
4. Когда вас устраивают поля в контактной форме, перейдите на вкладку Настройки .
5. Щелкните Уведомления на левой панели.
6. Найдите поле Отправить на адрес электронной почты на правой панели и убедитесь, что оно содержит адрес (а) электронной почты, на который форма обратной связи должна отправлять ответы.
7. Нажмите Сохранить .

Шаг 3. Добавьте контактную форму на свой веб-сайт

Очень интуитивно понятная и распространенная практика состоит в том, что веб-сайты имеют специальные страницы контактов с контактными формами на них, чтобы облегчить общение между пользователями веб-сайта и людьми, которые его запускают.Вот как можно добавить на свой веб-сайт специальную страницу контактов:

Использование контактной формы 7

1. На левой панели панели администратора WordPress вашего сайта нажмите Contact > Contact Forms .
2. Скопируйте шорткод для формы обратной связи, которую вы хотите разместить на специальной странице контактов вашего веб-сайта. Это будет текст в разделе Shortcode рядом с именем выбранной вами контактной формы.
3. Нажмите Pages > Добавить новый на левой панели панели администратора.
4. Введите Контакт (или то, что вы хотите назвать специальной страницей контактов вашего веб-сайта) в поле Добавить заголовок .
5. Вставьте шорткод, скопированный на шаге 2 , в текстовое поле.
6. Нажмите Опубликовать .

Использование Elementor Pro

1. Нажмите Pages > Добавить новый на левой панели панели администратора WordPress.
2. Нажмите кнопку «Редактировать с помощью Elementor ».
3. Когда интерфейс компоновщика страниц Elementor загрузится, щелкните значок меню гамбургера (представленный тремя горизонтальными линиями, расположенными друг над другом) в верхнем левом углу левой панели интерфейса.
4. Щелкните Параметры страницы .
5. Введите Contact (или то, что вы хотите назвать специальной страницей контактов вашего веб-сайта) в поле Title .
6. Щелкните значок девяти плиток в правом верхнем углу левой панели интерфейса, чтобы вернуться к средству выбора виджетов.
7. Найдите по запросу « form » или найдите виджет Form в разделе Pro Elements .
8. Перетащите виджет Form с левой панели интерфейса на правую, и вы увидите манифест виджета в форме контакта с предварительно заполненным Name , Email и Message поля.
9. На левой панели интерфейса в разделе Поля формы введите имя своей формы в поле Имя формы .« Contact Form 1 » или что-то в этом роде будет достаточно.
10. В поле Имя формы вы найдете список всех полей, которые содержит ваша контактная форма. Вы можете перетаскивать элементы в этом списке, чтобы изменить порядок полей в форме, щелкните конкретный элемент, чтобы изменить метку этого поля, текст заполнителя и т. Д., И нажмите Добавить элемент , чтобы добавить новое поле в форму.
11. Когда вас устраивают поля в вашей контактной форме, прокрутите вниз до раздела Электронная почта и параметры и щелкните его, чтобы переключиться на него.Убедитесь, что поле Email-To в разделе Электронная почта и параметры содержит адрес (а) электронной почты, на который форма обратной связи должна отправлять ответы.
12. Нажмите Сохранить и Опубликовать страницу.

Использование WPForms

1. На левой панели панели администратора WordPress вашего сайта нажмите WPForms > All Forms .
2. Найдите нужную контактную форму на специальной странице контактов вашего веб-сайта и щелкните по ней.
3. Когда откроется интерфейс WPForms, щелкните Embed .
4. Скопируйте шорткод, предоставленный вам в открывшемся диалоговом окне, и нажмите Закрыть .
5. Закройте графический интерфейс создания форм WPForms и нажмите Pages > Add New на левой панели панели администратора.
6. Введите Контакт (или то, что вы хотите назвать специальной страницей контактов вашего веб-сайта) в поле Добавить заголовок .
7. Вставьте шорткод, скопированный на шаге 4 , в текстовое поле. Кроме того, вы также можете нажать кнопку Добавить форму над текстовым полем, выбрать контактную форму, которую вы хотите отображать на странице, и выбрать, отображать ли ее имя и описание, и нажать на Добавить форму для тот же результат.
8. Нажмите Опубликовать .

После публикации страницы на вашем веб-сайте появится специальная страница контактов.Большинство сайтов также предоставляют пользователям контактные формы в конце сообщений в блогах или объявлений. Если вы используете контактную форму 7 или WPForms, вы можете добавить контактную форму на любую страницу, сообщение или текстовый виджет на своем веб-сайте WordPress, если вы просто вставляете шорткод для нужной контактной формы в нужное место. Если вы используете Elementor Pro, просто отредактируйте любую страницу или сообщение с помощью Elementor и перетащите виджет формы в то место, где должна быть контактная форма.

Как добавить CAPTCHA в ваши контактные формы

Вы когда-нибудь задумывались, почему большинство контактных форм, которые вы видели в Интернете, содержат какую-либо CAPTCHA? Что ж, CAPTCHA (попытка) помешать ботам — самой большой слабости контактной формы — (ab) использовать контактные формы, позволяя отправлять их только фактическим пользователям.Если вы хотите, чтобы спам-боты не могли использовать контактную форму на вашем веб-сайте и создавать беспорядок в вашем почтовом ящике, вам необходимо добавить CAPTCHA в контактную форму. Спам-боты и боты всех видов постоянно развиваются, как и сервисы CAPTCHA и CAPTCHA. Мы рекомендуем reCAPTCHA — действительно передовой сервис CAPTCHA, разработанный не кем иным, как Google — для всех ваших потребностей в CAPTCHA. Хотя для установки WordPress доступно несколько различных плагинов CAPTCHA, ни один из них не является таким серьезным сдерживающим фактором для ботов, как сервис reCAPTCHA от Google.В довершение ко всему, reCAPTCHA совместима со всеми тремя плагинами для создания форм, которые мы используем.

Шаг 1. Зарегистрируйте свой веб-сайт в службе Google reCAPTCHA

Прежде чем вы сможете эффективно добавлять CAPTCHA в свои контактные формы, вам необходимо зарегистрировать свой веб-сайт в сервисе reCAPTCHA Google и получить ключи API для сервиса. Для этого вам необходимо:

1. Зайдите в панель администратора reCAPTCHA .
2. Если будет предложено войти в свою учетную запись Google, сделайте это.Если вы уже вошли в систему, переходите к следующему шагу.
3. Введите имя вашего веб-сайта в поле Label и введите домен вашего веб-сайта (yourdomain.com) в разделе Domains .
4. Затем у вас есть выбор между двумя различными типами CAPTCHA для ваших контактных форм. Вы можете выбрать удобную для пользователя reCAPTCHA v2, которая отображает простой флажок « I’m not a robot », который пользователи должны проверить перед отправкой контактной формы. Если reCAPTCHA подозревает пользователя в том, что он бот, пользователю предлагается доказать, что он им не является, прежде чем он сможет продолжить.Чтобы использовать reCAPTCHA v2, просто установите флажки reCAPTCHA v2 и «Я не робот» в разделе reCAPTCHA type .

   В качестве альтернативы вы можете выбрать более продвинутую, но менее прозрачную reCAPTCHA v3 — ненавязчивую CAPTCHA, которая работает в фоновом режиме и присваивает каждому пользователю оценку (от 0,0 до 1,0) на основе их взаимодействия с веб-сайтом и различных других факторов для прогнозирования вероятность того, что рассматриваемый пользователь является ботом. Разрешает ли reCAPTCHA v3 пользователю отправлять контактную форму, зависит от их оценки.Если вы хотите использовать reCAPTCHA v3, выберите reCAPTCHA v3 в разделе reCAPTCHA type .

   Продолжение статьи ниже

5. Установите флажок . Примите условия обслуживания reCAPTCHA .
6. Нажмите Отправить .
7. После успешной регистрации вам будут предоставлены два ключа API — ключ сайта и секретный ключ . Скопируйте их обоих в безопасное место на вашем компьютере.

Шаг 2. Добавьте CAPTCHA в ваши контактные формы

Контактная форма 7

1. На левой панели панели администратора WordPress вашего сайта нажмите Contact > Integration .
2. Найдите службу reCAPTCHA и щелкните под ней Setup Integration .
3. Вставьте ранее скопированные Site Key и Secret Key в соответствующие поля.
4. Нажмите Сохранить изменения . Если вы зарегистрировали свой веб-сайт для reCAPTCHA v3, все ваши контактные формы теперь будут защищены reCAPTCHA v3 немедленно — вам больше нечего делать.
5. Однако, если вы использовали reCAPTCHA v2, вам нужно будет вставить следующий текст в каждую из контактных форм, которые вы хотите защитить с помощью CAPTCHA:
   [recaptcha size: compact]
   Где в тексте контактной формы, вы вставляете шорткод reCAPTCHA, который определит, где диалоговое окно reCAPTCHA будет размещено в форме.
6. Нажмите Сохранить .

На Elementor Pro

1. На левой панели панели администратора WordPress нажмите Elementor > Settings .
2. Перейдите на вкладку Integrations .
3. В разделе reCAPTCHA вставьте ключи API, которые вы скопировали, в поля Site key и Secret key соответственно.
4. Прокрутите до конца и нажмите Сохранить изменения .
5. Перейдите на страницу или сообщение, содержащее контактную форму, в которую вы хотите интегрировать reCAPTCHA, и нажмите Редактировать с помощью Elementor .
6. Выберите контактную форму для редактирования на левой панели.
7. На вкладке Content в разделе Form Fields нажмите Add Item .
8. Откройте раскрывающееся меню рядом с опцией Тип . Если вы выбрали reCAPTCHA v2, выберите опцию reCAPTCHA , и вы увидите манифест флажка « Я не робот » в своей контактной форме.Если вы выбрали reCAPTCHA v3, выберите опцию reCAPTCHA v3 в раскрывающемся меню и выберите, хотите ли вы, чтобы значок reCAPTCHA отображался справа (внизу страницы), слева (внизу страницы) или встроенным.
9. Нажмите Сохранить .

В WPForms

1. На левой панели панели администратора WordPress нажмите WPForms > Настройки .
2. Перейдите на вкладку reCAPTCHA .
3. Рядом с опцией Тип установите флажок reCAPTCHA v2 или reCAPTCHA v3 , в зависимости от того, зарегистрировали ли вы свой веб-сайт для reCAPTCHA v2 с флажком «Я не робот» или reCAPTCHA v3 соответственно.
4. Вставьте скопированный вами ключ сайта и секретный ключ в соответствующие поля. Если вы решили использовать reCAPTCHA v3, вы также можете установить собственный Порог оценки , ниже которого отправка форм будет отклонена.
5. Щелкните Сохранить настройки .
6. На левой панели панели администратора WordPress нажмите WPForms > All Forms .
7. Найдите контактную форму, в которую вы также хотите добавить CAPTCHA, и щелкните по ней.
8. Подождите, пока откроется интерфейс построения формы, и в разделе Standard Fields на вкладке Add Fields найдите и щелкните reCAPTCHA .
9. Теперь вы должны увидеть поле « Я не робот » или значок reCAPTCHA (в зависимости от версии reCAPTCHA, которую вы используете) в контактной форме, подтверждающий, что CAPTCHA была встроена в форму.
10. Нажмите Сохранить . Это изменение будет немедленно применено к каждому экземпляру контактной формы на вашем веб-сайте.

Протестируйте CAPTCHA в своей контактной форме

Создать и добавить контактную форму на свой сайт? Чек .

Добавить CAPTCHA в контактную форму? Чек .

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

Вот и все, ребята!

Как добавить капчу в контактную форму 7 [Пошаговое руководство]

Контактная форма 7 сама по себе является замечательным плагином, но вы можете интегрировать капчу, чтобы защитить свою контактную форму от злоупотреблений и спама. CAPTCHA — это полностью автоматизированный общедоступный тест Тьюринга, позволяющий различать компьютеры и людей. Это торговый продукт Google.

Чаще всего вы можете получать спам через вашу форму. Этот спам рассылается через «ботов», которые закодированы таким образом, что они всегда ищут формы в Интернете.Google определяет процесс взаимодействия с пользователем, чтобы определить, является ли он ботом или человеком. Контактная форма позволяет защитить вашу форму с помощью Google reCAPTCHA. Вы также можете использовать одну капчу для защиты нескольких форм. Он прост в использовании, бесплатен и легкий.

Страница контактов является обязательной для любого веб-сайта. Страница контактов — это полезная страница для быстрого общения с администратором или владельцем веб-сайта. Кроме того, это повышает надежность веб-сайта. Кроме того, мы используем функцию капчи в контактной форме по многим причинам.

Итак, в этом посте мы поделимся лучшим руководством о том, как добавить Captcha в контактную форму 7 без применения каких-либо знаний в области кодирования.

Что такое капча?

Captcha — это сервис защиты от спама. Есть много поставщиков услуг капчи, но одним из лучших является Google-captcha, который поддерживает большинство популярных плагинов. Рабочий процесс Google captcha прост. Когда кто-то собирается связаться с вами, используя форму обратной связи на веб-сайте, ему необходимо решить формулу Captcha, или какая-то версия reCAPTCHA работает незаметно, чтобы предотвратить автоматические спам-боты.

Почему вы должны использовать Captcha в контактной форме?

Вы уже знаете, что Captcha использовалась для защиты от спама. Многие люди используют автоматизированное программное обеспечение для связи с владельцами сайтов или применяют методы автоматического маркетинга / рассылки спама, используя контактную форму. Все автоматические сообщения являются спамом, который вреден для нашего сайта. Поэтому, чтобы предотвратить автоматическую отправку спам-ботами, мы можем использовать Captcha в контактной форме.

Версии ReCAPTCHA и сведения о системе поддержки

Google предоставляет пользователям различные типы reCAPTCHA —

reCAPTCHA v3

Если взаимодействие кажется допустимым для алгоритма Google, reCAPTCHA v3 позволяет проверить сеанс без какого-либо взаимодействия с пользователем. .API JavaScript дает вам возможность предпринять дальнейшие действия в отношении вашего сайта.

Функции

• Проверено опытом пользователей на миллионах сайтов.
• Проверить законное взаимодействие пользователей без какого-либо взаимодействия с пользователями.
• Это бесплатно более 1 миллиона оценок в месяц.
• Не настраивается, не адаптируется, нет системы поддержки.

reCAPCHA v2 (флажок «Я не робот»)

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

reCAPCHA v2 (Невидимое поле reCAPTCHA)

Пользователям не нужно устанавливать флажок, как раньше в этой версии, пользователи будут перенаправлены на ваш сайт, когда они нажмут на существующую кнопку, или пользователи будут перенаправлены через API javascript вызов. Когда процесс проверки завершается, этот процесс требует обратного вызова Javascript.

reCAPCHA v2 (Android)

ReCaptcha v2 для библиотеки Android помогает пользователям сразу пройти без каких-либо подсказок CAPTCHA или проверить их, люди они или нет, бросив им вызов.Это часть API SafetyNet сервисов Google Play. Вы можете использовать собственный ключ API Android для любого приложения, предоставленного из библиотеки Android. Перед использованием reCAPTCHA API необходимо настроить сервисы Google Play.

Характеристики

• Проверено на основе пользовательского опыта.
• Не удобен для клиентов, так как требует взаимодействия с пользователем, чтобы судить о легитимности пользователей.
• Подтвердить с помощью невидимого флажка или флажка «Я не робот».

reCAPCHA v1-Shutdown

С 2018 года эта служба отключена.Вы больше не можете использовать эту версию, вам нужно выбрать любой из вышеперечисленных вариантов.

Как добавить функцию капчи в контактную форму 7: пошаговое руководство

reCAPTCHA Совместимость с контактной формой 7

Контактная форма 7 версии более 5.1 поддерживает reCAPTCHA v3 и не поддерживает v2. Если вы хотите использовать v2 с последней версией контактной формы 7, вы можете установить другой плагин с именем «Contact Form 7-reCAPTCHA v2» вместе с контактной формой 7.

Использовать капчу в контактной форме 7 очень просто. Прежде всего, вы должны войти в сервис Google-captcha со своей учетной записью Gmail.

Итак, давайте рассмотрим пошаговое руководство.

Перейдите на страницу Google reCAPTCHA и нажмите кнопку « Admin Console », расположенную в правом верхнем углу активного окна.

Теперь вам нужно зарегистрировать новый сайт в сервисе Google ReCaptcha. Поэтому введите название вашего уровня ReCaptcha, которое поможет вам определить уровень в будущем.В этом разделе уровня вы можете использовать имя своего сайта, затем выбрать reCAPTCHA type V3.

Теперь введите название своего веб-сайта правильно, затем Примите Условия использования reCAPTCHA и, наконец, нажмите кнопку «Отправить» .

На следующем шаге вы получите ключ сайта и секретный ключ , которые вы можете использовать в своем плагине contact us seven или WPfrom для включения функции Captcha.

Теперь пора установить reCAPTCHA code в плагин контактной формы.Итак, перейдите в панель администратора WordPress, затем щелкните раздел «Интеграция» плагина Contact form 7.

После этого нажмите на « Setup Integration» option функции reCAPTCHA . Затем вы получите два новых поля для ввода ключа сайта Google reCAPTCHA и секретного ключа . Поэтому введите их в соответствующее поле.

Затем, наконец, нажмите кнопку «Сохранить изменения ». Теперь все готово. С этого момента недавно включенная функция reCAPTCHA защитит вас от спама и других видов автоматического злоупотребления.

Вредно ли это для скорости загрузки веб-страниц?

По правде говоря, функция reCaptcha должна увеличивать время загрузки веб-сайта, что вредно для SEO веб-сайта и общего пользовательского опыта.

До использования Google reCaptcha в контактной форме нашего сайта в WPBasic Pro время загрузки страницы нашего сайта составляло от 1,40 до 1,80. Мы использовали инструмент Gift of Speed, который достаточно хорош для проверки времени загрузки веб-страницы.

С другой стороны, после использования функции reCaptcha в нашем плагине Contact form 7 она резко увеличилась на по сравнению с 2.00 , что для нас очень печальный и негативный результат.

Тем не менее, вы можете проверить время загрузки веб-страницы после использования кодов reCaptcha в вашем плагине Contact form 7.

Как решить проблему медленной загрузки страницы ?

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

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

Безопасность вашего сайта — ключевая задача вашего бизнеса. Позвольте reCAPTCHA защитить ваш сайт от «ботов». Будьте в безопасности от спама и злоупотреблений.

Мы надеемся, что это руководство о том, как добавить Captcha в контактную форму 7, будет для вас полезным.Если этот пост принес вам пользу, поделитесь им со своими друзьями и коллегами.

Добавить reCaptcha в контактную форму 7 в WordPress

Google имеет улучшенную, удобную для пользователя систему Captcha.

Contact Form 7 — самый популярный плагин контактной формы для WordPress.

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

В этом уроке я покажу вам, как интегрировать reCaptcha в контактную форму 7 на вашем сайте WordPress.

Шаг №1. Установите плагин Contact Form 7

• Войдите на свой сайт WordPress.
• Перейдите в Плагины> Добавить новый и найдите «Контактная форма 7».
• Нажмите «Установить сейчас» и активируйте плагин.

Шаг №2. Получить публичный и секретный ключи reCaptcha

Вам необходимо сгенерировать ключи для вашего домена:

• Зайдите на сайт Google reCaptcha.
• Нажмите кнопку «Получить reCAPTCHA».

• Введите данные своего сайта, такие как ярлык, домен и владелец электронной почты:

Шаг №3.Интегрировать reCaptcha с контактной формой 7

Внутри вашей панели управления WordPress:

• Перейти к контакту> Интеграция
• Введите Ключ сайта и Секретный ключ . Используйте те, которые вы создали на шаге 2.

• Сохраните, когда закончите.

Шаг 4. Измените контактную форму по умолчанию

По умолчанию форма с основными полями создается в процессе установки на шаге 1.

• Перейдите в раздел «Контакты»> «Контактные формы»> «Ваша форма»
• Вставьте этот шорткод, чтобы отобразить поле reCaptcha непосредственно перед кнопкой отправки:

  [recaptcha]  

• Нажмите кнопку «Сохранить».

Шаг 5. Вставьте контактную форму на страницу

• Перейдите в раздел «Контакты»> «Контактные формы».
• Скопируйте шорткод формы.

• Перейдите на Страницы> Добавить новый.
• Вставьте шорткод.

• Опубликуйте страницу.

Шаг 6. Посмотреть конечный результат

• Просмотрите страницу контактов, чтобы увидеть, как она выглядит:

Об авторе

Валентин создает красивые изделия из растений текилы в Халиско, Мексика.Вы можете увидеть дизайн Валентина по всему сайту, и вы часто можете увидеть, как он помогает участникам в поддержке.

Как добавить reCaptcha 2 в контактную форму 7 (обновлено в 2019 г.)

CAPTCHA — это аббревиатура от «полностью автоматизированного общедоступного теста Тьюринга для различения компьютеров и людей».». Если вы разместите форму на своем веб-сайте, вы, скорее всего, начнете получать спам-сообщения через форму. Это потому, что существуют «боты» (это просто скрипты, которые просто просматривают веб-сайты), которые закодированы, чтобы продолжать бродить по Интернету в поисках форм для отправки. Поскольку вы всегда читаете отправленные формы из своей формы, спамеры могут легко отправлять вам маркетинговые сообщения.

xkcd по капче

CAPTCHA затрудняет отправку формы этими автоматическими скриптами.Однако CAPTCHA — не единственное решение. Подробнее об альтернативах CAPTCHA позже.

раствор reCaptcha

reCaptcha — отличное решение для обнаружения «ботов» от Google. Google следит за образцом взаимодействия с пользователем, чтобы решить, является ли он «ботом» или настоящим пользователем. Для «бота» практически невозможно смоделировать эти модели. Таким образом, reCaptcha в большинстве случаев успешно блокирует спам.

Версии reCaptcha

reCaptcha версия 1

reCaptcha версии 1 использовался для отображения пары слов на изображении, и пользователю приходилось вводить слова в поле, чтобы доказать, что они не «боты».

источник изображения

reCaptcha версия 2

ReCaptcha версии 2 прост и удобен для пользователя. Пользователь должен установить флажок «Я не робот». Однако иногда эта версия капчи также вызывает некоторые головоломки с картинками. Обычно это зависит от того, как алгоритмы Google воспринимают сеанс пользователя. В большинстве случаев настоящие пользователи могут заполнить Captcha, просто установив флажок.

reCaptcha версия 3

Версия 3 reCaptcha — это JavaScript API, который возвращает оценку, которая показывает, считает Google это «ботом» или нет.Никакого взаимодействия с пользователем не требуется.

Contact Form 7 версии 5.1 и выше использует reCaptcha 3. Он больше не поддерживает reCaptcha версии 2. Однако вы можете использовать reCaptcha 2 даже с последней контактной формой 7, используя другой плагин. В разделе ниже объясняется, как использовать reCaptcha 2 с последними версиями Contact Form 7. Перед этим позвольте мне показать вам, как зарегистрироваться на reCpatcha и как вставить reCaptcha на свои веб-сайты.

Регистрация на сайте reCaptcha

Перейти на сайт reCaptcha.Затем введите свои данные и заполните форму.

После заполнения формы вы получите ключ сайта и секретный ключ. Скопируйте его и сохраните те ключи.

Чтобы использовать версию 2 reCaptcha в Контактной форме 7, установите еще один плагин WordPress: Контактная форма 7 -reCaptcha 2:

• Перейдите в пункт меню Контакт → Интеграции.
• В разделе reCaptcha нажмите «настроить интеграцию», а затем введите ключи, полученные с веб-сайта reCaptcha.

reCaptcha настроен. Вы можете использовать этот шорткод: [recaptcha] в настройках Контактной формы 7.

Скопируйте шорткод контактной формы 7 на свою страницу и попробуйте выполнить предварительный просмотр. Он должен показать reCaptcha

Смотрите превью:

См. Также

.