ИНСТРУКЦИЯ

Делаем квиз-форму на 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.

Благодарность

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

Прохождение квиза

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

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

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

Прелоадер

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

Работает на Creatium