Как добавить капчу на сайт html

if (isset($_POST['g-recaptcha-response']) && $_POST['g-recaptcha-response']) < $secret = '0000000000000000000000'; $ip = $_SERVER['REMOTE_ADDR']; $response = $_POST['g-recaptcha-response']; $rsp = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$ip"); $arr = json_decode($rsp, TRUE); if ($arr['success']) < . >>

В этом коде, как и в предыдущем, необходимо изменить нолики в значении $secret на код секретного ключа, только в данном случае вам нужно вписывать уже другой — тот, что отмечен грифом «*secret». Будьте внимательны.

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

Как установить капчу на сайт

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

Популярные сервисы для капчи

В сети есть множество сервисов, которые поставляют собственные реализации технологии CAPTCHA. Большая часть сайтов (по некоторым данным, до 98%), использующих капчу, выбирают для этого reCAPTCHA от компании Google. Это обусловлено ее эффективностью и тем фактом, что долгое время сервис оставался лидером в разработке передовых решений для спам-защиты. Сейчас главным конкурентом рекапчи является hCAPTCHA, ориентированная на сохранение конфиденциальности интернет-пользователей. В отличие от Гугл-капчи, она не только успешно блокирует запросы от ботов и отражает спам-атаки через формы, но и более щепетильно относится к данным посетителей: сервис не собирает и не хранит сведения об их поведении и т. п.

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

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

Как добавить reCaptcha на сайт: инструкция

Подключить капчу от Google можно вручную, если сайт самописный, или посредством расширений в системе управления контентом (CMS), если проект построен на ней. Мы разберем оба варианта и подскажем, как ставить разные версии рекапчи (v2 и v3).

Регистрация и получение ключей

Чтобы установить капчу на website, нужно вносить изменения в код — очевидно. Но перед этим нам потребуется получить ключи от Google. Для этого обязательно иметь аккаунт в его экосистеме. Если вы пользуетесь YouTube, Gmail, Google Drive или другим гугл-сервисом, скорее всего, он у вас уже есть. Если нет, завести его нетрудно.

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

В поле «Ярлык» можно вставить любое понятное вам обозначение, оно нужно лишь для опознания веб-сайта в списке. Непосредственно адрес проекта указывается в блоке «Домены» (без www, http/https и пути к странице). Все поддомены будут зарегистрированы автоматически. Также здесь нужно указать email-адрес владельца и проставить галочки в чекбоксах с соглашениями. Мы рекомендуем не отказываться от функции отправки оповещений о проблемах.

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

Руководство по reCaptcha v2

При выборе второй версии рекапчи появится небольшой список. Первый пункт подразумевает внедрение уже знаменитого флажка «Я не робот» в какие-либо формы на сайте (регистрация, обратная связь, комментарии и пр.). При «Невидимом значке» проверка начинается только после нажатия определенной кнопки на странице или если трафик выглядит подозрительно. Третий пункт выбирают, если нужно установить капчу на Android-приложение. Нам подходят лишь первые два варианта.

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

Если что, требование не обязательное, поскольку скрипт можно подключить в любом месте. Теперь найдите блок с формой, где планируется делать проверку (установить виджет с флажком), и внедрите туда фрагмент такого вида:

Вместо «ВАШ_КЛЮЧ» подставьте значение из первого поля на странице с выданными ключами. Клиентская часть готова.

Чтобы провести интеграцию с сервером, нужно прописать код проверки там, где у вас проверяются данные, присланные с фронта. На PHP это может выглядеть следующим образом (вариант на curl, через POST):

$error = true; $secret = 'СЕКРЕТНЫЙ_КЛЮЧ'; if (!empty($_POST['g-recaptcha-response'])) < $curl = curl_init('https://www.google.com/recaptcha/api/siteverify'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_POST, true); curl_setopt($curl, CURLOPT_POSTFIELDS, 'secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']); $out = curl_exec($curl); curl_close($curl); $out = json_decode($out); if ($out->success == true) < $error = false; >> if ($error)

Вместо «СЕКРЕТНЫЙ_КЛЮЧ» подставьте значение из второго поля на странице с ключами. После этого капча должна заработать.

Руководство по reCaptcha v3

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

Чтобы поставить такую рекапчу, для начала добавьте в вашу форму скрытое поле «token». Результат может выглядеть примерно так:

 
   Отправить 

Имейте в виду, что генерируемый токен действует только в течение двух минут. Если создать его при загрузке страницы, он может истечь до момента нажатия пользователем кнопки отправки формы, и тогда человека примут за бота. Google рекомендует вызывать капчу при выполнении действия. Подробную информацию можно прочитать здесь . На странице подробно расписано, какие фрагменты кода использовать для подключения reCaptcha в разных вариациях.

С помощью CMS

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

1. «No Captcha ReCaptcha» для WordPress. Позволяет установить проверку в любые формы, а также стилизовать сам виджет reCaptcha под дизайн сайта.
2. «reCAPTCHA» для Joomla!. Можно выбрать светлый или темный стиль капчи.
3. «Google reCAPTCHA» для 1С-Битрикс. В настройках можно указать допустимую оценку, добавить сообщение в случае ошибки.

