Квиз или пошаговая форма - это обычная форма состоящая из двух и более шагов. На первом шаге вы можете добавить поля для выбора типов товара. На втором - показать варианты выбранного товара, на третьем добавить поля для ввода контактных данных с кнопкой "Отправить заявку".
Создание квиз-формы
За основу возьмем "ФОРМУ-КАЛЬКУЛЯТОР ЗАКАЗА ЕДЫ" из инструкции "Создание калькулятора или формы-калькулятора" и превратим её в квиз.
1. В настройках формы на вкладке ”Шаги” поставим галочку напротив ”Включить пошаговую форму”.
2. Всего в форме будет три шага.
- Название первого шага - "Продукт";
- Название второго шага - "Количество";
- Название третьего шага - "Отправить заявку".
- Для перемещения шагов местами, необходимо нажать левую кнопку мыши на значке в виде четырех стрелочек и удерживая её, передвинуть шаг.
- Для дублирования шагов вместе с содержимым шага, необходимо нажать левую кнопки мыши на значке в виде двух квадратов перекрывающих друг друга.
- Для удаления шагов - на крестик возле шага.
3. С другой стороны, мы могли бы просто создать новые, но ещё пустые шаги, а затем используя виджет "Блок" переместить виджеты с первого шага во второй, третий и так далее, создав дубликат виджета "Блок" за пределами формы.
Способ перехода между шагами в редакторе и на опубликованной странице отличается. Например, в редакторе для перехода с одного шага на другой можно использовать переключатель возле названия формы. Кликнув левой кнопкой мыши откроется список доступных для перехода шагов.
Также переключаться между шагами в редакторе можно в настройках самой формы кликнув по значку в виде прицела.
На опубликованной странице или в предпросмотре такие способы перехода будут недоступны. Вместо них нужно использовать виджет "Кнопка" с действием "Перейти к следующему слайду, вкладке или шагу" или "Вернуться к предыдущему слайду, вкладке или шагу". По этому добавим в форму виджет "Кнопка" и настроим его.
4. Остается удалить часть виджетов из шагов и настроить отображение итоговой цены на каждом шаге.
- В первом шаге изменим формулу убрав из нее умножение на количество;
Старая формула: (hamburgers * amount_hamburgers) + (tea * amount_tea) + (ice * amount_ice)
Новая формула: hamburgers + tea + ice
Заметка: в старой формуле используются имена переменных (amount_hamburgers, amount_tea, amount_ice), которые еще не объявлены. Другими словами в формуле можно использовать только те переменные, которое указаны в полях выше поля "Калькулятор", а не после него.
- А формулу, что во-втором и третьем шаге оставим без изменений.
5. В первом шаге посетитель может выбрать только один вид товара, соответственно нужно используя условные поля настроить скрытие полей с выбором количества для товаров, которые не выбраны.
- Для поля ”Количество гамбургеров” укажем условие - hamburgers;
- Для поля ”Чашек чая” условие - tea;
- Для поля ”Упаковок мороженного” - ice.
Подробнее о настройке условных полей написано в инструкции "Динамические формы-калькуляторы".
6. Настройка пошаговой формы завершена. Чтобы сделать форму более привлекательной следует отрегулировать параметры отображения виджетов в форме, а также самой формы.
Пример этой страницы в публикации.