- PVSM.RU - https://www.pvsm.ru -
Данный пост посвящен детальному алгоритму создания любой многостраничной веб-формы. Казалось бы, что чем меньше элементов (полей, разделителей, секций и в конце концов станиц) на форме, тем лучше и в плане юзабилити и в смысле конверсии. Но бывает, что упростить формы не удается и приходится прибегать к их разбиению на несколько страниц. К примеру, такое может понадобиться при заполнении длинной анкеты-вопросника, оформлении заявки на приобретение товара, добавлении информации о сотруднике в базу данных отдела кадров.
Давайте сделаем такую форму с помощью нашего сервиса MyTaskHelper [1]. Переходим в меню «Формы» → «Создать новую форму» → «Создать форму с нуля». Здесь же вводим необходимое название будущей веб-формы. У нас это «Заказ товара с доставкой» (Рис.1).
Рис. 1
Добавляем необходимые поля на форму. У нас это будет:
Добавляя поля, не забываем указывать опции валидации. У нас это «Не может быть пустым».
Предварительный просмотр формы (Рис. 2) показывает, что модуль довольно большой и не мешает разбить его на несколько страниц. Для этого в MTH имеется специальный тип поля, а именно «Разрыв страницы» (находится он на вкладке с разделителями).
Рис. 2
Для придания веб-форме нашего онлайн-заказа более приятного внешнего вида, после полей «Индекс», «E-mail для связи», «Выберите удобный способ доставки» и «Выберите удобный способ оплаты» встраиваем такой разделитель («Разрыв страницы»).
После настройки дизайна веб-формы, получаем такой результат, который уже не стыдно встраивать в любой сайт:
Рис. 3
Рис. 4
Рис. 5
Рис. 6
Рис. 7
Вот такая симпатичная форма из 5 страниц получилась :) А для тех, кто желает протестировать получившийся модуль лично, оставляю ссылку на только что созданную форму: тынц [2].
В следующих публикациях я расскажу о правилах для полей, с помощью которых описанная выше форма заказа товара станет еще интереснее и функциональнее.
А глянуть материал о том, что представляет собой MTH в целом, можно в этом хабратопике [3].
Автор: MyTaskHelper
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/bd/248333
Ссылки в тексте:
[1] MyTaskHelper: https://mytaskhelper.ru/
[2] тынц: https://mytaskhelper.ru/widgets/dc5ecdgKjj_PpSU_WmAM70/ctxmoJfSnmWPxdS8o4pWzA
[3] этом хабратопике: https://habrahabr.ru/company/mytaskhelper/blog/323026/
[4] Источник: https://habrahabr.ru/post/323368/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.