Заключение

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

Похожие статьи

Как найти битые ссылки на сайте бесплатно

Битые ссылки (broken links) — это ссылки на сайте, которые не работают: например, ведут на несуществующие страницы с кодом ошибки 404 (Page Not Found). Большое количество битых ссылок ухудшает позиции сайта в поисковых системах, а также негативно сказывается на удобстве для пользователей. В нашей статье мы расскажем, как проверить сайт на битые ссылки с помощью бесплатных онлайн-инструментов.

CMS или конструктор: что лучше выбрать

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

Как получить SSL-сертификат Let’s Encrypt

SSL-сертификат — это цифровой сертификат, удостоверяющий подлинность веб-сайта и позволяющий использовать зашифрованное соединение. Без защищенного соединения сайту будет проблематично продвинуться в поисковых системах и завоевать доверие клиентов. Для небольших веб-проектов, лендингов и блогов отлично подойдет бесплатный SSL-сертификат Let’s Encrypt. В нашей статье мы подробно расскажем, как получить его на виртуальном хостинге и VPS/VDS сервере.

Нажмите дважды, чтобы увеличить

Добавление Google reCAPTCHA к PHP форме

Google reCAPTCHA – это сервис для защиты вашего сайта от ботов и других атак.

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

Версии Google reCAPTCHA:

• reCAPTCHA v2 – проверка пользователя с нажатием на флажок «Я не робот» («I’m not a robot»), бесплатно до 1 млн проверок в месяц;
• reCAPTCHA v3 – проверка пользователя в фоновом режиме не требующая от него никаких действий (бесплатно до 1 млн запросов в месяц);
• reCAPTCHA Enterprise – предназначена для комплексной защиты всего сайта от мошеннических действий (версия платная, ориентировочная стоимость около 1$ за 1000 запросов).

Подключение reCAPTCHA v2 или v3

Установку Google reCAPTCHA v2 или v3 для проверки форм можно представить в виде следующих шагов:

• получение ключей (site и secret) для сайта;
• вставка виджета и скриптов гугл капчи на HTML страницу;
• передача ответа на сервер;
• получение на сервере результата решения капчи.

Получение ключей reCAPTCHA

Получение ключей для reCAPTCHA v2 или v3 необходимо перейти на страницу «www.google.com/recaptcha/admin».

Для доступа к консоли администратора необходимо иметь аккаунт в Gmail. Если учётной записи нет, то её нужно завести.

После этого необходимо нажать на значок «+».

В открывшейся форме нужно:

• вести название ярлыка (например, Мой сайт);
• выбрать нужный тип reCAPTCHA;
• укажите один или несколько доменов (например, «mysite.ru»);
• принять условия использования reCAPTCHA.

После заполнения всех полей нажать на кнопку «Отправить».

При успешной регистрации Google будут выданы 2 ключа:

• публичный (его нужно вставить в HTML-код);
• секретный (на сервере, для установления обмена данными между сайтом и сервисом reCAPTCHA, т.е. для получения ответа о результатах решения капчи пользователем);

Установка recaptcha на сайт

Подключение reCAPTCHA к сайту (странице) осуществляется как на стороне клиента (в HTML), так на стороне сервера (в PHP).

Разберём, как это осуществляется более подробно. В качестве примере выберем ajax форму обратной связи.

Подключение recaptcha к HTML-документу

Подключение виджета reCAPTCHA к странице осуществляется посредством выполнения 2 действий:

1. Включения в страницу JavaScript скрипта recaptcha.
2. Добавление элемента div с классом «g-recaptcha» и атрибутом data-sitekey , имеющий в качестве значения ваш публичный ключ (public key) капчи.

Кроме этого, добавим на страницу ещё элемент div с идентификатором . Данный элемент будем использовать для отображения ошибки, связанной с google racaptcha.

Кроме этого необходимо будет внести ещё изменения в файл script.js , т.к. форма обратной связи отправляется на сервер через AJAX.

// Работа с виджетом recaptcha // 1. Получить ответ гугл капчи var captcha = grecaptcha.getResponse(); // 2. Если ответ пустой, то выводим сообщение о том, что пользователь не прошёл тест. // Такую форму не будем отправлять на сервер. if (!captcha.length) { // Выводим сообщение об ошибке $('#recaptchaError').text('* Вы не прошли проверку "Я не робот"'); } else { // получаем элемент, содержащий капчу $('#recaptchaError').text(''); } // 3. Если форма валидна и длина капчи не равно пустой строке, то отправляем форму на сервер (AJAX) if ((formValid) && (captcha.length)) { . // добавить в formData значение 'g-recaptcha-response'=значение_recaptcha formData.append('g-recaptcha-response', captcha); . } // 4. Если сервер вернул ответ error, то делаем следующее. // Сбрасываем виджет reCaptcha grecaptcha.reset(); // Если существует свойство msg у объекта $data, то. if ($data.msg) { // вывести её в элемент у которого $('#recaptchaError').text($data.msg); }

Интегрирование recaptcha в php скрипт

Установка recaptcha в скрипт php осуществляется посредством внесения в файл process.php следующих изменений:

