← Назад

Обзор функций

FAQ

Создание QUIZ формы 2.0

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

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Quiz теперь выполнен в виде открытой секции и получил множество дополнительных возможностей:

• Блочная структура каждого экрана - позволяет собрать каждый отдельный экран квиза из любых блоков редактора;

• Ветвление в вопросах - позволит настроить показ вопросов в зависимости от предыдущих ответов;

• Онбординг для квиза - позволит показать мотивацию или подсказки к каждому вопросу;

• Значительно расширены возможности дизайна стандартных элементов квиза:
8 скинов для прогрессбара, кнопки навигации учитывают общие настройки дизайна квиза...

и многое другое!

Создание "Квиза 2.0"

Новый квиз, в отличие от прошлой версии, является шаблоном секции. Чтобы добавить его, нажмите на "+" у границы любой секции:

Добавление квиз-секции в редакторе сайта

Во вкладке "Динамические" откройте категорию "Квиз", выберите шаблон "Квиз 2.0":

Секция появится в редакторе:

Настройка "Квиза 2.0"

Нажмите на кнопку с шестеренкой в меню секции, чтобы открыть ее настройки:

Справа откроется окно настроек:

Здесь имеется 2 вкладки настроек:

I. Основные настройки
II. Стили квиза

Рассмотрим их поподробнее.

I. Основные настройки

В самом начале этой вкладки находится параметр "Экраны с вопросами". Он отвечает за состав квиза, количество слайдов (вопросов) в нем:

Для создания нового вопроса, нажмите на кнопку "Добавить":

Также вы можете копировать уже созданные вопросы с помощью опции:

А для удаления лишних вопросов, нажмите на кнопку:

Нажав на кнопку "•••", вы откроете меню вопроса, в котором можно изменить текст, отображаемый сверху, либо отключить его показ:

• Потяните за эту иконку, чтобы поменять порядок вопросов:

• Поменять активный вопрос для настройки его содержимого можно с помощью кнопок:

Обратите внимание!
Для создания вариантов ответа внутри вопроса требуется разместить блок "Поле формы":

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

С помощью опции "Включить заголовок" вы сможете задать название форме, которое будет отображаться над полосой прогресса, а также учитываться в тексте заявки и оповещениях:

1. Ветвление — в этом разделе настроек вы сможете выбрать принцип прохождения квиза посетителями сайта.
Мы рекомендуем включать эту опцию после того, как вы создали и настроили содержимое вопросов квиза.

• Если ветвление отключено, то посетители пройдут по фиксированному списку вопросов (который использовался в старом квизе, например).

• Если ветвление включено, то вы сможете задать определенный порядок прохождения вопросов, в зависимости от выбранных посетителем ответов.

Нажмите на кнопку "Настроить":

Откроется вот такое окно редактора ветвления. Здесь можно задать порядок вопросов и настроить связи от определенного ответа к другому вопросу:

Чтобы провести связь от ветки к другому вопросу, зажмите левой кнопкой мыши красный кружок и наведите курсор на нужный вопрос:

Когда все связи настроены, закройте редактор ветвления с помощью крестика:

Если ветвление отключено, вместо опции настроек сценария появится опция перехода на этот экран в поле "Канвас":

2. Онбординг — эта опция позволяет показать сбоку от экранов с вопросами дополнительную информацию о выгоде прохождения опроса:

• Опция "Положение" позволяет изменить положение онбординга или отключить его показ:

• Опция "Ширина" отвечает за ширину онбординга внутри секции.

• "Тип онбординга" — здесь вы можете выбрать, какой вариант онбординга будет использоваться в квизе:

А) "Универсальный" — позволяет задать один вариант для всех вопросов.

Имеет 2 способа сборки — "Выбор из шаблона" и "Слот":

"Выбор из шаблона" — вы можете выбрать один из уже готовых вариантов оформления и донастроить его.

"Слот" — вы можете собрать дизайн онбординга вручную с помощью стандартных блоков редактора:

Б) "Уникальный" — позволяет собрать свой отдельный вариант для каждого вопроса. По принципу настройки схож со способом сборки "Слот" в "Универсальном" типе онбординга:

3. Прогрессбар — настройки полоски-индикатора прохождения вопросов квиза. Она подсказывает посетителям количество пройденных и оставшихся вопросов.

Опция "Положение" позволяет изменить положение полосы прогресса, либо отключить ее показ:

Настройка отображения прогрессбара в квизе

"Вид прогрессбара" — позволяет выбрать вариант внешнего вида полосы прогресса:

Настройка внешнего вида прогрессбара квиза

"Вести подсчет вопросов" — отвечает за показ и оформление подписи под полосой прогресса:

Нажав на кнопку "•••", вы сможете открыть настройки подписи и изменить ее параметры:

"Стиль" — здесь вы сможете изменить тип заливки и цвет полосы прогресса:

4. Навигация — здесь вы сможете настроить внешний вид и работу кнопок навигации по вопросам.

• "Количество кнопок" — позволяет выбрать, сколько кнопок навигации будет отображаться в вопросах. Если выбрать "1 кнопка", то в квизе будет показываться только кнопка "Далее".

• "Выравнивание" — опция позволяет выбрать положение кнопок внутри квиза.

• Стиль кнопки "Далее" — опция отвечает за внешний вид кнопки "Далее".

• Стиль кнопки "Назад" — опция отвечает за внешний вид кнопки "Назад".

• Стиль кнопки "Готово" — опция отвечает за оформление кнопки "Готово", которая находится на последнем слайде квиза.

• "Включить подсказку" — отвечает за показ и содержимое подсказки около кнопки "Далее":

• "Автоматический переход" — после выбора варианта ответа автоматически сработает переход на следующий вопрос.

