Выбираем нужную форму и перетягиваем её в секцию. Задаем ширину, переходим во вкладку «Шаги» и ставим галочку «Включить пошаговую форму». Удаляем все поля и приступаем к оформлению первого шага.

2.1. Одно из преимуществ ручной настройки квиза на Creatium от конструкторов квизов, это возможность задать любой внешний вид, отступы, кнопки и другое. Перед вами чистый лист, остается оформить квиз удобно для пользователя.
2.2. Настраиваем кнопку вперед. Для этого добавьте кнопку и во вкладе «Действие» выберите режим «Перейти к следующему слайду, вкладке или шагу».
2.3. Копируем первый шаг и переходим к настройке следующего шага. Каждый следующий шаг также будем копировать и дорабатывать, это делается для удобства, но вы можете делать каждый шаг «с нуля».
.gif#%7B%22size%22:%5B600,324%5D,%22quality%22:8%7D)
3.1. Меняем содержимое шага, ставим ползунок для указания площади. От величины площади напрямую будет зависеть итоговая стоимость, поэтому переходим в настройки поля, вкладка «Переменная» и задаем название — metr (p.s. название может быть любое).

3.2. Добавляем кнопку «Назад». Она нужна в том случае, если посетитель захочет вернуться на предыдущий шаг. Чтобы это сделать добавляем кнопку, меняем внешний вид на свой вкус и во вкладке «Действие» выбираем режим «Вернуться к предыдущему слайду, вкладке или шагу».
Для примера берем 2 тарифа и прописываем переменную «tarif» со значением 10 для эконома и 20 для бизнеса. Эти переменные понадобятся для показа результата в зависимости от выбранных критериев.
.gif#%7B%22size%22:%5B600,324%5D,%22quality%22:8%7D)
Для примера берем 2 тарифа и прописываем переменную «tarif» со значением 10 для эконома и 20 для бизнеса. Эти переменные понадобятся для показа результата в зависимости от выбранных критериев.
.gif#%7B%22size%22:%5B600,324%5D,%22quality%22:8%7D)
6.1. Добавляем «Поле-контейнер для виджетов». Это скрытое поле, которое будет показываться посетителю только при выборе определенных вариантов ответов в опросе.

6.2. Всего получается 4 варианта результатов: Эконом, Эконом + АН (Авторский надзор), Бизнес и Бизнес + АН. Чтобы настроить показ указываем условие отображения по заданным переменным.
Для удобства доступные варианты отображены прямо под полем условия. Тариф эконом — это переменная tarif == 10 (указывать следует два знака ровно «==» подряд. Выбранный авторский надзор — это переменная avtor == 10. Чтобы сделать обязательное выполнения обоих условий, ставим «&&».
Если нужно выполнение условий формата ИЛИ, ставим знак «||».
6.3. Для каждого варианта добавляем поле Калькулятор.
.gif#%7B%22size%22:%5B600,324%5D,%22quality%22:8%7D)
6.4. Настраиваем формулу. Предположим что эконом тариф стоит 1500 рублей за метр квадратный, бизнес 3000 рублей, а авторский надзор стоит 30000 рублей.
Формула расчета для клиента, выбравшего поля Эконом тарифа и Авторский надзор будет metr*1500+30000
Для Бизнес тарифа без авторского надзора формула будет metr*3000.
Готово! Мы настроили шаги, задали условия показов и формулу для каждого из них. Давайте посмотрим, как выглядит прохождения готового квиза.
.gif#%7B%22size%22:%5B600,324%5D,%22quality%22:8%7D)
Настроить внешний вид можно как угодно, задавайте больше условий и сложные формулы. Надеемся данный пример поможет в настройке эффективных квиз форм для вашего бизнеса!
Спасибо всем за внимание и успехов в настройке квиза ;)

Как сделать прелоадер для сайта