• создание переменной $secret , содержащей секретный ключ вашего сайта;
• подключения клиентской библиотеки reCAPTCHA PHP посредством включения в скрипт файла autoload.php ;
• проверка наличия ключа g-recaptcha-response в суперглобальном массиве POST;
• если данное имя ( g-recaptcha-response ) есть, то создать экземпляр службы recaptcha, используя ваш секретный ключ;
• получить результат проверки кода: если результат положительный, то выполнить необходимые действия (например, отправить информацию на почту).
• если возникла ошибка, то отправить клиенту отрицательный результат.

// ваш секретный ключ $secret = '6NepjAsGBBABBN7_Qy9yfzShcKmc70X2kXQyX1WO'; // однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP) require_once (dirname(__FILE__).'/recaptcha/autoload.php'); // если в массиве $_POST существует ключ g-recaptcha-response, то. if (isset($_POST['g-recaptcha-response'])) { // создать экземпляр службы recaptcha, используя секретный ключ $recaptcha = new \ReCaptcha\ReCaptcha($secret); // получить результат проверки кода recaptcha $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']); // если результат положительный, то. if ($resp->isSuccess()){ // действия, если код captcha прошёл проверку //. } else { // иначе передать ошибку $errors = $resp->getErrorCodes(); $data['error-captcha']=$errors; $data['msg']='Код капчи не прошёл проверку на сервере'; $data['result']='error'; } } else { //ошибка, не существует ассоциативный массив $_POST["send-message"] $data['result']='error'; }

Готовая форма обратной связи с recaptcha

Бесплатно загрузить форму обратной связи с recaptcha можно по следующей ссылке:

Изображения готовой формы, в которую интегрирована recaptcha.

Статьи, связанные с этой темой:

• Форма обратной связи на php, html и bootstrap
• Всплывающая форма обратной связи

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии: 229

20.10.2022, 00:18

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

20.10.2022, 11:03
О, разобрался. Это стандартная функция HTML5 )
29.06.2022, 18:06

Здравствуйте!
У вас отличная форма, понятная. Но никак не получается настроить отправку через smtp. Пробовал через серверы mail и yandex.
Если указываю smtp.yandex.ru порт 465, то в message.txt запись появляется, а на почну не уходит сообщение. И выводится в форме ошибка: 504 Gateway Time-out при отправке данных.
Если указывать ssl://smtp.yandex.ru порт 465, то на почту сообщение не приходит, и выводится сообщение в форме: «Произошла ошибка при отправке формы на сервер.»

Уточните, пожалуйста, в чем может быть ошибка?

26.09.2021, 17:53

Преведствую, Вас Александр! Внедрил на сайт сие чудо творение. Все четко и слаженно работает! Вам огромная благодарнность за Ваши труды! Могли бы Вы помочь в доработке? А именно: подключить валидацию имени, e-mail, а также № тел — что бы могли вписывать не совсем умные, то есть просто набирать цифры, а символы и пробелы должны подставлятся автоматом с формы. как реализовать checkbox или другой вариант — возможность указать не только URL, а и возможность вставки URL страницы соцсети по клику или… варианты?

 $bodyMailadmin = str_replace('%email.title%', 'Сообщение для обмена',$bodyMailadmin); $bodyMailadmin = str_replace('%username%', $name, $bodyMailadmin); $bodyMailadmin = str_replace('%email.message%', $message, $bodyMailadmin); $bodyMailadmin = str_replace('%useremail%', $email, $bodyMailadmin); $bodyMailadmin = str_replace('%userphone%', $phone, $bodyMailadmin); $bodyMailadmin = str_replace('%usersiteurl%', $siteurl, $bodyMailadmin); $bodyMailadmin = str_replace('%email.date%', date('d.m.Y H:i'), $bodyMailadmin); $bodyMailadmin = str_replace('%re%', $re, $bodyMailadmin); 

Заранее благодарен!
13.09.2021, 13:58

У себя на сайте в форме регистрации для валидации использую php либу grecaptcha:

public function ValidateRecaptcha ($sValue) { $secret = Config::Get('recaptcha.secret_key'); $resp = null; if (isset($_POST['g-recaptcha-response'])) { $recaptcha = new \ReCaptcha\ReCaptcha($secret); $resp = $recaptcha->verify($_POST['g-recaptcha-response'] , $_SERVER['REMOTE_ADDR']); } if (!$resp->isSuccess()) { return $resp->getErrorCodes(); } return true; }

На самой странице:

В принципе все отлично работает.

Но, к примеру при регистрации юзера после submit формы рекапча валидировалась, а какое-либо поле (логин, e-mail и т.п.) не прошло валидацию.
Юзер исправляет данные. При этом рекапча уже отмечена решенной.
А при повторном submit формы — получаем ошибку валидации timeout-or-duplicate

Погуглив данную ошибку понял, что API рекапчи не позволяет её верифицировать более одного раза по одному и тому же токену.

Думаю, что для решения проблемы, при получении ошибки либо НЕвалидации какого-либо поля нужно перезапускать рекапчу.

Долго гуглил — как я понял через php это не предусмотрено, а через js — grecaptcha.reset();.

Можете помочь советом, как это «прикрутить»?

