Бортовой журнал Ктулху

Отправка почтового сообщения с проверкой No Captcha

Форма отправки почтового сообщения с использованием jQuery Ajax и с проверкой на бота. 

 Во-первых, нам нужен API key, так что заходим сюда https://www.google.com/recaptcha/admin. Чтобы получить доступ к этой странице, вы должны быть зарегистрированы в Google. Вам будет предложено зарегистрировать свой сайт, так что дайте ему подходящее имя, затем список доменов (например tutsplus.com), где будет использоваться именно эта reCAPTCHA. Поддомены (например webdesign.tutsplus.com и code.tutsplus.com) автоматичекси учитываются.

Во-вторых, нужно теперь правильно подключить капчу к форме.

<script src='https://www.google.com/recaptcha/api.js'></script> //Вставить перед </head>
<div class="g-recaptcha" data-sitekey="######sitekey#######"></div> // всавить в форму перед Submit (см. дальше в примере)

 

PHP обработчик формы

В нем самое интересное - это ответ false/true, на основании которого строится проверка на бота. Если от капчи не передается POST с переменной, возвращается false.

В этом скрипте не сделана валидация на сервере капчи.

К счастью, команда разработчиков Google сделала тяжелую работу за нас, так что перейдем к проекту ReCAPTCHA на Github и возьмем копию материала recaptchalib.php. Поместите его в корневом каталоге вашего проекта и затем ссылайтесь на него в верхней части файла index.php

// какая-то почтовая логика
if(isset($_POST['name']) != '' && !empty($_POST['capcha'])) 
{
// какая-то валидация
$name = substr(htmlspecialchars(trim($_POST['name'])), 0, 1000);
 $phone = substr(htmlspecialchars(trim($_POST['phone'])), 0, 1000);
 $email = substr(htmlspecialchars(trim($_POST['email'])), 0, 1000);
 $message = substr(htmlspecialchars(trim($_POST['message'])), 0, 10000);
 $mail = 'admin_email'; // переменная с адресом отправителя
 $capcha = substr(htmlspecialchars(trim($_POST['capcha'])), 0, 10000);
// отправка письма
$site = get_site_url(); // переменная, содержащая URL сайта
 $mail_by = 'email_here'; // указать почтовый адрес получателя
$feadback = mail("$m", 
 "Mail from $site", 
 "Name: $name;\n 
 Phone: $phone;\n 
 Email: $email;\n 
 Message: $message;\n", 
 'From: оправитель' . "\r\n" .
 'Reply-To: отправитель' . "\r\n" .
 'X-Mailer: PHP/' . phpversion(). "\r\n" .
 "Content-type:text/plain; charset = utf-8\r\n");
// возвращаем в случае успешной валидации  и отправки
echo json_encode(array(
 'success' => true,
 ));
 exit();
}
{
 echo json_encode(array(
 'success' => false,
 )); 
 exit();
}

Форма

Стоит обратить внимание на переменную sitekey.

<div class="formMail">
 <div id="success" class="message_send d_none">thank you <br /> message has been sent</div>
 <div id="check" class="message_send d_none"><span style="color:red">Check <br /> the captcha, please</span></div>
 <form action="" enctype="text/plain" method="post" id="_form">
 <input type="text" name="name" class="name" placeholder="NAME" required="">
 <input type="text" name="phone" class="phone" placeholder="PHONE NUMBER" required="">
 <input type="text" name="email" class="email" placeholder="E-MAIL" required="">
 <textarea placeholder="MESSAGE" name="message" class="message" required=""></textarea>
 <div class="g-recaptcha" data-sitekey="######sitekey#######"></div>
 <input type="submit" name="send_message" class="send_message" value="SEND MESSAGE">
 </form>
</div>

JS скрипт с валидацией полей.

jQuery(document).ready(function() {
 jQuery('.send_message').click(function() {
 
 var name = jQuery('.name').val();
 var reg_ex_n = (/^[^-\s0-9`~!@#№$%^&;*()_=+\\|\[\]{};:',.<>\/?]+$/g);
 
 var phone = jQuery('.phone').val();
 
 var email = jQuery('.email').val();
 var reg_ex_e = (/.+@.+\..+/g);
 
 var validation = jQuery('.g-recaptcha-response').val();
var mails = [];
 jQuery('.con_block .contacts_email').each(function() {
 var mail = jQuery(this).find('a').text();
 mails.push(mail);
 })
 
 var message = jQuery('.message').val();
 if(name.length>=3){
 if(reg_ex_e.test(email) && email.length>=3){
 if(phone.length>=3){
 if(message.length>=3){
jQuery.ajax({
type: 'POST',
 url: '/wp-content/themes/Circlevisionsagent/mail.php',
 data: 'name='+name+'&phone='+phone+'&email='+email+'&message='+message+'&mails='+mails+'&capcha='+validation+'',
 success: function(data){
 var json_x = jQuery.parseJSON(data);
 console.log(json_x.success);
 if(json_x.success === true) {
 jQuery('#success').removeClass('d_none');
 jQuery('#check').addClass('d_none');
 jQuery('form#_form').remove();
 }
 if(json_x.success === false) {
 jQuery('#check').removeClass('d_none');
 // jQuery('#success').remove('form#_form');
}
// jQuery('.result').html(data);
 }
 });
 } else {
 jQuery('input').removeClass('border_error');
 jQuery('.message').addClass('border_error');
 }
 } else {
 jQuery('input').removeClass('border_error');
 jQuery('.phone').addClass('border_error');
 }
 }else { 
 jQuery('input').removeClass('border_error');
 jQuery('.email').addClass('border_error');
 } 
 }else {
 jQuery('input').removeClass('border_error');
 jQuery('.name').addClass('border_error');
 }
 return false;
 }) 
})

Развернутая статья по интеграции капчи в форму

http://webdesign.tutsplus.com/ru/tutorials/how-to-integrate-no-captcha-recaptcha-in-your-website--cms-23024