ИНСТРУКЦИЯ

Делаем квиз-форму на Creatium

Сегодня показываем как сделать квиз опросник с условиями показов и расчетом стоимости. Для примера берем расчет стоимости ремонта квартиры. Поехали ;)

Квиз за 6 шагов

1. Добавляем форму

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

2. Первый шаг

2.1. Одно из преимуществ ручной настройки квиза на Creatium от конструкторов квизов, это возможность задать любой внешний вид, отступы, кнопки и другое. Перед вами чистый лист, остается оформить квиз удобно для пользователя.

2.2. Настраиваем кнопку вперед. Для этого добавьте кнопку и во вкладе «Действие» выберите режим «Перейти к следующему слайду, вкладке или шагу».

2.3. Копируем первый шаг и переходим к настройке следующего шага. Каждый следующий шаг также будем копировать и дорабатывать, это делается для удобства, но вы можете делать каждый шаг «с нуля».

3. Второй шаг

3.1. Меняем содержимое шага, ставим ползунок для указания площади. От величины площади напрямую будет зависеть итоговая стоимость, поэтому переходим в настройки поля, вкладка «Переменная» и задаем название — metr (p.s. название может быть любое).

3.2. Добавляем кнопку «Назад». Она нужна в том случае, если посетитель захочет вернуться на предыдущий шаг. Чтобы это сделать добавляем кнопку, меняем внешний вид на свой вкус и во вкладке «Действие» выбираем режим «Вернуться к предыдущему слайду, вкладке или шагу».

4. Тарифы

Для примера берем 2 тарифа и прописываем переменную «tarif» со значением 10 для эконома и 20 для бизнеса. Эти переменные понадобятся для показа результата в зависимости от выбранных критериев.

5. Авторский надзор

Для примера берем 2 тарифа и прописываем переменную «tarif» со значением 10 для эконома и 20 для бизнеса. Эти переменные понадобятся для показа результата в зависимости от выбранных критериев.

6. Итоговый результат

6.1. Добавляем «Поле-контейнер для виджетов». Это скрытое поле, которое будет показываться посетителю только при выборе определенных вариантов ответов в опросе.

6.2. Всего получается 4 варианта результатов: Эконом, Эконом + АН (Авторский надзор), Бизнес и Бизнес + АН. Чтобы настроить показ указываем условие отображения по заданным переменным.

Для удобства доступные варианты отображены прямо под полем условия. Тариф эконом — это переменная tarif == 10 (указывать следует два знака ровно «==» подряд. Выбранный авторский надзор — это переменная avtor == 10. Чтобы сделать обязательное выполнения обоих условий, ставим «&&».

Если нужно выполнение условий формата ИЛИ, ставим знак «||».

6.3. Для каждого варианта добавляем поле Калькулятор.

6.4. Настраиваем формулу. Предположим что эконом тариф стоит 1500 рублей за метр квадратный, бизнес 3000 рублей, а авторский надзор стоит 30000 рублей.

Формула расчета для клиента, выбравшего поля Эконом тарифа и Авторский надзор будет metr*1500+30000

Для Бизнес тарифа без авторского надзора формула будет metr*3000.

Готово! Мы настроили шаги, задали условия показов и формулу для каждого из них. Давайте посмотрим, как выглядит прохождения готового квиза.

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

Спасибо всем за внимание и успехов в настройке квиза ;)

Дополнительные материалы:

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