В документации есть опция error-callback. Может можно решить задействовав её?

Александр Мальцев
14.09.2021, 15:13

Привет! Необходимо вызвать grecaptcha.reset() в коде JavaScript в котором обрабатываете ответ от сервера.

05.05.2021, 16:09

Здравствуйте, актуальная ли статья сейчас? Что-то не могу понять где получать ключи, после нажатия большой кнопки «Get Started» меня перекидывает на страницу console.cloud.google.com, и там меня просят создать какой-то billing аккаунт, правильно ли это? Просто, там связано что-то с облаком, оплатами, кредитами, не понятно для меня всё это.

Александр Мальцев
06.05.2021, 14:40

Привет! Да, статью обновлю в ближайшее время. Немного всё поменялось. Сейчас нужно входить сюда: www.google.com/recaptcha/admin

07.05.2021, 07:20
Благодарю, теперь без проблем поставил. Странно что в оригинале это нигде не найдешь 🙂
23.04.2021, 14:54

Подскажите пожалуйста как использовать капчу дважды на одной странице?
У меня разные формы на странице. При отправке первой формы (идет выше в DOM) все прекрасно. При отправке второй формы grecaptcha.getResponse() не получает код капчи и соответственно дальше скрипт не работает

Александр Мальцев
24.04.2021, 13:27

Посмотрите в этой теме: Защита сайта с помощью invisible reCAPTCHA.
В ней имеется раздел «Несколько invisible reCAPTCHA на одной странице». Здесь необходимо будет создать что-то подобное.

13.03.2021, 14:30

Recapcha нормально работает с contact form 7. Но мне нужно установить ее в вордпрессе на форму комментариев на других страницах сайта. Спам замучал… Как это сделать?
Заранее благодарен.

04.01.2021, 21:46

Добрый день Александр. А как можно сделать простую защиту файла от ботов. Чтобы файл открывалась только после recaptch’и.

24.11.2020, 23:47

Здравствуйте. Я скачал готовую форму обратной связи с recaptcha, создал 2 ключа (Версия 2 – флажок) и прописал в нужные файлы. После отправки выводится «Ваше сообщение отправлено», но на почту ничего не приходит (на странице google.com/recaptcha/admin/site/ прописаны 2 почты, одна на gmail, вторая на mail.ru). В файле message.txt все отправленные сообщения создаются.
Может еще где-то нужно прописать свою почту?
Сайт: new.313news.net — форма в самом низу.

Александр Мальцев
26.11.2020, 14:21
Здравствуйте! Почта настраивается здесь:

// создаём экземпляр класса PHPMailer $mail = new PHPMailer; $mail->CharSet = 'UTF-8'; $mail->From = 'email@mysite.ru'; $mail->FromName = 'Имя сайта'; $mail->Subject = 'Сообщение с формы обратной связи'; $mail->Body = $output; $mail->AddAddress( 'myemail@mail.ru' ); // прикрепляем файлы к письму if (isset($files)) { foreach ($files as $value) { $mail->addAttachment($value); }

Но, лучше, конечно, это сделать через SMTP. Для этого код, приведённый выше лучше заменить на этот (вместо звёздочек следует установить свои значения):

// устанавливаем параметры $mail = new PHPMailer; $mail->CharSet = 'UTF-8'; /* Отправка письма по SMTP */ $mail->isSMTP(); $mail->SMTPAuth = true; $mail->Host = '*****'; $mail->Port = '*****'; $mail->Username = '*****'; $mail->Password = '*****'; $mail->Encoding = 'base64'; $mail->IsHTML(true); $mail->setFrom('*****', '*****'); $mail->Subject = '*****'; $mail->Body = $output; $mail->addAddress('*****'); if (isset($files)) { foreach ($files as $value) { $mail->addAttachment($value); } }

26.11.2020, 14:55

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

Имя пользователя: fetva@313news.net
Пароль: Используйте пароль почтовой учетной записи.
Сервер входящей почты: cpanel24.v.fozzy.com
IMAP Port: 993 POP3 Port: 995
Исходящий сервер: cpanel24.v.fozzy.com
SMTP Port: 465
IMAP, POP3 и SMTP authentication.

Александр Мальцев
26.11.2020, 15:22
Попробуйте так:

/* Отправка письма по SMTP */ $mail->isSMTP(); $mail->SMTPAuth = true; $mail->Host = 'cpanel24.v.fozzy.com'; $mail->Port = '465'; $mail->Username = 'fetva@313news.net'; $mail->Password = '*****'; $mail->Encoding = 'base64'; $mail->IsHTML(true); $mail->setFrom('fetva@313news.net', '313news.net'); $mail->Subject = 'Message from 313news.net'; $mail->Body = $output; $mail->addAddress('fetva@313news.net');

26.11.2020, 15:56

Письмо не ушло. На почте ничего нет, но в файле message.txt оно появилось.

Через минуту в форме появилось сообщение:

Произошла ошибка  
Request Timeout
 
This request takes too long to process, it is timed out by the server. If it should not be timed out, please contact administrator of this web site to increase 'Connection Timeout'.
  при отправке данных.

А вместо капчи написано: Время проверки истекло…

