← Назад
Обзор функций
FAQ

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

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

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

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

0₽

0₽

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

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

+4

+4

месяца

месяца

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

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

+12.000₽

+12.000₽

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

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

+3

+3

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

0₽

0₽

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

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

0₽

0₽

месяца

месяца

/год

/год

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

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

Получите подарки от 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. Как настроить свои шрифты на элементах квиза?
Зайдите в настройки секции, вкладка "Стили квиза". Найдите параметр "Размерность", переставьте его на значение "С". Именно здесь вы сможете задать нужные параметры:
3. Как установить свои цвета на элементах квиза?
В настройках секции, во вкладке "Стили квиза" найдите опцию "Цвета и стили". Выберите значение "Свой дизайн", выставьте нужные цвета:
4. Как поменять подписи на кнопках квиза?
Кликните по тексту внутри конкретной кнопки квиза и впишите туда нужную формулировку:

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке