Как создать многоуровневую форму в WordPress с AJAX

Что такое многоуровневая форма и зачем она нужна

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

Пример использования: клиент выбирает тип услуги на первом шаге, затем в зависимости от выбора появляются дополнительные поля для уточнения параметров. Реализация такой логики с помощью обычной HTML-формы приводит к перезагрузке страницы, что неудобно. Здесь на помощь приходит AJAX — асинхронный обмен данными с сервером без перезагрузки.

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

Выбор плагина для работы с формами и AJAX в WordPress

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

• Gravity Forms — мощный коммерческий плагин с поддержкой условной логики и AJAX-подгрузки шагов.
• Ninja Forms — бесплатный и расширяемый плагин с модулями для многошаговых форм.
• WPForms — интуитивный конструктор форм с функцией многоэтапных форм и AJAX.

Эти плагины позволяют создавать формы визуально, но иногда нужна кастомизация, которую проще реализовать через код.

Создание многоуровневой формы с AJAX на собственном коде

Мы рассмотрим пример создания простой многоуровневой формы с двумя шагами. Первый шаг — выбор категории, второй — отображение полей, зависящих от выбора.

1. Регистрация скриптов и подготовка AJAX

Добавляем в functions.php темы или в плагин регистрацию и подключение JavaScript с передачей параметров для AJAX:

add_action('wp_enqueue_scripts', 'wpcalc_enqueue_scripts');
function wpcalc_enqueue_scripts() {
    wp_enqueue_script('wpcalc-multistep', get_template_directory_uri() . '/js/wpcalc-multistep.js', ['jquery'], '1.0', true);
    wp_localize_script('wpcalc-multistep', 'wpcalc_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpcalc_nonce')
    ]);
}

2. HTML-разметка формы

В шаблоне выводим базовую форму с первым шагом:

<form id="wpcalc-multistep-form">
  <div id="step-1" class="step">
    <label>Выберите категорию:</label>
    <select name="category" id="category" required>
      <option value="">-- Выберите --</option>
      <option value="web">Веб-разработка</option>
      <option value="design">Дизайн</option>
    </select>
    <button type="button" id="to-step-2">Далее</button>
  </div>
  <div id="step-2" class="step" style="display:none;">
    <div id="step-2-content"></div>
    <button type="button" id="back-to-step-1">Назад</button>
    <button type="submit">Отправить</button>
  </div>
</form>

3. JavaScript для переключения шагов и AJAX-запроса

Создаём файл wpcalc-multistep.js в папке js темы:

jQuery(document).ready(function($) {
  $('#to-step-2').on('click', function() {
    var category = $('#category').val();
    if (!category) {
      alert('Пожалуйста, выберите категорию.');
      return;
    }
    $.ajax({
      url: wpcalc_ajax_obj.ajax_url,
      method: 'POST',
      data: {
        action: 'wpcalc_load_step_2',
        nonce: wpcalc_ajax_obj.nonce,
        category: category
      },
      success: function(response) {
        if(response.success) {
          $('#step-2-content').html(response.data.html);
          $('#step-1').hide();
          $('#step-2').show();
        } else {
          alert('Ошибка загрузки данных.');
        }
      }
    });
  });

  $('#back-to-step-1').on('click', function() {
    $('#step-2').hide();
    $('#step-1').show();
  });

  $('#wpcalc-multistep-form').on('submit', function(e) {
    e.preventDefault();
    alert('Форма отправлена!');
    // Здесь можно добавить отправку данных на сервер
  });
});

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

В functions.php добавляем обработчик:

add_action('wp_ajax_wpcalc_load_step_2', 'wpcalc_load_step_2_callback');
add_action('wp_ajax_nopriv_wpcalc_load_step_2', 'wpcalc_load_step_2_callback');
function wpcalc_load_step_2_callback() {
    check_ajax_referer('wpcalc_nonce', 'nonce');
    $category = sanitize_text_field($_POST['category']);

    $html = '';
    switch ($category) {
        case 'web':
            $html = '<label>Выберите CMS:</label><select name="cms" required&gt'
                  . '<option value="wordpress">WordPress</option>'
                  . '<option value="joomla">Joomla</option>'
                  . '</select>';
            break;
        case 'design':
            $html = '<label>Выберите стиль дизайна:</label><select name="style" required&gt'
                  . '<option value="minimal">Минимализм</option>'
                  . '<option value="flat">Плоский дизайн</option>'
                  . '</select>';
            break;
        default:
            wp_send_json_error();
            break;
    }

    wp_send_json_success(['html' => $html]);
}

Расширение функционала: валидация и сохранение данных

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

Вот пример валидации в PHP:

function wpcalc_validate_form_data($data) {
    $errors = [];
    if (empty($data['category'])) {
        $errors[] = 'Категория не выбрана';
    }
    if ($data['category'] === 'web' && empty($data['cms'])) {
        $errors[] = 'CMS не выбрана';
    }
    if ($data['category'] === 'design' && empty($data['style'])) {
        $errors[] = 'Стиль дизайна не выбран';
    }
    return $errors;
}

После проверки можно сохранить данные с помощью функций WordPress, например, wp_insert_post или update_user_meta, зависит от задачи.

Советы по улучшению UX многоуровневых форм в WordPress

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

• Визуально выделяйте текущий шаг. Добавьте прогресс-бар или нумерацию шагов.
• Используйте анимации для плавного перехода между шагами. Это улучшит восприятие.
• Обрабатывайте ошибки сразу. Показывайте сообщения рядом с полями, чтобы пользователь мог сразу исправить.
• Позволяйте возвращаться к предыдущим шагам. Иногда нужно изменить ответ без потери введённых данных.

Для этих целей можно использовать расширенные возможности JavaScript и CSS или подключать готовые библиотеки.

Заключение

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

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