Приведу код на всякий случай

//2. Отправляем на почту // включить файл PHPMailerAutoload.php require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php'; //формируем тело письма $output = "Дата: " . date("d-m-Y H:i") . "\n"; $output .= "Имя пользователя: " . $name . "\n"; $output .= "Адрес email: " . $email . "\n"; $output .= "Сообщение: " . "\n" . $message . "\n"; // создаём экземпляр класса PHPMailer // $mail = new PHPMailer; // // $mail->CharSet = 'UTF-8'; // $mail->From = 'email@mysite.ru'; // $mail->FromName = 'Имя сайта'; // $mail->Subject = 'Сообщение с формы обратной связи'; // $mail->Body = $output; // $mail->AddAddress( 'myemail@mail.ru' ); // // прикрепляем файлы к письму // if (isset($files)) { // foreach ($files as $value) { // $mail->addAttachment($value); // } // } // устанавливаем параметры $mail = new PHPMailer; $mail->CharSet = 'UTF-8'; /* Отправка письма по SMTP */ $mail->isSMTP(); $mail->SMTPAuth = true; $mail->Host = 'cpanel24.v.fozzy.com'; $mail->Port = '465'; $mail->Username = 'fetva@313news.net'; $mail->Password = 'пароль'; $mail->Encoding = 'base64'; $mail->IsHTML(true); $mail->setFrom('fetva@313news.net', '313news.net'); $mail->Subject = 'Message from 313news.net'; $mail->Body = $output; $mail->addAddress('fetva@313news.net'); if (isset($files)) { foreach ($files as $value) { $mail->addAttachment($value); } } // отправляем письмо if ($mail->Send()) { $data['result']='success'; } else { $data['result']='error'; } }

26.11.2020, 17:00

Изменил на это и письмо ушло:
Non-SSL Settings (NOT Recommended).
Исходящий сервер: mail.313news.net
SMTP Port: 587

$mail->Host = 'mail.313news.net'; $mail->Port = '587';

Помогите пожалуйста еще в одном деле. Мне нужно добавить в форму и код Селектор.
Вместо поля Имя добавить селектор: Выбрать пол — Мужской, Женский
После поля Текст добавить селектор с выбором сотрудника (на почту отправляется выбранное имя)

Александр Мальцев
27.11.2020, 15:43
SSL можно указать так:

$mail->Host = 'ssl://cpanel24.v.fozzy.com';

Как добавить в форму новое поле подробно описывал в этой статье. Она, конечно, немного отличается от этой, но принцип такой же.

27.11.2020, 20:23

$mail->Host = 'ssl://cpanel24.v.fozzy.com';

с этим вылезла ошибка, письмо не отправляется.

Как добавить в форму новое поле подробно описывал в этой статье. Она, конечно, немного отличается от этой, но принцип такой же.

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

 
 Укажите свой пол Мальчик Девочка  

а в файл process.php добавил:
перед:

//получить сообщение, которое ввёл пользователь

if (isset($_POST['pol'])) { $message = filter_var($_POST['pol'], FILTER_SANITIZE_STRING); // защита от XSS if (!checkTextLength($pol, 3, 10)) { // проверка на количество символов в тексте $data['pol'] = 'Поле pol содержит недопустимое количество символов'; $data['result'] = 'error'; } }

далее добавил pol тут

//1. Сохрание формы в файл $output = "---------------------------------" . "\n"; $output .= date("d-m-Y H:i:s") . "\n"; $output .= "Имя пользователя: " . $name . "\n"; $output .= "Адрес email: " . $email . "\n"; $output .= "Пол: " . $pol . "\n"; $output .= "Сообщение: " . $message . "\n";

//2. Отправляем на почту // включить файл PHPMailerAutoload.php require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php'; //формируем тело письма $output = "Дата: " . date("d-m-Y H:i") . "\n"; $output .= "Имя пользователя: " . $name . "\n"; $output .= "Адрес email: " . $email . "\n"; $output .= "Пол: " . $pol . "\n"; $output .= "Сообщение: " . "\n" . $message . "\n";

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

Александр Мальцев
30.11.2020, 14:02

Может порт с использованием ssl какой-то другой.

В этой форме ещё нужно добавить код в «script.js»:

// . var pol = $('#pol').val(); // . formData.append('pol', pol); // .

19.02.2020, 14:48

Добрый день.
Спасибо за инструкцию.

Помогите, пожалуйста.
1. Нет файла process.php Где он может лежать? Или его нужно создать?
2. Файл script.js у меня в шаблоне сайта, это нормально, код капчи будет в нем работать?
Спасибо.

19.02.2020, 22:18

process.php лежит в корне feedback, там же где и index.html
По: script.js Он может лежать где угодно, главное измените путь под комментарием //URL-адрес запроса

20.02.2020, 10:13

Спасибо за ответ.
Странно, прошерстил toal comannder, process.php нет нигде.
У меня cms joomla, может он имеет другое название?

20.02.2020, 10:33
А при чем тут joomla? Эта форма не имеет отношения к cms
Скачайте архив и все поймете
13.02.2020, 04:53

Здравствуйте Александр.
Спасибо за труды и форму. Все работает отлично.
Не подскажете как добавить 4 input’a radio в вашу форму? Или хотя бы ссылку на мануал для нубов)
Буду очень благодарен.

