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

Автор: Валерия Новикова | Опубликовано: 31.12.2025

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

Что такое AJAX и зачем использовать его в формах WordPress

AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая обмениваться данными с сервером без перезагрузки страницы. Применение AJAX в формах помогает:

Обработать данные без перезагрузки;
Сделать интерфейс более отзывчивым и современным;
Избежать потери введённых пользователем данных;
Повысить скорость взаимодействия пользователя с сайтом.

В WordPress есть встроенная поддержка AJAX-запросов, что облегчает реализацию таких функций.

Подготовка к созданию динамической формы на AJAX

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

Основные шаги:

Создание формы в шаблоне или через шорткод;
Добавление JavaScript для перехвата отправки формы и отправки AJAX-запроса;
Создание PHP-обработчика AJAX-запроса в functions.php или плагине;
Вывод результата пользователю.

Создание формы и JavaScript для AJAX

Добавим форму и скрипт в файл шаблона или создадим шорткод:

function wpdo_ajax_form_shortcode() {
    ob_start();
    ?>
    <form id="wpdo-ajax-form" method="post">
        <label for="wpdo_name">Имя:</label>
        <input type="text" id="wpdo_name" name="name" required>

        <label for="wpdo_email">Email:</label>
        <input type="email" id="wpdo_email" name="email" required>

        <input type="submit" value="Отправить">
    </form>
    <div id="wpdo-form-response"></div>

    <script type="text/javascript">
    (function($) {
        $('#wpdo-ajax-form').on('submit', function(e) {
            e.preventDefault();
            var data = {
                action: 'wpdo_submit_form',
                name: $('#wpdo_name').val(),
                email: $('#wpdo_email').val(),
                security: wpdo_ajax_object.nonce
            };
            $.post(wpdo_ajax_object.ajax_url, data, function(response) {
                $('#wpdo-form-response').html(response.data);
            });
        });
    })(jQuery);
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpdo_ajax_form', 'wpdo_ajax_form_shortcode');

Обратите внимание, что для использования AJAX в WordPress нужно передать в JavaScript объект с ajax_url и nonce. Сделаем это через локализацию скрипта ниже.

Подключение JavaScript и локализация параметров

Добавим в functions.php регистрацию и подключение скрипта, а также локализацию переменных:

function wpdo_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_register_script('wpdo-ajax-script', '', [], false, true);
    wp_enqueue_script('wpdo-ajax-script');

    wp_localize_script('wpdo-ajax-script', 'wpdo_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpdo_ajax_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wpdo_enqueue_scripts');

Создание PHP-обработчика AJAX-запроса

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

function wpdo_handle_ajax_form() {
    check_ajax_referer('wpdo_ajax_nonce', 'security');

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

    if (empty($name) || empty($email)) {
        wp_send_json_error('Пожалуйста, заполните все поля.');
    }
    if (!is_email($email)) {
        wp_send_json_error('Введите корректный email.');
    }

    // Здесь можно добавить логику сохранения данных или отправки письма
    // Например, отправка письма
    $subject = 'Новая заявка с сайта';
    $message = "Имя: $name\nEmail: $email";
    wp_mail(get_option('admin_email'), $subject, $message);

    wp_send_json_success('Спасибо за заявку, мы свяжемся с вами!');
}
add_action('wp_ajax_wpdo_submit_form', 'wpdo_handle_ajax_form');
add_action('wp_ajax_nopriv_wpdo_submit_form', 'wpdo_handle_ajax_form');

Тестирование и отладка динамической формы

После добавления кода на сайт используйте шорткод [wpdo_ajax_form] в любой записи или странице, чтобы вывести форму. При отправке данных без перезагрузки страницы должна появиться соответствующая реакция сервера.

Если форма не работает, проверьте:

Подключение jQuery и локализацию скрипта;
Правильность AJAX URL;
Работу nonce (проверку безопасности);
Консоль браузера на наличие ошибок JavaScript;
Логи сервера и ошибок PHP.

Использование плагинов для упрощения AJAX-форм

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

WPRemark — для расширенного управления комментариями с AJAX;
Contact Form 7 с дополнением Ajaxify CF7 — для AJAX-отправки форм;
Gravity Forms с встроенной поддержкой AJAX.

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

Расширение функционала динамической формы

Динамическая форма на AJAX может быть расширена:

Добавлением валидации на стороне клиента с помощью JavaScript;
Использованием JSON-ответов для обновления UI более гибко;
Интеграцией с REST API WordPress или сторонними сервисами;
Добавлением элементов, загружающихся динамически (например, выпадающих списков с данными из базы).

Вот пример расширенного ответа с JSON и обработкой ошибок:

$.post(wpdo_ajax_object.ajax_url, data, function(response) {
    if(response.success) {
        $('#wpdo-form-response').html(response.data);
        $('#wpdo-ajax-form')[0].reset();
    } else {
        $('#wpdo-form-response').html('<span style="color:red;">' + response.data + '</span>');
    }
});