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

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

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

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

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

Обзор популярных плагинов для динамических форм с AJAX

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

• Contact Form 7 — с добавлением расширений, например, Contact Form 7 - Dynamic Text Extension, можно реализовать динамические элементы.
• Gravity Forms — мощный конструктор форм с поддержкой AJAX и логики условий.
• Ninja Forms — удобный плагин с возможностью AJAX отправки и динамических полей.
• My Popup — если нужно показывать формы в всплывающих окнах с динамическим контентом.

Однако если нужно уникальное поведение или интеграция с кастомной логикой, лучше создать форму самостоятельно с AJAX.

Создание простой динамической формы с AJAX на WordPress: пример кода

1. Подключение скриптов AJAX в теме или плагине

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

function wplike_enqueue_scripts() {
    wp_enqueue_script('wplike-ajax-form', get_template_directory_uri() . '/js/wplike-ajax-form.js', array('jquery'), null, true);
    wp_localize_script('wplike-ajax-form', 'wplike_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wplike_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wplike_enqueue_scripts');

Этот код подключит скрипт и передаст ему URL для AJAX-запросов и nonce для безопасности.

2. HTML-код формы

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

<form id="wplike-ajax-form">
    <label for="wplike_name">Имя:</label>
    <input type="text" id="wplike_name" name="name" required>

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

    <button type="submit">Отправить</button>
    <div id="wplike-form-message"></div>
</form>

3. JavaScript для отправки формы через AJAX

Создайте файл js/wplike-ajax-form.js в вашей теме и добавьте:

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

        var data = {
            action: 'wplike_ajax_form_submit',
            nonce: wplike_ajax_obj.nonce,
            name: $('#wplike_name').val(),
            email: $('#wplike_email').val()
        };

        $.post(wplike_ajax_obj.ajax_url, data, function(response) {
            $('#wplike-form-message').html(response.data.message);
            if(response.success) {
                $('#wplike-ajax-form')[0].reset();
            }
        });
    });
});

4. Обработка запроса на сервере

Теперь добавим обработчик в functions.php:

function wplike_ajax_form_submit() {
    check_ajax_referer('wplike_nonce', 'nonce');

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

    if(empty($name) || empty($email) || !is_email($email)) {
        wp_send_json_error(array('message' => 'Пожалуйста, заполните форму корректно.'));
    }

    // Здесь можно добавить обработку: сохранить данные, отправить письмо и т.д.
    // Например, отправим письмо администратору:
    $to = get_option('admin_email');
    $subject = 'Новая заявка с сайта';
    $body = "Имя: $name\nEmail: $email";
    $headers = array('Content-Type: text/plain; charset=UTF-8');

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

    wp_send_json_success(array('message' => 'Спасибо! Ваша заявка отправлена.'));
}
add_action('wp_ajax_wplike_ajax_form_submit', 'wplike_ajax_form_submit');
add_action('wp_ajax_nopriv_wplike_ajax_form_submit', 'wplike_ajax_form_submit');

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

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

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

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

Полезные советы и рекомендации

• Используйте wp_localize_script для передачи переменных из PHP в JS — это стандартный и безопасный способ.
• Обязательно проверяйте nonce и валидируйте данные на сервере — это защитит сайт от CSRF и некорректных данных.
• Для улучшения UX показывайте пользователю информативные сообщения об ошибках и успехе.
• Если планируете сохранять данные в базу, используйте функции WordPress для работы с БД — например, wp_insert_post или класс $wpdb.
• Для сложных форм подумайте о кешировании и оптимизации, чтобы не нагружать сервер лишними запросами.

Создавая динамические формы с AJAX в WordPress, вы значительно улучшаете опыт пользователей и расширяете возможности сайта. Приведённый пример — основа, на базе которой можно строить любые решения под свои задачи.