Меню Рубрики

Установка капчи в форму обратной связи

Оригинальная капча для сайта и формы обратной связи

Что такое капча (captcha)?

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

Капча (от CAPTCHA — англ. Completely Automated Public Turing test to tell Computers and Humans Apart — полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей) – это эффективный и чуть ли не единственный метод защиты от рекламы в комментариях и письмах. Специальный тест для определения пользователя системы (человек или робот). Зачастую это автоматически генерируемая картинка с искаженными символами (буквами или цифрами).

Виды капчи

Один из самых простых и неэффективных видов капчи – это отметка в поле checkbox, согласие с чем бы то ни было. Эту проверку до сих пор использует Google при подтверждении прав на сайт в панели веб-мастера.

Цифровая или буквенная капча, содержащая различные символы, часто искаженные (с применением шума, искривления, наложения дополнительных линий или произвольных фигур). Может содержать два слова сразу.

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

Математическая капча часто представляется в виде простого примера (сложить или вычесть целые числа). Достаточно эффективно, но, в случае сложных задач, далеко не каждый сможет вычислить конечный результат.

Оригинальная капча на PHP, CSS, JS

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

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

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

Предположим, у вас уже есть готовая форма на HTML и составлен обработчик событий на PHP. Перед кнопкой отправки сообщения вставляем JS скрипт:

И составляем массив из наших картинок:

К правильному варианту в теге IMG дописываем класс access. Собственно, и сам код CSS:

источник

Как создать капчу, для защиты формы обратной связи?!

Эта статья устарела . Обновленную версию смотрите тут

В этой статье я расскажу , как защитить форму обратной связи от специализированных скриптов , которые в автоматическом режиме отправляют сообщения с формы обратной связи !

Самый распространенный способ – это проверить действительно ли за монитором находится человек , а не программа-робот . Если за монитором находится человек , то от него потребуется ввести символы , изображенные на картинке . Такой метод получил название – CAPTCHA

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

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

Для реализации этого метода , Вам понадобится подготовить 10 изображений с цифрами от 0 до 9, которые бы имели названия аналогичные своим изображенным цифрам . Чтобы не заморачиваться можете воспользоваться моими . Скачать архив с изображениями можно здесь .

Теперь давайте посмотрим сам код страницы с формой . Выглядит он так:

Для генерации случайных чисел , я использовал функцию mt_rand (), которая генерирует наилучшее случайное значение в диапазоне от 0 до 9.

Сгенерированное число ( от 0 до 9) записывается в массив $ num (), которое затем подставляется для вывода аналогичного изображения . Все это проделывается в цикле 4 раза , тем самым мы получаем 4 цифры .

Полученные цифры мы записываем в переменную $ captcha , которая затем передается обработчику send.php, где она будет сравниваться с переменной $pr.

В переменную $pr заносится информация , которую ввел пользователь .

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

Читайте также:  Установка ваноса на мерседес

Как видите здесь нет ничего сложного.

Теперь перейдем к самому обработчику send.php, который мы уже создали в прошлой статье .

Как Вы помните , там осуществляется проверка на заполнение всех полей и правильность ввода email-адреса . Нам остается лишь добавить проверку на правильность ввода капчи !

источник

Капча для Contact Form 7 и защита от спама формы обратной связи (все нюансы)

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

В личном кабинете находите иконку “+” для создания/добавления нового веб-ресурса. После нажатия увидите следующую форму:

  • Указываете ярлык капчи (внутреннее название).
  • Выбираете тип защиты. Да, сейчас есть супер модная версия 3 с автоматическим определением ботов, но мне больше нравится метод по старинке с ручным вводом «Я не робот».
  • Внизу соглашаетесь с правилами использования и ставите галочку о получении уведомлений, если на сайте будут возникать какие-то проблемы (еще один плюс данной Contact Form 7 капчи).

На следующем шаге вам выдадут 2 значения:

Можете записать их в какой-то файл или временно не закрывать данное окно.

Возвращаемся в наш модуль обратной связи и кликаем по кнопке «Настройка интеграции» (см. первый скриншот выше). На открывшейся странице вводите свои ключи.

Включение reCAPTCHA в Contact Form 7 (v3 или v2)?

