Как создать динамичные формы в WordPress с помощью Akismet и AJAX

Автор: Олеся Романова | Опубликовано: 25.11.2025

Формы обратной связи и сбора данных — важный элемент любого сайта на WordPress. Но как сделать их не только удобными для пользователей, но и защищёнными от спама, а также быстрыми, без перезагрузки страницы? В этой статье мы подробно разберём, как создать динамичные формы с использованием AJAX и интеграцией с популярным антивоспам-плагином Akismet.

Почему стоит использовать AJAX и Akismet для форм в WordPress

AJAX позволяет отправлять данные форм на сервер без перезагрузки страницы, что улучшает пользовательский опыт — форма отправляется мгновенно, и пользователю не приходится ждать обновления всей страницы. Akismet — это мощный антивоспам-модуль, который помогает отфильтровывать нежелательные сообщения и комментарии. Интегрировав Akismet в формы, мы повысим качество собираемых данных и снизим количество мусорных отправок.

Вместе AJAX и Akismet делают форму не только удобной, но и надёжной с точки зрения безопасности и качества данных.

Создание формы и добавление HTML-разметки

Начнём с простой формы, которую мы разместим на сайте через шорткод. В файле functions.php вашей темы или в отдельном плагине добавим код для создания шорткода:

function wppartner_create_contact_form() {
    ob_start();
    ?>
    <form id="wppartner-contact-form" method="post">
        <p><label for="wppartner-name">Имя:</label><br>
        <input type="text" id="wppartner-name" name="name" required></p>
        <p><label for="wppartner-email">Email:</label><br>
        <input type="email" id="wppartner-email" name="email" required></p>
        <p><label for="wppartner-message">Сообщение:</label><br>
        <textarea id="wppartner-message" name="message" rows="5" required></textarea></p>
        <p><input type="submit" value="Отправить"></p>
        <div id="wppartner-form-response"></div>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wppartner_contact_form', 'wppartner_create_contact_form');

Этот шорткод [wppartner_contact_form] можно вставлять в любые записи или страницы, и форма отобразится.

Подключение AJAX: отправка и обработка данных без перезагрузки

Чтобы форма отправлялась без перезагрузки страницы, добавим JavaScript, который перехватывает событие отправки:

function wppartner_enqueue_scripts() {
    wp_enqueue_script('wppartner-ajax-script', get_template_directory_uri() . '/js/wppartner-ajax.js', ['jquery'], null, true);
    wp_localize_script('wppartner-ajax-script', 'wppartner_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppartner_ajax_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wppartner_enqueue_scripts');

В файле js/wppartner-ajax.js пишем:

jQuery(document).ready(function($) {
    $('#wppartner-contact-form').on('submit', function(e) {
        e.preventDefault();
        var data = {
            action: 'wppartner_handle_form',
            nonce: wppartner_ajax_obj.nonce,
            name: $('#wppartner-name').val(),
            email: $('#wppartner-email').val(),
            message: $('#wppartner-message').val()
        };
        $.post(wppartner_ajax_obj.ajax_url, data, function(response) {
            $('#wppartner-form-response').html(response.data.message);
            if (response.success) {
                $('#wppartner-contact-form')[0].reset();
            }
        });
    });
});

Обработка формы и интеграция с Akismet

Теперь создадим PHP-функцию, которая будет получать данные, проверять их и отправлять по почте или сохранять:

function wppartner_handle_form() {
    check_ajax_referer('wppartner_ajax_nonce', 'nonce');

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    if (empty($name) || empty($email) || empty($message)) {
        wp_send_json_error(['message' => 'Пожалуйста, заполните все поля.']);
    }

    // Интеграция с Akismet
    if (class_exists('Akismet')) {
        $akismet = new Akismet();
        $is_spam = $akismet->is_spam([
            'comment_author' => $name,
            'comment_author_email' => $email,
            'comment_content' => $message,
            'user_ip' => $_SERVER['REMOTE_ADDR'],
            'user_agent' => $_SERVER['HTTP_USER_AGENT'],
            'referrer' => $_SERVER['HTTP_REFERER'],
        ]);
        if ($is_spam) {
            wp_send_json_error(['message' => 'Обнаружен спам.']);
        }
    }

    $to = get_option('admin_email');
    $subject = 'Новое сообщение с сайта';
    $headers = ['Content-Type: text/html; charset=UTF-8', 'From: ' . $name . ' <' . $email . '>'];
    $body = "<strong>Имя:</strong> $name<br><strong>Email:</strong> $email<br><strong>Сообщение:</strong><br>" . nl2br($message);

    $sent = wp_mail($to, $subject, $body, $headers);

    if ($sent) {
        wp_send_json_success(['message' => 'Спасибо за сообщение! Мы скоро свяжемся с вами.']);
    } else {
        wp_send_json_error(['message' => 'Ошибка при отправке сообщения. Попробуйте позже.']);
    }
}
add_action('wp_ajax_wppartner_handle_form', 'wppartner_handle_form');
add_action('wp_ajax_nopriv_wppartner_handle_form', 'wppartner_handle_form');

Обратите внимание, что для работы Akismet надо, чтобы плагин был установлен и активирован. В примере используется встроенный класс Akismet, доступный в официальном плагине. Если у вас другая версия, возможно, придётся адаптировать вызов.

Пояснения по интеграции с Akismet

Akismet оценивает комментарии и формы на предмет спама. Для проверки мы передаём ключевые данные: имя, email, содержимое сообщения, IP пользователя, user-agent и реферер. Если Akismet возвращает, что это спам, мы прекращаем обработку и уведомляем пользователя.

Дополнительные советы по улучшению безопасности и UX формы

1. Добавьте CAPTCHA, например Google reCAPTCHA, чтобы дополнительно защитить форму от роботов.

2. Используйте nonce (как мы сделали) для защиты от CSRF-атак.

3. Добавьте индикаторы загрузки и сообщения об ошибках прямо в интерфейс, чтобы пользователь понимал статус отправки.

4. Логируйте отправленные сообщения в базу данных для мониторинга.

Пример добавления reCAPTCHA v3

Для интеграции Google reCAPTCHA v3 сначала зарегистрируйтесь на сайте Google и получите ключи. Затем подключите скрипт в вашу форму:

<script src="https://www.google.com/recaptcha/api.js?render=ваш_ключ"></script>
<script>
greCAPTCHA.ready(function() {
    grecaptcha.execute('ваш_ключ', {action: 'submit'}).then(function(token) {
        document.getElementById('wppartner-contact-form').insertAdjacentHTML('beforeend',
            '<input type="hidden" name="recaptcha_token" value="' + token + '">');
    });
});
</script>

И в PHP-обработчике сделайте проверку токена на сервере, отправляя запрос к API Google.

Выводы по созданию динамичных форм с Akismet и AJAX

Использование AJAX значительно улучшает UX, позволяя отправлять формы без перезагрузки. Интеграция с Akismet обеспечивает фильтрацию спама, что особенно важно для открытых форм на сайте. Дополнительные меры, такие как reCAPTCHA и nonce, делают форму максимально надёжной и безопасной. Такой подход подойдёт для любых проектов на WordPress, где важна быстрая и защищённая коммуникация с посетителями.