Для каптчи буду использовать модальное окно от fancybox так как выпущена более новая версия с ней приятней работать но она требует jquery3.
Итак шаги очень простые
Устанавливаем библиотеки
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
ставим ссылку
<a class="fancybox" data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">AJAX content</a>
Вешаем событие
<script>
$("a.fancybox").fancybox();
</script>
Теперь при нажатии на ссылку в модальном окне откроется окно с формой или текстом
Следующим шагом подключаем recaptcha. Допустим что ссылка будет на contact.tpl, тогда в этом файле следующий код:
<script>
var onloadCallback = function() {
grecaptcha.render('RecaptchaField1', {
'sitekey' : 'секретный ключ'
});
};
</script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<form method="post" id="callback">
<div id="RecaptchaField1"></div>
<button class="click">Отправим</button>
</form>
<script type="text/javascript">
$('#callback').on('submit',function(){
$('.error-form').remove();
$('.click').attr('disabled',true).html('Отправляем..')
$.ajax({
url: 'callback2.php',
type: 'post',
ataType: 'json',
data: $('form#callback').serialize(),
success: function(er){
if(er.error){
//выполняем проверку
$('.click').attr('disabled',false).html('Отправить заявку')}
else{
$('.fancy-callback').html('Ваше сообщение отправлено!')
}
}
})
}
else{
$('.click').attr('disabled',false).html('Отправить заявку')
}
return false;
})
</script>