Для того чтобы прикрепить Invisible reCaptcha к AjaxForm и FormIt в MODX, вам понадобится выполнить несколько шагов:
1. Установите пакет Invisible reCaptcha через MODX Package Manager или скачайте его с официального сайта reCAPTCHA.
2. Создайте ключи reCAPTCHA. Для этого перейдите на сайт reCAPTCHA и зарегистрируйте новый проект. Вы получите публичный и приватный ключи.
3. В вашем шаблоне, где находится форма, добавьте следующий код перед закрывающим тегом </head>
:
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script> <script> var onSubmit = function(token) { document.getElementById('my-form').submit(); }; var onloadCallback = function() { grecaptcha.render('my-recaptcha', { 'sitekey' : 'YOUR_SITE_KEY', 'callback' : onSubmit }); }; </script>
Здесь YOUR_SITE_KEY
должен быть заменен на ваш публичный ключ reCAPTCHA.
4. В настройках формы создайте скрытое поле для хранения значения reCAPTCHA. Например:
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
5. В вашем Ajax-обработчике (например, в snippet с AjaxForm), добавьте проверку reCAPTCHA перед обработкой данных формы. Например:
$captchaResponse = $_POST['g-recaptcha-response']; $captchaSecret = 'YOUR_SECRET_KEY'; // Замените на ваш приватный ключ reCAPTCHA $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify'); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([ 'secret' => $captchaSecret, 'response' => $captchaResponse ])); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $response = json_decode(curl_exec($ch), true); curl_close($ch); if (!$response['success']) { // Обработка ошибки reCAPTCHA return 'reCAPTCHA verification failed'; } // Ваш код обработки данных формы
Здесь YOUR_SECRET_KEY
должен быть заменен на ваш приватный ключ reCAPTCHA.
6. В настройках AjaxForm укажите, что вы хотите использовать Ajax, и добавьте dataType: 'json'
:
$('#my-form').ajaxForm({ dataType: 'json', success: function(response) { if (response.success) { // Успешно отправлено } else { // Ошибка отправки формы } } });
Теперь ваша форма будет содержать Invisible reCAPTCHA, и при каждой отправке формы будет производиться проверка пользователя на бота. Если проверка пройдет успешно, данные формы будут отправлены на сервер для дальнейшей обработки.