Александр Мальцев
20.02.2020, 15:43

Здравствуйте! Спасибо за отзыв!
Алгоритм для добавления радиокнопок в форму будет следующий.
1. Добавить переключатели в разметку формы (в «index.html»):

. 
Выберите цвет:
 
  Красный 
 
 Зеленый 
 
 Белый 
 
 Золотой 
 
 .

2. Включить значение выбранной радиокнопки в FormData (для отправки на сервер). Для этого нужно добавить следующий код в «script.js»:

. // добавить данные в FormData значение 'color' = значение_поля_color formData.append('color', $('[name="color"]:checked').val()); .

3. Добавить в «process.php» код для получения значения поля color из POST и включить его значение в данные для отправки на почту:

. // получим цвет if (isset($_POST['color'])) { $color = $_POST['color']; } else { $data['result']='error'; } . $output .= "Цвет: " . "\n" . $color . "\n"; .

Ссылка на архив: контактная форма с radio
25.02.2020, 06:36

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

14.10.2019, 17:21

Почему то не отправляются файлы в папку images, ошибку не пишет, просто отправляет сообщение на почту.

Сделал для нескольких типов файлов, как вы писали ниже.

// открываем сессию
session_start();

// переменная в которую будем сохранять результат работы
$data[‘result’]=’error’;

// разрешённые типы файлов
$allowedExtension = array(«jpg», «jpeg», «gif», «png», «xls», «xlsx», «zip», «doc», «rar»);

// директория для хранения файлов ()
$pathToFile = $_SERVER[‘DOCUMENT_ROOT’].’/templates/mysite/feedback/files/’;

// максимальный размер файла
$maxSizeFile = 3072000;

// ваш секретный ключ
$secret = ‘6gfgAAAgM458madp_-Qn9gRPSpmJm’;

// функция для проверки длины строки
function validStringLength($string,$min,$max)
else {
return true;
}
}

// если данные были отправлены методом POST, то…
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’) {

//получить имя, которое ввёл пользователь
if (isset($_POST[‘name’])) {
$name = $_POST[‘name’];
if (!validStringLength($name,2,30)) {
$data[‘name’]=’Поля имя содержит недопустимое количество символов.’;
$data[‘result’]=’error’;
}
} else {
$data[‘result’]=’error’;
}
//получить email, которое ввёл пользователь
if (isset($_POST[’email’])) {
$email = $_POST[’email’];
if (!filter_var($email,FILTER_VALIDATE_EMAIL)) {
$data[’email’]=’Поле email введено неправильно’;
$data[‘result’]=’error’;
}
} else {
$data[‘result’]=’error’;
}
//получить сообщение, которое ввёл пользователь
if (isset($_POST[‘message’])) {
$message = $_POST[‘message’];
if (!validStringLength($message,20,500)) {
$data[‘message’]=’Поле сообщение содержит недопустимое количество символов.’;
$data[‘result’]=’error’;
}
} else {
$data[‘result’]=’error’;
}

// если не существует ни одной ошибки, то прододжаем…
if ($data[‘result’]==’success’) {
// однократное включение файла autoload.php (клиентская библиотека reCAPTCHA PHP)
require_once (dirname(__FILE__).’/recaptcha/autoload.php’);
// если в массиве $_POST существует ключ g-recaptcha-response, то…
if (isset($_POST[‘g-recaptcha-response’])) {
// создать экземпляр службы recaptcha, используя секретный ключ
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
// получить результат проверки кода recaptcha
$resp = $recaptcha->verify($_POST[‘g-recaptcha-response’], $_SERVER[‘REMOTE_ADDR’]);
// если результат положительный, то…
if ($resp->isSuccess()){
// действия, если код captcha прошёл проверку
//обработаем файлы, загруженные пользователем посредством элементов с name=«images[]»
// если ассоциатианый массив $_FILES[«images»] существует, то
if(isset($_FILES[«images»])) {
// переберём все файлы (изображения)
$files = array();
foreach ($_FILES[«images»][«error»] as $key => $error) {
// если ошибок не возникло, т.е. файл был успешно загружен на сервер, то…
if ($error == UPLOAD_ERR_OK) {
// имя файла на устройстве пользователя
$nameFile = $_FILES[‘images’][‘name’][$key];
// расширение загруженного пользователем файла в нижнем регистре
$extFile = mb_strtolower(pathinfo($nameFile, PATHINFO_EXTENSION));
// размер файла
$sizefile = $_FILES[‘images’][‘size’][$key];
//myme-тип файла
$filetype = $_FILES[‘images’][‘type’][$key];
// проверить расширение файла, размер файла и mime-тип
if (!in_array($extFile, $allowedExtension)) {
$data[‘files’]=’Ошибка при загрузке файлов (неверное расширение).’;
$data[‘result’]=’error’;
} elseif ($sizefile > $maxSizeFile) {
$data[‘files’]=’Ошибка при загрузке файлов (размер превышает 3МБ).’;
$data[‘result’]=’error’;
} elseif (!in_array($filetype, $allowedExtension)){
$data[‘files’]=’Ошибка при загрузке файлов (неверный тип файла).’;
$data[‘result’]=’error’;
} else {
//ошибок не возникло, продолжаем…
// временное имя, с которым принятый файл был сохранён на сервере
$tmpFile = $_FILES[‘images’][‘tmp_name’][$key];
// уникальное имя файла
$newFileName = uniqid(‘img_’, true).’.’.$extFile;
// полное имя файла
$newFullFileName = $pathToFile.$newFileName;
// перемещаем файл в директорию
if (!move_uploaded_file($tmpFile, $newFullFileName)) {
// ошибка при перемещении файла
$data[‘files’]=’Ошибка при загрузке файлов.’;
$data[‘result’]=’error’;
} else {
$files[] = $newFullFileName;
}
}
} else {
//ошибка при загрузке файл на сервер
$data[‘result’]=’error’;
}
}
}
} else {
// иначе передать ошибку
$errors = $resp->getErrorCodes();
$data[‘error-captcha’]=$errors;
$data[‘msg’]=’Код капчи не прошёл проверку на сервере’;
$data[‘result’]=’error’;
}
} else {
$data[‘result’]=’error’;
}
}
} else {
//ошибка, не существует ассоциативный массив $_POST[«send-message»]
$data[‘result’]=’error’;
}