Теперь мы приходим к самому интересному – как поставить капчу в Contact Form 7. И тут важным моментом есть то, какой именно вариант защиты вы выбрали. Сейчас Гугл продвигает третью версию и разработчик модуля внедрил именно ее (как передовую технологию). Однако, если почитать форум поддержки в репозитории, то можно увидеть отзывы многих пользователей о том, что данный антиспам фильтр не всегда хорошо справляется.

В общем, если вы решили применять reCAPTCHA v3, то никакие дополнительные настройки после ввода ключей делать не нужно. Вам даже не требуется размещать в форме шорткод [recaptcha], который теперь просто игнорируется. Скрипт капчи работает сразу «из коробки» и самостоятельно в фоновом режиме будет определять является человек реальным или ботом.

Плагин Contact Form 7 – reCaptcha v2

Как я уже говорил выше, новой технологии пока не доверяю, поэтому нашел для себя модуль, совместимый с reCAPTCHA v2. Из его однозначных плюсов выделю: активную и быструю работу над ошибками, более 70к загрузок, простота подключения. Скачивайте отсюда либо ставьте сразу из WP-админки.

После его активации вам нужно:

1. Зайти в раздел «Contact Form 7» — пункт «Версия reCaptcha», где выбираете вторую (источник, как и был по умолчанию, остается google.com).

2. Кликаем по кнопке “Отправить”.

3. Далее открываем для редактирования нужную форму и добавляем перед кнопкой отправки шорткод [recaptcha]. Сохраняем настройки и проверяем результат на вебсайте.

Для шорткода, кстати, есть несколько доп.параметров.

Дополнительные нюансы. Если вдруг по какой-то причине автор забросит этот замечательный плагин, то выбирая среди всех остальных плагинов для капчи в Вордпресс с подобными функциями я бы посоветовал попробовать Advanced noCaptcha & invisible Captcha (v2 & v3) (находится тут). Его аналогично часто упоминают как альтернативу, но баги там исправляются чуть менее быстро (хотя также имеется 70к скачиваний).

Если вы используете в работе Flamingo, то я бы настоятельно рекомендовал ставить капчу на Contact Form 7 ибо спам в данном случае изначально фильтруется через Akismet. И когда последний у вас не настроен, то ооочень многие реальные сообщения из формы помечаются как спам. Если я правильно понял, форма в первую очередь ориентируется на Akismet, когда в проекте нет более серьезного решения от Гугла. В общем, тут еще надо тестировать всякие нюансы, но чтобы бы вы не выбрали без антиспама Flamingo лучше не оставлять.

Читайте также:  Установка птф на кенгурин

источник

Форма обратной связи с капчей на PHP

2016-12-19 / Вр:23:25 / просмотров: 13238

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

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

Форма обратной связи не отправится, пока не будет правильно введена капча (цифры на картинке).
Для реализации капчи вам нужно будет подготовить 10 изображений с цифрами 0-9 (либо скачайте их тут).

Код капчи (captcha)
Создайте файл с названием « captcha.php » и вставьте в него вот такой код:

Для генерации случайных чисел здесь используется php функция « mt_rand() ».
Генерирует в диапазоне от 0 до 9.
После того, как сгенерировалось число, оно записывается в массив « $num() ». Потом выводится соответствующее изображение и так 5 раз, благодаря циклу «while». Вот так и получаем на экран 5 цифр.
Все эти 5 цифр записываются в переменную « $captcha ».
Переменная « $captcha » будет передаваться обработчику формы для проверки на соответствие цифр, что были введены в поле.

Обработчик формы и капчи (проверка и отправка данных)
Создайте файл « form-handler.php » и вставьте вот такой код:

В этом коде все, что касается обработки данных, проверки полей, ввода капчи и отправки самого письма.
В коде есть комментарий, где какая часть за что отвечает.
Вам только нужно поменять на свое усмотрение содержание письма и заменить обязательно мой email ( test@test ) на собственный ( строка №21 ):

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

Внимание: файлы « form-handler.php » и « captcha.php » должны находиться в одной папке с формой или же, если так не получается, не забываем менять путь к обработчику « form-handler.php »

код на странице form-handler.php:

