Недавно для одного из заказчиков понадобилась форма обратной связи, но он попросил привязать к ней рекапчу от гугла. В статье расскажу как я это сделал.
Когда меня просят подключить форму сбора заявок или форму обратной связи я использую готовые скрипты PHPMailer, но до этого обработчик почты не был подключен к сервису рекапчи и я решил подключить его. На самом деле это делается все просто.
В файле обработчика почты есть условия при котором письмо либо отправляется, либо выводит ошибку. у меня это выглядит так:
if ($mail->send()) {
$data['result'] = "success";
$data['info'] = "Сообщение успешно отправлено!";
} else {
$data['result'] = "error";
$data['info'] = "Сообщение не было отправлено. Ошибка при отправке письма";
$data['desc'] = "Причина ошибки: {$mail->ErrorInfo}";
}
} else {
$data['result'] = "error";
$data['info'] = "В коде присутствует ошибка";
$data['desc'] = error_get_last();
}
У каждого обработчик по разному написан но примерно такой код должен быть у всех кто использует PHPMailer, чтобы подключить ReCAPTCHA нам нужно этот код заключить в условие проверки пройдена ли проверка или нет. И окончательный вариант будет выглядеть так.
$recaptcha=$_POST['g-recaptcha-response'];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$sec = array(
'secret' => 'ЗДЕСЬ ВАШ SECRET KEY',
'response' => $_POST["g-recaptcha-response"]
);
$options = array(
'http' => array (
'method' => 'POST',
'content' => http_build_query($sec)
)
);
$context = stream_context_create($options);
$verify = file_get_contents($url, false, $context);
$captcha_success=json_decode($verify);
if ($captcha_success->success==false) {
$data['info'] = "Введите капчу";
} else if ($captcha_success->success==true) {
if ($mail->send()) {
$data['result'] = "success";
$data['info'] = "Сообщение успешно отправлено!";
} else {
$data['result'] = "error";
$data['info'] = "Сообщение не было отправлено. Ошибка при отправке письма";
$data['desc'] = "Причина ошибки: {$mail->ErrorInfo}";
}
} else {
$data['result'] = "error";
$data['info'] = "В коде присутствует ошибка";
$data['desc'] = error_get_last();
}
}
Но на этом не все, в саму форму отправки перед </form> нам тоже кое что нужно добавить
<div class="g-recaptcha" data-sitekey="ЗДЕСЬ ВАШ ПУБЛИЧНЫЙ КЛЮЧ"></div>
<div class="answer"></div>
Также не забудьте подключить гугловский скрипт
<script src='https://www.google.com/recaptcha/api.js'></script>
Так же не забудьте в скрипт обработки вашей форме добавить условие при котором будет выводиться сообщение если галочка не нажата.
var captcha = grecaptcha.getResponse();
if (!captcha.length) {
let sucess = document.querySelector('.sucess');
sucess.textContent = 'Пройдите проверку что вы не робот';
}
Здесь часть кода из моей формы, вы можете использовать alert, чтоб вывести информацию о том, что рекапча не пройдена. Например так.
var captcha = grecaptcha.getResponse();
if (!captcha.length) {
alert("Рекапча не пройдена");
}
Если же вам нужна помощь в настройке формы сбора заявок пишите мне.
Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .