StillMaster » Веб разработка » JS » Как подключить ReCAPTCHA к форме обратной связи на PHPMailer

Как подключить ReCAPTCHA к форме обратной связи на PHPMailer
Как подключить ReCAPTCHA к форме обратной связи на  PHPMailer

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

Когда меня просят подключить форму сбора заявок или форму обратной связи я использую готовые скрипты 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 .


Поделиться:

68 09.01.24