Как добавить поддержку reCAPTCHA в popup WordPress для защиты от спама

Диагностика проблемы: почему reCAPTCHA важна для popup форм

Всплывающие окна с формами обратной связи, подписки или регистрации часто становятся мишенью для спам-ботов. Без защиты формы могут быть забиты автоматическими сообщениями, что снижает качество лидов и увеличивает нагрузку на сервер. Добавление Google reCAPTCHA в popup — эффективный способ отфильтровать ботов.

Выбор типа reCAPTCHA и подготовка ключей

Google предлагает несколько видов reCAPTCHA: v2 (классическая с галочкой «Я не робот»), Invisible reCAPTCHA и reCAPTCHA v3 (оценка риска без взаимодействия пользователя). Для popup лучше использовать Invisible reCAPTCHA или v2, чтобы не ухудшать UX.

1. Перейдите на панель управления reCAPTCHA и зарегистрируйте ваш домен.
2. Получите site key и secret key для выбранного типа reCAPTCHA.

Пошаговое решение: интеграция reCAPTCHA в popup форму WordPress

1. Подключение скрипта reCAPTCHA

function enqueue_recaptcha_script() {
    wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_recaptcha_script');

Этот код подключит необходимый JavaScript reCAPTCHA на всех страницах.

2. Добавление reCAPTCHA в HTML формы popup

В разметку вашей popup формы добавьте следующий блок (на примере Invisible reCAPTCHA):

<form id="popup-contact-form" method="post" action="">
    <!-- ваши поля формы -->
    <button class="g-recaptcha" 
            data-sitekey="ВАШ_SITE_KEY" 
            data-callback="onSubmit" 
            data-action="submit">Отправить</button>
</form>

<script>
function onSubmit(token) {
    document.getElementById('popup-contact-form').submit();
}
</script>

3. Валидация reCAPTCHA на сервере (functions.php или плагин)

function verify_recaptcha_response($token) {
    $secret = 'ВАШ_SECRET_KEY';
    $response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', [
        'body' => [
            'secret' => $secret,
            'response' => $token
        ]
    ]);

    if (is_wp_error($response)) {
        return false;
    }

    $response_body = wp_remote_retrieve_body($response);
    $result = json_decode($response_body, true);

    return isset($result['success']) && $result['success'] === true;
}

// В обработчике формы
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $token = $_POST['g-recaptcha-response'] ?? '';
    if (!verify_recaptcha_response($token)) {
        wp_die('Ошибка проверки reCAPTCHA. Попробуйте еще раз.');
    }

    // Дальнейшая обработка формы
}

Проверка результата после внедрения

• Откройте страницу с popup формой, убедитесь, что скрипт reCAPTCHA загружается (вкладка Network в DevTools).
• Нажмите кнопку отправки — у Invisible reCAPTCHA должен сработать callback и форма отправится.
• В обработчике формы проверьте, что при отключении или подделке g-recaptcha-response выводится ошибка.
• Можно использовать тестовые ключи Google для проверки, что форма не пропускает ботов без валидного токена.

Частые ошибки и как их исправить

• Не подключен скрипт reCAPTCHA — форма не получает токен, отправка блокируется. Проверьте функцию enqueue_recaptcha_script и вывод в исходном коде страницы.
• Неверные ключи site key или secret key — запросы к API reCAPTCHA возвращают ошибку. Проверьте ключи в панели Google и в коде.
• Отсутствие валидации на сервере — даже с клиентской проверкой боты могут отправлять данные. Валидация обязательна.
• Кэширование страницы с формой — на кэшированной странице может не обновляться скрипт reCAPTCHA. Добавьте исключения или используйте AJAX-подгрузку popup.

Практические советы по безопасности и производительности

• Используйте Invisible reCAPTCHA или reCAPTCHA v3 для минимизации раздражения пользователей.
• Обрабатывайте ошибки валидации корректно, чтобы пользователь видел понятное сообщение.
• Кэшируйте только статику, не кэшируйте страницы с формами или исключайте popup из кэширования.
• Для WooCommerce или популярных плагинов форм ищите готовые интеграции с reCAPTCHA, чтобы избежать ошибок при обновлениях.

Сравнение вариантов интеграции reCAPTCHA в popup WordPress