// дальнейшие действия (ошибок не обнаружено)
if ($data[‘result’]==’success’) {
//1. Сохрание формы в файл
$output = «———————————«. «\n»;
$output .= date(«d-m-Y H:i:s»). «\n»;
$output .= «Имя пользователя: ». $name. «\n»;
$output .= «Адрес email: ». $email. «\n»;
$output .= «Сообщение: ». $message. «\n»;
if (isset($files)) {
$output .= «Файлы: ». «\n»;
foreach ($files as $value) {
$href = substr($value,strpos($value, ‘/templates/mysite/feedback/’));
$output .= ».$href.». «\n»;
}
}
if (file_put_contents(dirname(__FILE__).’/message.txt’, $output, FILE_APPEND | LOCK_EX)) {
$data[‘result’]=’success’;
} else {
$data[‘result’]=’error’;
}

//2. Отправляем на почту
// включить файл PHPMailerAutoload.php
require_once dirname(__FILE__). ‘/phpmailer/PHPMailerAutoload.php’;
//формируем тело письма
$output = «Дата: ». date(«d-m-Y H:i»). «\n»;
$output .= «Имя пользователя: ». $name. «\n»;
$output .= «Адрес email: ». $email. «\n»;
$output .= «Сообщение: ». «\n». $message. «\n»;
if (isset($files)) {
$output .= «Файлы: ». «\n»;
foreach ($files as $value) {
$href = substr($value,strpos($value, ‘/templates/mysite/feedback/’));
$output .= ».$href.». «\n»;
}
}

// создаём экземпляр класса PHPMailer
$mail = new PHPMailer;

$mail->CharSet = ‘UTF-8’;
$mail->From = ‘as@3u.ru’;
$mail->FromName = ‘Админ 3u.ru’;
$mail->Subject = ‘Письмо с сайт 3u.ru’;
$mail->Body = $output;
$mail->IsHTML(true);
$mail->AddAddress( ‘My@ya.ru’ );
// прикрепляем файлы к письму

// отправляем письмо
if ($mail->Send()) {
$data[‘result’]=’success’;
} else {
$data[‘result’]=’error’;
}

//после загрузки веб-страницы
$(function () {

// максимальное количество файлов
var countFiles = 5;
// типы разрешённых файлов
var typeFile = [
‘jpg’,
‘jpeg’,
‘gif’,
‘png’,
‘xls’,
‘xlsx’,
‘zip’,
‘doc’,
‘rar’,
];
// максимльный размер
var maxSizeFile = 3072000; //3 МБ
// отображаем на форме максимальное количество файлов
$(‘#countFiles’).text(countFiles);
// при изменения значения элемента «Выбрать файл»
$(document).on(‘change’,’input[name=«images[]»]’,function(e){
// если выбран файл, то добавить ещё элемент «Выбрать файл»
if ((e.target.files.length>0)&&($(this).next(‘p’).next(‘input[name=«images[]»]’).length==0) && ($(‘input[name=«images[]»]’).length $(this).next(‘p’).after(»);
}
// если выбран файл, то…
if (e.target.files.length>0) {
// получить файл
var file = e.target.files[0];
// проверить размер файла
if (($.inArray(file.name.split(‘.’).pop().toLowerCase(),typeFile)>=0) && (file.size <3072000)) {
formData.append(‘images[]’, file, file.name);
}
// проверить тип файла
else if ($.inArray(file.name.split(‘.’).pop().toLowerCase(),typeFile)==-1) {
$(this).next(‘p’).text(‘* Файл не будет отправлен, т.к. его тип не соответствует разрешённому’);
}
else {
// убираем сообщение об ошибке
if ($(this).next(‘p’)) {
$(this).next(‘p’).text(»);
}
}
}
else {
// если после изменения файл не выбран, то сообщаем об этом пользователю
$(this).next(‘p’).text(‘* Файл не будет отправлен, т.к. он не выбран’);
}
});

// при отправке формы messageForm на сервер (id=«messageForm»)
$(‘#messageForm’).submit(function (event) {
// отменим стандартное действие браузера
event.preventDefault();
// заведём переменную, которая будет говорить о том валидная форма или нет
var formValid = true;

// перебирём все элементы управления формы (input и textarea)
$(‘#messageForm input,#messageForm textarea’).each(function () {

//найти предков, имеющих класс .form-group (для установления success/error)
var formGroup = $(this).parents(‘.form-group’);
//найти glyphicon (иконка успеха или ошибки)
var glyphicon = formGroup.find(‘.form-control-feedback’);
//валидация данных с помощью HTML5 функции checkValidity
if (this.checkValidity()) {
//добавить к formGroup класс .has-success и удалить .has-error
formGroup.addClass(‘has-success’).removeClass(‘has-error’);
//добавить к glyphicon класс .glyphicon-ok и удалить .glyphicon-remove
glyphicon.addClass(‘glyphicon-ok’).removeClass(‘glyphicon-remove’);
} else {
//добавить к formGroup класс .has-error и удалить .has-success
formGroup.addClass(‘has-error’).removeClass(‘has-success’);
//добавить к glyphicon класс glyphicon-remove и удалить glyphicon-ok
glyphicon.addClass(‘glyphicon-remove’).removeClass(‘glyphicon-ok’);
//если элемент не прошёл проверку, то отметить форму как не валидную
formValid = false;
}
});

//проверяем элемент, содержащий код капчи
//1. Получаем капчу
var captcha = grecaptcha.getResponse();
//2. Если длина кода капчи, которой ввёл пользователь не равно 6,
// то сразу отмечаем капчу как невалидную (без отправки на сервер)
if (!captcha.length) {
// Выводим сообщение об ошибке
$(‘#recaptchaError’).text(‘* Вы не прошли проверку «Я не робот»’);
} else {
// получаем элемент, содержащий капчу
$(‘#recaptchaError’).text(»);
}

// если форма валидна и длина капчи не равно пустой строке, то отправляем форму на сервер (AJAX)
if ((formValid) && (captcha.length)) {

// получаем имя, которое ввёл пользователь
var name = $(«#name»).val();
// получаем email, который ввёл пользователь
var email = $(«#email»).val();
// получаем сообщение, которое ввёл пользователь
var message = $(«#message»).val();

// объект, посредством которого будем кодировать форму перед отправкой её на сервер
var formData = new FormData();
// добавить в formData значение ‘name’=значение_поля_name
formData.append(‘name’, name);
// добавить в formData значение ’email’=значение_поля_email
formData.append(’email’, email);
// добавить в formData значение ‘message’=значение_поля_message
formData.append(‘message’, message);
// добавить в formData файлы
// получить все элементы с атрибутом name=«images[]»
var images = document.getElementsByName(«images[]»);
// перебрать все элементы images с помощью цикла
for (var i = 0; i < images.length; i++) {
// получить список файлов элемента input с type=«file»
var fileList = images[i].files;
// если элемент не содержит файлов, то перейти к следующей
if (fileList.length > 0) {
// получить первый файл из списка
var file = fileList[0];
// проверить тип файла и размер
if ((file.type.match(‘image.*’)) && (file.size <524288)) {
// добавить его (файл (file) с именем file.name) в formData
formData.append(‘images[]’, file, file.name);
}
}
}

// добавить в formData значение ‘g-recaptcha-response’=значение_recaptcha
formData.append(‘g-recaptcha-response’, captcha);

// технология AJAX
$.ajax({
//метод передачи запроса — POST
type: «POST»,
//URL-адрес запроса
url: «/templates/mysite/feedback/process.php»,
//передаваемые данные — formData
data: formData,
// не устанавливать тип контента, т.к. используется FormData
contentType: false,
// не обрабатывать данные formData
processData: false,
// отключить кэширование результатов в браузере
cache: false,
//при успешном выполнении запроса
success: function (data) {
// разбираем строку JSON, полученную от сервера
var $data = JSON.parse(data);
// устанавливаем элементу, содержащему текст ошибки, пустую строку
$(‘#error’).text(»);

// если сервер вернул ответ success, то значит двнные отправлены
if ($data.result == «success») {
// скрываем форму обратной связи
$(‘#messageForm’).hide();
// удаляем у элемента, имеющего класс hidden
$(‘#msgSubmit’).removeClass(‘hidden’);
} else {
// Если сервер вернул ответ error, то делаем следующее…
$(‘#error’).text(‘Произошла ошибка при отправке формы на сервер.’);
// Сбрасываем виджет reCaptcha
grecaptcha.reset();
// Если существует свойство msg у объекта $data, то…
if ($data.msg) {
// вывести её в элемент у которого > $(‘#msg’).text($data.msg);
}
if ($data.files) {
$(‘#error’).html($(‘#error’).text()+’
‘+$data.files);
}
}
},
error: function (request) {
$(‘#error’).text(‘Произошла ошибка ‘ + request.responseText + ‘ при отправке данных.’);
}
});
}
});
});