Как разбить сложный popup на несколько шагов в WordPress с примером кода

Автор: Евгения Ширяева | Опубликовано: 29.01.2026

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

Почему стоит использовать многошаговые popup в WordPress

Многошаговые popup позволяют:

Разбивать длинные формы на логичные блоки, что улучшает UX и повышает конверсию.
Давать пользователю чувство прогресса, показывая, сколько шагов осталось.
Собирать данные поэтапно, что удобно для проверки и валидации.

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

Общая архитектура многошагового popup

Основная идея — внутри одного popup содержать несколько блоков (шагов), которые поочерёдно показываются и скрываются. В конце последнего шага можно отправить все данные на сервер.

Для этого нам понадобятся:

HTML-разметка с контейнерами для каждого шага.
JavaScript для переключения между шагами.
PHP-обработка данных на сервере (если нужна отправка).

Пример структуры HTML

Рассмотрим упрощённый пример:

<div id="wppopup-multistep" class="popup-container" style="display:none;">
  <div class="step step-1">
    <h2>Шаг 1: Введите имя</h2>
    <input type="text" id="wppopup-name" />
    <button id="wppopup-next-1">Далее</button>
  </div>
  <div class="step step-2" style="display:none;">
    <h2>Шаг 2: Введите email</h2>
    <input type="email" id="wppopup-email" />
    <button id="wppopup-prev-2">Назад</button>
    <button id="wppopup-next-2">Далее</button>
  </div>
  <div class="step step-3" style="display:none;">
    <h2>Шаг 3: Подтвердите данные</h2>
    <div id="wppopup-summary"></div>
    <button id="wppopup-prev-3">Назад</button>
    <button id="wppopup-submit">Отправить</button>
  </div>
</div>

JavaScript для управления шагами popup

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

document.addEventListener('DOMContentLoaded', function() {
  const popup = document.getElementById('wppopup-multistep');
  const steps = popup.querySelectorAll('.step');
  let currentStep = 0;

  function showStep(index) {
    steps.forEach((step, i) => {
      step.style.display = (i === index) ? 'block' : 'none';
    });
    currentStep = index;
  }

  // Кнопки Далее
  document.getElementById('wppopup-next-1').addEventListener('click', function() {
    const name = document.getElementById('wppopup-name').value.trim();
    if (!name) {
      alert('Пожалуйста, введите имя');
      return;
    }
    showStep(1);
  });

  document.getElementById('wppopup-next-2').addEventListener('click', function() {
    const email = document.getElementById('wppopup-email').value.trim();
    if (!email || !email.includes('@')) {
      alert('Пожалуйста, введите корректный email');
      return;
    }
    // Заполняем итоговый блок
    const summary = document.getElementById('wppopup-summary');
    summary.innerHTML = `Имя: ${document.getElementById('wppopup-name').value}<br>Email: ${email}`;
    showStep(2);
  });

  // Кнопки Назад
  document.getElementById('wppopup-prev-2').addEventListener('click', function() {
    showStep(0);
  });

  document.getElementById('wppopup-prev-3').addEventListener('click', function() {
    showStep(1);
  });

  // Отправка данных
  document.getElementById('wppopup-submit').addEventListener('click', function() {
    const data = {
      name: document.getElementById('wppopup-name').value,
      email: document.getElementById('wppopup-email').value
    };
    wppopupSendData(data);
  });

  // Показываем первый шаг при открытии popup
  showStep(0);
  popup.style.display = 'block';

  // Функция отправки данных через AJAX
  function wppopupSendData(data) {
    fetch(wppopup_ajax_object.ajax_url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'wppopup_submit',
        nonce: wppopup_ajax_object.nonce,
        data: data
      })
    })
    .then(response => response.json())
    .then(result => {
      if (result.success) {
        alert('Данные успешно отправлены');
        popup.style.display = 'none';
      } else {
        alert('Ошибка при отправке: ' + result.data);
      }
    })
    .catch(() => alert('Ошибка сети'));
  }
});

PHP: обработка AJAX-запроса в WordPress

Для обработки данных на сервере нужно подключить AJAX-обработчик в functions.php или в вашем плагине:

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

add_action('wp_ajax_wppopup_submit', 'wppopup_handle_submit');
add_action('wp_ajax_nopriv_wppopup_submit', 'wppopup_handle_submit');
function wppopup_handle_submit() {
  check_ajax_referer('wppopup_nonce', 'nonce');

  $data = json_decode(file_get_contents('php://input'), true);
  if (empty($data['data']['name']) || empty($data['data']['email'])) {
    wp_send_json_error('Заполните все поля');
  }

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

  if (!is_email($email)) {
    wp_send_json_error('Некорректный email');
  }

  // Здесь можно сохранить данные в базу, отправить письмо и т.д.

  wp_send_json_success();
}

Полезные плагины для кастомизации popup с многошаговым функционалом

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

My Popup — мощный плагин для создания popup с поддержкой кастомного HTML и JavaScript, что позволяет реализовать многошаговые формы.
Quizle — плагин для создания опросов и квизов, который из коробки поддерживает многошаговый интерфейс, может использоваться для интерактивных popup.
Gravity Forms, WPForms и другие формы с интеграцией в popup-плагины (например, Popup Maker) — позволяют создавать многошаговые формы с минимальным кодингом.

Советы по UX и оптимизации многошаговых popup

При создании многошаговых popup важно соблюдать несколько правил:

Не делайте слишком много шагов — 3–5 оптимально.
Добавьте индикатор прогресса, чтобы пользователь видел, сколько осталось.
Валидация должна быть простой и понятной, с подсказками.
Учитывайте мобильные устройства — адаптируйте размеры popup и элементы управления.
Не показывайте popup слишком часто — используйте cookie или localStorage для контроля повторного показа.

Реализация многошагового popup на WordPress — задача вполне посильная, если правильно организовать логику отображения и отправки данных и использовать современные возможности AJAX и REST API. Это улучшит взаимодействие с пользователем и повысит эффективность сбора информации.