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

Автор: Артем Ершов | Опубликовано: 15.12.2025

Динамические формы — это отличный способ улучшить взаимодействие пользователей с вашим сайтом на WordPress. Такие формы позволяют отправлять данные без перезагрузки страницы, что делает процесс заполнения и отправки более удобным и быстрым. В этой статье мы подробно разберём, как создать динамические формы с помощью AJAX, рассмотрим примеры кода и рекомендации по плагинам, которые помогут реализовать подобный функционал.

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

Традиционные формы в WordPress отправляют данные методом POST или GET, что приводит к перезагрузке страницы после отправки. Это не всегда удобно, особенно если форма находится в футере или в боковой панели сайта. Использование AJAX позволяет избежать перезагрузки, обновляя только нужную часть страницы.

Преимущества AJAX-форм:

Улучшенный пользовательский опыт — нет перезагрузки страницы;
Мгновенная валидация и отображение ошибок;
Возможность динамически подгружать данные (например, списки, варианты выбора);
Повышение скорости работы сайта и снижения нагрузки на сервер.

Основы работы с AJAX в WordPress

WordPress предоставляет специальные хуки и механизмы для обработки AJAX-запросов. Для начала создадим простой пример динамической формы с полем ввода и кнопкой отправки.

Регистрация обработчиков AJAX

В functions.php вашей темы или в отдельном плагине пропишем обработчики:

add_action('wp_ajax_yelly_handle_form', 'yelly_handle_form_callback');
add_action('wp_ajax_nopriv_yelly_handle_form', 'yelly_handle_form_callback');

function yelly_handle_form_callback() {
    // Проверяем nonce для безопасности
    check_ajax_referer('yelly_form_nonce', 'security');

    $name = sanitize_text_field($_POST['name']);
    if(empty($name)) {
        wp_send_json_error(['message' => 'Имя не может быть пустым']);
    }

    // Логика обработки данных, например, сохранить в базу, отправить письмо

    wp_send_json_success(['message' => 'Спасибо, ' . $name . '! Ваша форма отправлена.']);
    wp_die();
}

Создание формы и подключение скрипта

Добавим форму в шаблон или через шорткод:

function yelly_render_form() {
    ob_start();
    ?>
    <form id="yelly-form">
        <label for="yelly-name">Имя:</label>
        <input type="text" id="yelly-name" name="name" />
        <input type="hidden" name="action" value="yelly_handle_form" />
        <?php wp_nonce_field('yelly_form_nonce', 'security'); ?>
        <button type="submit">Отправить</button>
    </form>
    <div id="yelly-response"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('yelly_form', 'yelly_render_form');

Далее подключим JS для AJAX-запроса:

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

В файле js/yelly-ajax.js:

jQuery(document).ready(function($){
    $('#yelly-form').on('submit', function(e){
        e.preventDefault();

        var data = {
            action: 'yelly_handle_form',
            security: yelly_ajax_obj.nonce,
            name: $('#yelly-name').val()
        };

        $.post(yelly_ajax_obj.ajax_url, data, function(response){
            if(response.success) {
                $('#yelly-response').html('<p style="color:green;">' + response.data.message + '</p>');
                $('#yelly-form')[0].reset();
            } else {
                $('#yelly-response').html('<p style="color:red;">' + response.data.message + '</p>');
            }
        });
    });
});

Использование плагинов для создания динамических форм

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

Contact Form 7 с плагином AJAX

Contact Form 7 — очень популярный бесплатный плагин для создания форм. По умолчанию он поддерживает AJAX отправку. Для улучшения UX можно использовать дополнительные расширения, например WPGPT для интеллектуальной обработки данных.

Плагин Quizle для интерактивных форм

Quizle — плагин из WPShop, который позволяет создавать квизы и интерактивные формы с динамической логикой. Его можно использовать для создания опросов, анкет и тестов с мгновенной обратной связью без перезагрузки страницы.

Советы по безопасности и оптимизации AJAX-форм

При использовании AJAX важно учитывать безопасность и производительность:

Используйте wp_nonce_field и проверяйте nonce в обработчике, чтобы защититься от CSRF;
Санитизируйте и валидируйте все входные данные, даже если они отправлены через AJAX;
Обрабатывайте ошибки и возвращайте понятные сообщения пользователю;
Кешируйте тяжелые запросы и оптимизируйте код для снижения нагрузки на сервер;
Тестируйте формы на разных устройствах и браузерах.

Расширенные примеры: динамическое подгружение данных в форму

Допустим, нужно создать форму с динамическим списком городов, который зависит от выбранной страны. Для этого добавим в форму два селекта:

<select id="yelly-country" name="country">
  <option value="">Выберите страну</option>
  <option value="ru">Россия</option>
  <option value="us">США</option>
</select>

<select id="yelly-city" name="city">
  <option value="">Выберите город</option>
</select>

Создадим AJAX-обработчик, который вернёт список городов в зависимости от страны:

add_action('wp_ajax_yelly_get_cities', 'yelly_get_cities_callback');
add_action('wp_ajax_nopriv_yelly_get_cities', 'yelly_get_cities_callback');

function yelly_get_cities_callback() {
    check_ajax_referer('yelly_form_nonce', 'security');

    $country = sanitize_text_field($_POST['country']);
    $cities = [];
    if ($country === 'ru') {
        $cities = ['Москва', 'Санкт-Петербург', 'Новосибирск'];
    } elseif ($country === 'us') {
        $cities = ['New York', 'Los Angeles', 'Chicago'];
    }

    wp_send_json_success($cities);
    wp_die();
}

В JS добавим обработчик изменения страны и подгрузку городов:

$('#yelly-country').on('change', function() {
    var country = $(this).val();
    if (!country) {
        $('#yelly-city').html('<option value="">Выберите город</option>');
        return;
    }

    $.post(yelly_ajax_obj.ajax_url, {
        action: 'yelly_get_cities',
        security: yelly_ajax_obj.nonce,
        country: country
    }, function(response){
        if(response.success) {
            var options = '<option value="">Выберите город</option>';
            response.data.forEach(function(city) {
                options += '<option value="' + city + '">' + city + '</option>';
            });
            $('#yelly-city').html(options);
        }
    });
});

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

Вывод

Динамические формы с AJAX — это мощный инструмент, который позволяет улучшить интерфейс вашего сайта на WordPress без использования громоздких плагинов. При правильной реализации вы сможете создавать удобные и безопасные формы, которые быстро откликаются на действия пользователя. Для быстрого старта можно использовать готовые решения из WPShop, такие как Quizle или WPGPT, а для индивидуальных задач — писать собственные обработчики, как показано в примерах выше.