Автоматический переход к следующему вопросу квиза

5. Отправка формы — здесь вы сможете настроить действия после отправки формы, подключить интеграции и многое другое.

Настройка действий после заполнения квиза

• Настройки формы — здесь находятся параметры:

- Действий после заполнения формы (в том числе и настройка оплаты);
- Опция отправки SMS клиенту;
- Опция отправки данных с помощью POST-запросов;
- Опции подключения интеграций с AmoCRM, Bitrix24, GetResponse, JustClick, MailChimp, SendPulse, UniSender.

• Цели аналитики — здесь вы сможете настроить цели для:

- Яндекс.Метрики;
- Google Analytics.

• Положение и согласие — здесь вы можете указать отображения ссылок на документы о "Положении и Согласии на обработку персональных данных", которые показываются на последнем слайде:

Настройка положения и согласия при настройке квиза

Сами документы настраиваются по инструкции.

Важно!
Ссылки на документы не будут отображаться в квизе, если в настройках сайта, категория "общие", отключена эта опция:

• Тексты ошибок — здесь вы сможете при необходимости указать свой текст для каждой ошибки, которая может появиться при заполнении формы.

II. Стили квиза

Здесь вы сможете указать общие стили оформления для всего квиза.

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

• Размерность — отвечает за общий размер текста внутри кнопок, вопросов и полосы прогресса, если для них не указаны уникальные стили.

• Основной шрифт — позволяет задать шрифт для контента внутри формы. Параметр распространяется на:

- Заголовок формы;
- Подпись прогрессбара;
- Название вопроса;
- Названия и подписи полей формы;
- Подсказку около кнопок;
- Подписи кнопок.

Параметр не распространяется содержимое онбординга.

• Цвета и стили — в параметре имеется 2 варианта настройки:

Рекомендуемые — позволяет задать 2 основных цвета для всего квиза. Элементы автоматически подстроятся под них.
Свой дизайн — позволяет выбрать вручную свой цвет для каждого элемента квиза.

Поля

В этом подразделе находятся параметры управления блоками "Поле формы":

• Скругление — устанавливает скругление углов для полей.

• Цвет поля — позволяет задать цвет заливки внутри поля заполнения.

• Тень — устанавливает тень от границ поля (внутрь, не наружу).

• Тип обводки — позволяет настроить рамку для поля, ее толщину и цвет.

• Изображений в ряд — параметр указывает кол-во картинок в одной строке для поля "Выбор из картинок".

• Выбор из вариантов в ряд — позволяет выбрать количество вариантов ответа в одной строке для поля "Выбор из вариантов".

• Обводка выбора из вариантов — отдельная опция для поля "Выбор из вариантов", включающая обводку для ответов.

Подложка квиза

Параметры из этой категории отвечают за настройку подложки квиза, выделяющей его на общем фоне секции:

• Цвет фона — здесь вы можете указать цвет подложки и ее прозрачность по отношению к фону секции.

• Скругление — опция позволяет задать закругление углов подложки.

• Высота — здесь указывается общая высота подложки квиза. При размещении в вопросе большого количества полей или другого контента, очень важно подстраивать этот параметр.

• Тень — управляет тенью подложки, дополнительно выделяющей ее на фоне секции.

• Тип обводки — задает параметры рамки для подложки квиза.

Просмотр статистики по шагам

В функционале квиз-форм имеется встроенный счетчик для просмотра статистики по шагам. В нем вы сможете увидеть количество конверсий и отказов по каждому вопросу.

• Чтобы посмотреть эту статистику, нажмите на эту кнопку в левом верхнем углу секции:

Либо откройте "Основные настройки" квиза.

Если вы используете ветвления, то нажмите на кнопку "Настроить" в поле "Экраны с вопросами":

Просмотр статистики квиза на экране ветвления

Если ветвление отключено, то нажмите на кнопку "Показать" в поле "Канвас":

Откроется экран списка вопросов квиза. Нажмите на кнопку "Статистика" включить показ статистики по шагам:

Также вы сможете быстро открыть его с помощью кнопки:

Настройка полей формы

Принцип размещения и настройки полей подробно описан в нашей инструкции:

• Блоки редактора : Новая форма

Настройка целей для пошаговой аналитики

Вы можете настраивать цели Яндекс Метрики и Google Analytics для таких событий:

• Открытие экрана;
• Прохождение экрана;
• Выбор конкретного варианта ответа.

Настройка целей на прохождение вопросов в квизе

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

• Как настроить цели в Яндекс Метрике
• Как настроить цели в Google Analytics

Как создать Popup-квиз 2.0

Вы можете разместить квиз на сайте в "закрытом" виде, чтобы он открывался с кнопки.

Это уже не шаблон секции, а блок, который добавляется в редактор так:

Его настройки почти полностью совпадают с настройками секции "Квиз 2.0". Однако, есть несколько различий, рассмотрим их.

• Нажмите на кнопку с шестеренкой, чтобы открыть настройки блока:

В окне настроек есть 2 дополнительные вкладки — "Настройки кнопки" и "Настройки всплывающего окна"

1. Настройки кнопки

Здесь вы сможете указать параметры оформления кнопки, открывающей квиз:

2. Настройки всплывающего окна

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

Часто задаваемые вопросы:

1. Я клонирую квиз с настроенными ветвлениями, но они сбрасываются на копии. В чем может быть проблема?

Да, все верно, на данный момент ветвления не могут быть перенесены при клонировании квиза, потому на копии они сбросятся.

2. Как настроить свои шрифты на элементах квиза?

Зайдите в настройки секции, вкладка "Стили квиза". Найдите параметр "Размерность", переставьте его на значение "С". Именно здесь вы сможете задать нужные параметры: