Как создать многоэтапную форму в WPForms

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

Зачем использовать многоэтапные формы в WPForms

WPForms — один из самых популярных и удобных конструкторов форм для WordPress. Однако базовый функционал не предусматривает многоэтапные формы «из коробки» в бесплатной версии. Многоэтапность помогает разбить длинные анкеты, опросы или формы обратной связи на несколько секций, что снижает психологический барьер у пользователей.

Преимущества многоэтапных форм:

• Улучшенный UX: пользователи видят меньше полей за один раз.
• Повышение конверсии: меньше отказов от заполнения.
• Возможность логически структурировать вопросы.

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

Способы создания многоэтапной формы в WPForms

1. Использование функции многостраничной формы в WPForms Pro

Премиум-версия WPForms поддерживает многостраничные формы через блоки "Page Break". Это самый простой способ:

• Добавьте поля формы в редакторе WPForms.
• Вставьте блок "Page Break" между логическими разделами.
• Настройте заголовки и описания для каждого шага.

После сохранения форма автоматически отобразится в несколько шагов с кнопками «Далее» и «Назад».

2. Кастомное создание многоэтапной формы в WPForms Lite

Если у вас бесплатная версия WPForms или нужны нестандартные сценарии, можно реализовать многоэтапность с помощью кастомного кода и JavaScript. Рассмотрим пример, как это сделать.

Пример кастомной многоэтапной формы с WPForms и JavaScript

Идея в том, чтобы создать обычную форму с секциями, которые показываются и скрываются динамически. Для этого используем HTML-классы, CSS и jQuery.

Шаг 1: Создайте форму с нужными полями в WPForms.

Шаг 2: В редакторе формы группируйте поля в контейнеры с классом wpforms-step, например через HTML-блок "HTML" или через настройки CSS-классов для полей.

Шаг 3: Добавьте кастомный JavaScript для переключения шагов. Можно добавить этот код в файл темы или через плагин для кастомного JS:

jQuery(document).ready(function($){
  var currentStep = 0;
  var steps = $('.wpforms-step');
  steps.hide();
  steps.eq(currentStep).show();

  function showStep(index) {
    steps.hide();
    steps.eq(index).show();
  }

  // Кнопка Далее
  $('.wpforms-next').click(function(e) {
    e.preventDefault();
    if(currentStep < steps.length - 1) {
      currentStep++;
      showStep(currentStep);
    }
  });

  // Кнопка Назад
  $('.wpforms-prev').click(function(e) {
    e.preventDefault();
    if(currentStep > 0) {
      currentStep--;
      showStep(currentStep);
    }
  });
});

Шаг 4: В форме добавьте кнопки с классами wpforms-next и wpforms-prev для навигации между шагами (через HTML-блок или кастомные кнопки).

Пошаговая инструкция по созданию многоэтапной формы с кастомным кодом

Создание контейнеров для шагов

Для удобства сгруппируйте поля формы в несколько <div class="wpforms-step">. Например:

<div class="wpforms-step">
  <!-- Поля первого шага -->
  <label>Имя:</label>
  <input type="text" name="name" required>
  <button class="wpforms-next">Далее</button>
</div>

<div class="wpforms-step" style="display:none;">
  <!-- Поля второго шага -->
  <label>Email:</label>
  <input type="email" name="email" required>
  <button class="wpforms-prev">Назад</button>
  <button class="wpforms-next">Далее</button>
</div>

Это базовая структура, которую потом подключаем к WPForms.

Добавление кастомного JavaScript

Как показано выше, с помощью jQuery переключаем видимость шагов. Можно добавить в footer темы или через функцию:

function wpforms_add_custom_scripts() {
  ?>
  <script>
  jQuery(document).ready(function($){
    var currentStep = 0;
    var steps = $('.wpforms-step');
    steps.hide();
    steps.eq(currentStep).show();

    $('.wpforms-next').click(function(e) {
      e.preventDefault();
      if(currentStep < steps.length - 1) {
        currentStep++;
        steps.hide();
        steps.eq(currentStep).show();
      }
    });

    $('.wpforms-prev').click(function(e) {
      e.preventDefault();
      if(currentStep > 0) {
        currentStep--;
        steps.hide();
        steps.eq(currentStep).show();
      }
    });
  });
  </script>
  <?php
}
add_action('wp_footer', 'wpforms_add_custom_scripts');

Альтернативные плагины для многоэтапных форм в WordPress

Если многоэтапность в WPForms кажется сложной или ограниченной, рассмотрите другие плагины с поддержкой многостраничных форм:

• Gravity Forms — мощный плагин с разветвлённой логикой и многостраничностью.
• Formidable Forms — предлагает гибкую настройку многоэтапных форм.
• Ninja Forms — удобный интерфейс и поддержка многостраничных форм через аддоны.

Но если вы хотите остаться с WPForms, кастомный подход с JavaScript — надежный и гибкий способ.

Советы по улучшению многоэтапных форм в WPForms

Чтобы многоэтапная форма была удобной и эффективной, учитывайте следующие моменты:

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

Для этих функций можно расширять JavaScript, добавлять CSS и использовать хук wpforms_process_before для серверной валидации.

Вывод

Создание многоэтапной формы в WPForms — задача вполне решаемая даже при использовании бесплатной версии, если применить кастомный JavaScript и правильную структуру HTML. Для более простого решения подойдет премиум-версия с встроенной функцией "Page Break". В любом случае, многоэтапная форма улучшит UX и повысит конверсию на вашем сайте.