Contact Form 7: как создать многоступенчатую форму в WordPress

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

Почему стоит использовать многоступенчатые формы в Contact Form 7

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

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

Подходы к реализации многоступенчатых форм с Contact Form 7

1. Использование нескольких форм и переходов между ними

Можно создать несколько отдельных форм Contact Form 7, каждая из которых отвечает за один шаг. После заполнения и отправки первой формы происходит перенаправление на страницу со следующей формой с передачей данных (через сессию, URL-параметры или cookies).

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

2. Один шорткод с скрытыми блоками и переключением шагов через JavaScript

В рамках одного шорткода Contact Form 7 можно разместить все поля, сгруппированные по шагам, и с помощью CSS и JS показывать только нужный блок. Переход между шагами происходит без перезагрузки страницы, что улучшает UX.

Преимущества — простота интеграции и отсутствие необходимости хранения данных на сервере между шагами. Недостаток — все данные отправляются в конце, поэтому нельзя делать серверную валидацию на каждом шаге без AJAX.

Пример реализации многоступенчатой формы с Contact Form 7 и JavaScript

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

Шаблон формы CF7 будет выглядеть так:

[group step1]
<label>Имя (обязательно)
[text* your-name]
</label>
<label>Возраст
[number your-age]
</label>
[/group]

[group step2 style="display:none"]
<label>Email (обязательно)
[email* your-email]
</label>
<label>Телефон
[tel your-phone]
</label>
[/group]

<div class="cf7-multistep-buttons">
  <button type="button" class="prev-step" style="display:none">Назад</button>
  <button type="button" class="next-step">Далее</button>
  <input type="submit" value="Отправить" style="display:none" />
</div>

Здесь мы использовали группы [group] Contact Form 7 для логического разделения шагов. В первом шаге отображается блок step1, во втором — step2.

JavaScript для переключения шагов

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.wpcf7 form');
  const steps = form.querySelectorAll('[class*=step]');
  const btnNext = form.querySelector('.next-step');
  const btnPrev = form.querySelector('.prev-step');
  const btnSubmit = form.querySelector('[type=submit]');
  let currentStep = 0;

  function showStep(index) {
    steps.forEach((step, i) => {
      step.style.display = i === index ? 'block' : 'none';
    });
    btnPrev.style.display = index === 0 ? 'none' : 'inline-block';
    btnNext.style.display = index === steps.length - 1 ? 'none' : 'inline-block';
    btnSubmit.style.display = index === steps.length - 1 ? 'inline-block' : 'none';
  }

  btnNext.addEventListener('click', function() {
    if(!cf7_validateStep(currentStep)) return;
    currentStep++;
    showStep(currentStep);
  });

  btnPrev.addEventListener('click', function() {
    currentStep--;
    showStep(currentStep);
  });

  showStep(currentStep);

  // Простая клиентская валидация для обязательных полей на шаге
  function cf7_validateStep(step) {
    let valid = true;
    const inputs = steps[step].querySelectorAll('input[aria-required="true"]');
    inputs.forEach(input => {
      if(!input.value.trim()) {
        valid = false;
        input.style.borderColor = 'red';
      } else {
        input.style.borderColor = '';
      }
    });
    return valid;
  }
});

Этот скрипт переключает видимость блоков, показывает кнопки «Далее», «Назад», «Отправить», а также простую валидацию на заполнение обязательных полей.

Улучшение: серверная валидация и сохранение промежуточных данных

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

Для этого можно использовать AJAX-запросы в обработчиках Contact Form 7 или создавать собственный плагин с хуками contactform7_before_send_mail и contactform7_validate. Это позволит проверять данные и сохранять их по шагам.

Пример хука для валидации шага (contactform7.ru_validate_step)

add_filter('wpcf7_validate_text*', 'contactform7ru_validate_step', 20, 2);
function contactform7ru_validate_step($result, $tag) {
  $name = $tag->name;
  $submission = WPCF7_Submission::get_instance();
  if (!$submission) return $result;

  $data = $submission->get_posted_data();

  // Пример валидации: если мы на первом шаге, проверяем поле your-name
  if ($name === 'your-name' && empty(trim($data[$name]))) {
    $result->invalidate($tag, 'Пожалуйста, заполните имя.');
  }

  return $result;
}

Такой подход позволит создавать гибкую логику проверки для каждого шага.

Плагины, облегчающие создание многошаговых форм с CF7

Если хочется готовое решение, можно использовать сторонние расширения для Contact Form 7, например:

• Contact Form 7 Multi-Step Module — простой модуль для многошаговости;
• Clearfy Pro — расширенный плагин оптимизации и добавления функционала, включая улучшение форм;
• My Popup — позволяет показывать формы в попапах, удобно для многошаговых последовательностей.

Выводы и рекомендации по многоступенчатым формам с Contact Form 7

Многоступенчатая форма повышает удобство пользователя и качество сбора данных. Несмотря на то, что Contact Form 7 не предлагает многошаговость из коробки, с помощью групп, JavaScript и хуков вы можете создать собственное решение без привлечения сложных конструкторов.

Начинайте с простого переключения блоков и валидации на клиенте, затем добавляйте серверную проверку и сохранение промежуточных данных. Если нужно быстро и без программирования — обратите внимание на расширения и плагины из экосистемы WordPress и WPSHOP.