Форма отправки почтового сообщения с использованием 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