Квизы, или пошаговые формы, отличный инструмент для повышения конверсии. Они развлекают клиента или, наоборот, помогают ему лучше сформулировать свой запрос. Вы же получаете не просто заявку, а конкретную информацию о запросе клиента + можете выстраивать с ним более доверительные отношения. А значит, клиент быстрее и приятнее проходит все этапы воронки.

Опросники можно реализовать в любой форме: тест, анкета, расчет проекта или услуги... В тесте, как в сказке, можно сделать всё — даже отправить слона в космос! Кстати, подобные приёмы из разряда фантастики пользуются популярностью, но не стоит предлагать тест "Кем вы были в прошлой жизни", если вы реализуете ЖБК блоки.

Что делает квиз по сути?

• привлекает;
• вовлекает;
• сближает;
• собирает информацию;
• помогает определиться.

Если вы не развлекательный портал, а интернет-магазин, который реализует, например, строительные материалы, можете сделать эффективные квизы-советы, помогающие вашим клиентам преодолеть определенные проблемы.

Например, сложно подобрать обои и мебель? Проходим тест, выбираем варианты, которые нам наиболее близки и получаем в конце несколько примеров дизайна интерьера. Или часть ваших клиентов не удовлетворена классическими предложениями? Дайте им возможность собрать заказ под себя — будь то пицца или компоновка плитки для ванной. Результат отправляем по почте, приложив всякие интересности, которые помогут нам провести клиента по воронке.

Собираем квиз на Платформе

1) Перетащим на страницу виджет "Новые формы, стиль 2". Установим в качестве фона нужное нам изображение (в меню "Капля", раздел "Фон", здесь же настроим яркость фона) и перейдем в настройки "Гаечного ключа". На вкладке "Шаги" нам важно включить пошаговую форму и задать нужное количество этапов. У нас есть "Шаг 1" — мы можем дублировать его или создавать новые шаги:

2) Теперь в "Гаечном ключе" настроим отключение фона — снимаем соответствующую галочку и потянем за края формы, чтобы она растянулась:

3) Удалим все ненужные поля, оставим только заголовок и кнопку. В заголовке прописываем "Создайте пиццу за 4 шага", а в кнопке "Приступить". Действие у кнопки задаём "Перейти к следующему слайду, вкладке или шагу". Выставим также в настройках положения формы "По ширине":

4) Обложка квиза, или начало, готова. Вернёмся к количеству шагов: начало + 4 полноценных шага + завершение для размещения формы-заявки. Также выставим галочки по всем пунктам ниже, потому что нам важно задать одинаковую высоту слайдов, а также начинать и заканчивать нумерацию шагов без учета начала и завершения квиза:

5) Перетащим в форму виджет "Номер блока или слайда" (он находится в меню "Блоки"). Зададим формат и максимальную непрозрачность. Чтобы данный виджет показывал нам не просто номер, а прописывал "Шаг 1 из 4", воспользуемся инструкцией из Базы знаний. Откроем "Исходный код" виджета:

Установим код из статьи:

<div class="number"> {{_index}}/{{_total}} </div>

с небольшими изменениями:

<div class="number"> Шаг {{_index}} из {{_total}} </div>

Отлично! Работает!

6) Под номером блока размещаем виджет "Заголовок", в котором пропишем основной текст, а ниже расположим "Список вариантов" для выбора теста и размера пиццы.

Обратите внимание, что "Список вариантов" подразумевает единичный выбор компонента. Задаем названия полей (можно со стоимостью, если нужно) на соответствующей вкладке:

7) Переходим в настройки переменной, ведь нам нужно, чтобы калькулятор в конце рассчитал стоимость. Значит "dough" будет названием, а 100, 200 и 150 — стоимостью, которая нужна нам для расчёта:

8) Настройки всех кнопок на шагах 1, 2, 3 и 4 одинаковы. Действие левой — вернуться к предыдущему слайду, вкладке или шагу, а действие правой — перейти к следующему:

9) Приступим ко второму шагу. Здесь мы предлагаем дополнить предыдущий выбор клиента мясной начинкой. А потому, используем виджет "Список вариантов с картинками", который не позволяет выбрать более 1 позиции.

Прописываем название поля и каждого варианта, загружаем нужные картинки по клику на миниатюры:

На вкладке "Переменная" прописываем "meat" и проставляем стоимость для каждого варианта:

10) Третий шаг у нас предоставляет выбор овощей. Тут мы используем виджет "Список галочек с картинками", который поддерживает множественный выбор вариантов. Настройки на вкладке "Поле" производим так же, как и в предыдущем шаге:

На вкладке "Переменная" прописываем "vegetables" и проставляем стоимость для каждого варианта:

11) Четвёртый шаг настраивается аналогично первому. Мы размещаем здесь виджет "Список вариантов" с названиями:

А также задаём "Переменную", в данном случае "cheese", и прописываем стоимость:

12) Завершает наш квиз форма, которая содержит поле "Калькулятор" (находится в меню "Поля") для расчета стоимости пиццы с учётом всех пожеланий клиента, а также поля для указания адреса доставки.

В настройках калькулятора важно указать название поля:

Расчет будет выполняться по формуле, которую вы впишете. В нашем случае всё довольно просто: стоимость пиццы равна суммарной стоимости всех её компонентов на каждом шаге:

Проверяем работу квиза на опубликованной:

И в заявке мы получили следующие данные:

Имя: Елена

Телефон: 74957565442

Почта: -

Тесто: Классическое

Размер: 30 см

Мясо: Морепродукты

Овощи: Шампиньоны, Зелень, Маслины, Лук

Сыр: Тофу

Соус: Чесночный

Стоимость пиццы: 440 руб.

Адрес доставки: Москва, ул. Карабинеров 15/17

Горяченьких вам заявок!