Многошаговая форма заказа: как не потерять покупателя

Многошаговая форма заказа решает конкретную проблему: длинная страница чекаута с десятком полей пугает покупателя одним своим видом, и часть людей закрывает вкладку, не долистав до кнопки «Оплатить». За практику с интернет-магазинами на Tilda и WooCommerce я вижу одну и ту же картину: как только форму заказа разбиваю на 3-4 понятных шага с прогресс-баром, число брошенных корзин заметно снижается, а заявки менеджерам приходят чище, потому что валидация на каждом шаге отсекает опечатки в телефоне и email раньше, чем клиент доберётся до отправки.

Зачем разбивать заказ на несколько экранов

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

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

Сколько шагов делать в пошаговой форме заказа

Оптимум для большинства магазинов - 3-4 шага. Меньше двух смысла не имеет: это просто короткая форма без выгоды от разбивки. Больше пяти начинает раздражать не меньше, чем одна длинная форма, только раздражение растягивается во времени.

Рабочая раскладка, которую использую чаще всего:

• Шаг 1 - состав заказа: список товаров, количество, промокод, если он есть в магазине
• Шаг 2 - контакты: имя, телефон, email
• Шаг 3 - доставка и оплата: адрес или пункт СДЭК, способ оплаты, комментарий к заказу
• Шаг 4 - подтверждение: сводка заказа и кнопка отправки

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

Прогресс-бар и навигация между этапами формы

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

Что должно быть в навигации между шагами:

• Номер текущего шага и общее число шагов, например «Шаг 2 из 4»
• Кликабельные пройденные шаги - покупатель должен вернуться и поправить телефон, не заполняя всё заново
• Кнопка «Назад», которая не сбрасывает уже введённые данные
• Явная кнопка перехода дальше, а не переход по Enter, который на мобильных иногда закрывает клавиатуру раньше времени

На Tilda такую навигацию из коробки не собрать - штатный блок «Форма» одноэкранный, и переключение шагов, прогресс-бар и сохранение состояния между ними реализуются отдельным скриптом поверх верстки.

Валидация и автосохранение на каждом шаге

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

На практике использую связку: клиентскую проверку формата телефона, email и обязательных полей сразу при потере фокуса с поля, плюс серверную проверку перед записью заказа в базу. На клиентскую валидацию полагаться нельзя - её отключают через консоль браузера за десять секунд, и без серверной проверки в базу попадёт мусор.

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

Интеграция многошаговой формы с оплатой и доставкой

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

Для оплаты на WooCommerce ставлю плагин эквайринга T‑Bank и настраиваю его так, чтобы виджет оплаты открывался только после успешного прохождения предыдущих шагов, а не был доступен сразу. Для расчёта доставки на шаге «Доставка и оплата» подключаю виджет СДЭК с выбором пункта выдачи на карте или расчётом стоимости по адресу - это избавляет от отдельного звонка менеджера с уточнением стоимости.

Готовый заказ после подтверждения обычно нужно куда-то передать: в CRM, менеджеру в Telegram, в 1С. Здесь удобно использовать n8n - сценарий получает вебхук с формы, раскладывает данные по нужным сервисам и уведомляет ответственного, а хранить сами заявки и контакты клиентов лучше на сервере в России, а не в зарубежных облачных таблицах. Для магазинов, где заказы дублируются менеджеру в мессенджер, тот же вебхук можно направить в бота на aiogram, который сразу пришлёт карточку заказа с составом и телефоном покупателя.

Tilda, WooCommerce и своя разработка

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

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

Частые ошибки в многошаговых формах заказа

• Слишком много полей на одном шаге - если экран просит заполнить десять полей, разбивка теряет смысл
• Нет кнопки «Назад» или она сбрасывает введённые данные - покупатель откажется возвращаться и просто уйдёт
• Прогресс не сохраняется при обновлении страницы - особенно критично на мобильном интернете с обрывами связи
• Форма требует регистрацию до оформления заказа - это стабильно поднимает отказ на первом шаге
• Форма не тестировалась на мобильном экране - большая часть заказов в рознице приходит с телефона, а не с десктопа

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

Частые вопросы

Сколько шагов оптимально для формы заказа интернет-магазина?

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

Можно ли сделать многошаговую форму на Tilda без программиста?

Простую версию с двумя-тремя шагами и переключением через Zero-блок можно собрать вручную, но прогресс-бар, валидация и сохранение состояния между шагами требуют скрипта поверх верстки. Точечная доработка такого рода стоит от 3 000 ₽, а полноценная интеграция с оплатой, CRM и доставкой - от 40 000 ₽.

Как понять, на каком шаге покупатели уходят из формы?

Ставлю отдельную цель в Яндекс.Метрике или событие GA4 на переход между каждым шагом. Если между шагом 2 и шагом 3 теряется заметная часть пользователей, смотрю, какие поля стоят именно там - чаще всего причина в лишнем обязательном поле или в неработающей подсказке по формату ввода.

Стоит ли делать регистрацию обязательной перед оформлением заказа?

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