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

СОЗДАНИЕ КВИЗ-ФОРМЫ

За основу возьмем "ФОРМУ-КАЛЬКУЛЯТОР ЗАКАЗА ЕДЫ" из инструкции ”Создание калькулятора или формы-калькулятора” и превратим её в квиз.

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. Настройка пошаговой формы завершена. Чтобы сделать форму более привлекательной следует отрегулировать параметры отображения виджетов в форме, а также самой формы.


Пример этой страницы в редакторе и в публикации.

ДОПОЛНИТЕЛЬНЫЕ МАТЕРИАЛЫ

Вы нашли ответ?