Квиз или пошаговая форма - это обычная форма состоящая из двух и более шагов. На первом шаге вы можете добавить поля для выбора типов товара. На втором - показать варианты выбранного товара, на третьем добавить поля для ввода контактных данных с кнопкой ”Отправить заявку”.
![](../../i/o/88448325/b8a0afea81493180fbe87caf/1x1px.png)
СОЗДАНИЕ КВИЗ-ФОРМЫ
За основу возьмем "ФОРМУ-КАЛЬКУЛЯТОР ЗАКАЗА ЕДЫ" из инструкции ”Создание калькулятора или формы-калькулятора” и превратим её в квиз.
1. В настройках формы на вкладке ”Шаги” поставим галочку напротив ”Включить пошаговую форму”.
![](../../i/o/88448896/a8b6387f9bc604d537c4da7e/1.jpg)
2. Всего в форме будет три шага.
Название первого шага - "Продукт";
Название второго шага - "Количество";
Название третьего шага - "Отправить заявку".
Для перемещения шагов местами, необходимо нажать левую кнопку мыши на значке в виде четырех стрелочек и удерживая её, передвинуть шаг.
![](../../i/o/88448940/cb738d62bad02de3f7cddc96/2.jpg)
Для дублирования шагов вместе с содержимым шага, необходимо нажать левую кнопки мыши на значке в виде двух квадратов перекрывающих друг друга.
![](../../i/o/88448962/b1339f001b1f3d1705aa1241/3.jpg)
Для удаления шагов - на крестик возле шага.
3. С другой стороны, мы могли бы просто создать новые, но ещё пустые шаги, а затем используя виджет "Блок" переместить виджеты с первого шага во второй, третий и так далее, создав дубликат виджета "Блок" за пределами формы.
Способ перехода между шагами в редакторе и на опубликованной странице отличается. Например, в редакторе для перехода с одного шага на другой можно использовать переключатель возле названия формы. Кликнув левой кнопкой мыши откроется список доступных для перехода шагов.
![](../../i/o/88449022/95989808582985979a59cd83/4.jpg)
Также переключаться между шагами в редакторе можно в настройках самой формы кликнув по значку в виде прицела.
![](../../i/o/88449047/940dd8013260cd7bdbb83d60/5.jpg)
На опубликованной странице или в предпросмотре такие способы перехода будут недоступны. Вместо них нужно использовать виджет ”Кнопка” с действием ”Перейти к следующему слайду, вкладке или шагу” или ”Вернуться к предыдущему слайду, вкладке или шагу”. По этому добавим в форму виджет ”Кнопка” и настроим его.
4. Остается удалить часть виджетов из шагов и настроить отображение итоговой цены на каждом шаге.
В первом шаге изменим формулу убрав из нее умножение на количество;
Старая формула: (hamburgers * amount_hamburgers) + (tea * amount_tea) + (ice * amount_ice)
Новая формула: hamburgers + tea + ice
![](../../i/o/88449069/056d87c4b4a175688019e0d2/6.jpg)
Заметка: в старой формуле используются имена переменных (amount_hamburgers, amount_tea, amount_ice), которые еще не объявлены. Другими словами в формуле можно использовать только те переменные, которое указаны в полях выше поля "Калькулятор", а не после него.
А формулу, что во-втором и третьем шаге оставим без изменений.
5. В первом шаге посетитель может выбрать только один вид товара, соответственно нужно используя условные поля настроить скрытие полей с выбором количества для товаров, которые не выбраны.
Для поля ”Количество гамбургеров” укажем условие - hamburgers;
Для поля ”Чашек чая” условие - tea;
Для поля ”Упаковок мороженного” - ice.
Подробнее о настройке условных полей написано в инструкции ”Динамические формы-калькуляторы”.
6. Настройка пошаговой формы завершена. Чтобы сделать форму более привлекательной следует отрегулировать параметры отображения виджетов в форме, а также самой формы.
Пример этой страницы в редакторе и в публикации.
![](../../i/o/88448568/1d751e38ba2a09896255e1e8/1x1px.png)
![](../../i/o/88448544/16b1644c4e3f1213cfad0777/1x1px.png)