Здравствуйте, Александр!
Вы не полностью сделали как на примере. У меня нет поля “Тема сообщения”.
По началу я думал, что вы не прописали переменную в обработчике. Но все вижу, что сделано корректно и правильно.
Проверил Ваш код у себя, у меня отправка письма идет. Очень странно.
Тут я вижу без бубна не обойтись. Я мог бы глянуть у вас на сайте, но мне нужны будут доступы и время.

Степан, здравствуйте!
Я разобрался, функция отправки почты php mail ( ) была отключена, поэтому не работала форма обратной связи.

Спасибочки! Все отлично работает.

Привет!
Спасибо большое за капчу. Жил себе блог 7 лет, и тут на тебе – повалился спам на почту через форму… Ну и пришлось воспользоваться твоим решением – теперь снова всё ок.

Здравствуйте! Пожалуйста!
Если вдруг снова СПАМ появится, попробуйте “reCAPTCHA”

Здравствуйте, Степан! Отличный скрипт. Есть маленький вопрос, картинка капчи немного выше формы её ввода, их как-то можно разместить в одну линию? Спасибо!

Здравствуйте, Антон!
Установите код и дайте мне ссылку.
Я вам скажу далее, что прописать в CSS, чтобы капча спустилась ниже.

Всё сделал точь в точь, но почему-то картинки для капчи не отображаются в форме Папка с картинками находится в корневой директории, так же как и всё остальное…

Вы для вордпресса хотите вставить капчу?

Нет, вообще без CMS. Капча для статичной страницы.

Здравствуйте! А как прикрутить кнопку обновления к вашей капче?

перепроверьте название папки, где лежат картинки. Папка должна называться “images”.
А лучше, дайте ссылку, где Вы установили капчу, я посмотрю в исходном коде.

Читайте также:  Установка и обслуживание таксометров

Здравствуйте! Вы можете воспользоваться событиями HTML5

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

источник

Как связать reCaptcha с формой обратной связи

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

Да, есть много плагинов для CMS, но вручную сделать это немного сложнее, а раз появился такой вопрос у одного, то может и кому-то из вас пригодится статья.

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

Форма обратной связи с recaptcha от Google

Итак, для тех, кто еще не понял, мы пытаемся добавить такую штуку в нашу форму:

В первую очередь нужно получить API key для домена, на котором будет использоваться reСaptcha. Чтобы его получить, нужно перейти на эту страницу придумать названия и указать нужный домен:

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

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

А в форму, там, где будет располагаться каптча — следующий блок:

Есть несколько дополнительных настроек, например:

  • светлый или темный внешний вид — data-theme=»light» или data-theme=»dark».
  • нормальный или компактный размер — data-size=»compact», data-size=»norml»

Подробнее о том, какие еще есть настройки и как встроить рекаптчу в несколько форм на одной странице можно почитать тут.

Так как в моей форме все скрипты располагаются в конце страницы, то я решил и скрипт от Google поместить там же. Выглядит это все так:

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

Разметка формы сейчас выглядит так:

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

Теперь, если попытаться получить данные переданные методом POST, мы получим не только данные из полей (имя и телефон), а и значение переменной g-recaptcha-response. Его и нужно отправить Гуглу для прохождения верификации.

Самостоятельно сделать это достаточно сложно, но есть готовый скрипт, который просто подключается к обработчику формы. Скачать его можно с Github на этой страничке:

Теперь необходимо подключить его к обработчику (php файлу, который отправляет письмо) или вставить скрипт прямо в него. У меня это файл mail.php. Подключать в самом начале:

В этом файле написан код, который передаст наш секретный ключ, значение g-recaptcha-response в Google, затем произойдет проверка успешна ли пройдена каптча. Но сначала, нужно добавить несколько переменных:

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

Полный код моего обработчика:

Обратите внимание на почту и не забудьте поменять на свою. Кроме того, способ подключения файла recaptchalib.php предполагает, что что mail.php и recaptchalib.php находятся рядом, то есть в одной папке. Если будет «вываливаться» ошибка, убедитесь, что пути прописаны правильно или скопируйте код прямо в обработчик (в самый верх).

Вот так, достаточно просто подключить reCaptcha для к своим формам. Надеюсь статья была полезной. Помните, что этот способ не только для той формы, о которой шла речь в начале статьи. Вы легко подключите каптчу и к любой другой. На этом — все. Пока!

источник

Добавить комментарий

Adblock
detector