Способы взаимодействия с целевой аудиторией сайта постоянно совершенствуются, одним из таких вариантов стали квизы. Они являются полноценным маркетинговым инструментом, помогающим продвигать бренд и увеличивать конверсии. Мы подготовили подробную информацию о том, как создать квиз для сайта без привлечения программистов.
Из чего состоит квиз?
Маркетинговый квиз должен включать в себя следующие составляющие:
- Вовлечение пользователя к прохождению квиза с помощью интригующего предложения. На этом этапе, как правило, товар или услуга не предлагается напрямую.
- Подготовленные вопросы. Важно, чтобы они коррелировались с тематикой вашего сайта, проекта или продукта, и мотивировали пользователя пройти опросник до конца.
- К каждому вопросу предлагается несколько вариантов готовых ответов.
- Прохождение квиза обычно подразумевает под собой вручение каких-либо бонусов: скидок, консультации, бесплатных полезных материалов и т.д.
- Форма для сбора контактных данных пользователя.
- Страница благодарности, которая, как правило, содержит упоминание о том, что представители компании свяжутся с пользователем.
Как сделать квиз для сайта самостоятельно?
Квиз можно реализовать на основе верстки HTML, CSS и JavaScript, но это трудоемкий способ, неподходящий для новичков. Рассказываем, как создать квиз для сайта на базе готового онлайн-конструктора, FormDesigner.
Авторизуемся в кабинете и приступаем к созданию.
Шаг 1
Для начала придумываем тематику квиза, логику последовательности вопросов, а также оформление. В конструкторе FormDesigner создание формы квиза представляет собой простое перетаскивание элементов на рабочую область. Создавать опросники можно с нуля или используя готовые шаблоны.
Например, создаем стартовый экран. Для этого заходим в Формы – Мои формы – Создать форму.
На вкладке элементы происходит формирование структуры страниц квиза.
Левый столбец рабочей области содержит элементы, доступные для перетаскивания на саму рабочую область.
Шаг 1 — выбираем основные поля и перетягиваем их
В нашем простом примере создадим текстовое поле, в которое поместим тематическое изображение, вопрос, вовлекающий пользователя на прохождение квиза, а также упоминание о бонусах, которые он получит по окончанию опросника.
Пример создания квиза
Шаг 2
На этом шаге необходимо подготовить последовательность вопросов и варианты ответов на них. Рекомендуется создавать не более 10 вопросов, но не менее 3-х, при этом формулируйте их (как и варианты ответов) простым языком, стараясь не прибегать к терминологии.
Переносим эти данные в квиз.
Шаг 2 — добавляем страницы
Реализовывать задачу будем с помощью элемента «Чекбоксы».
Выбираем«Чекбоксы»
Заполняем данные
Каждый из вариантов ответа подразумевает развитие уникального сценария. Другими словами, при выборе варианта «Мальчик», пользователю на следующих шагах квиза предлагается один набор вопросов, если девочка, соответственно, другой. Данная функция реализуется на вкладке «Логика», но для начала необходимо создать все страницы квиза.
Не стоит предлагать большое количество вариантов ответов, лучше ограничиться 2-5. Также они должны быть подводящими пользователя к совершению конверсионного действия.
Шаг 3
Поговорим про оформление. Делать это можно как в процессе создания отдельных слайдов квиза, так и после того, как созданы все. В целом, рекомендуется продумать этот момент до создания квиза, в идеале привлечь дизайнера. FormDesigner позволяет применять к элементам правила стилей CSS, что открывает широкие возможности при оформлении форм.
Если же дизайнера нет, то в сервисе уже есть несколько готовых тем оформления, которые можно скопировать и отредактировать под себя.
Шаг 3 — Выбираем тему оформления
Шаг 4
Создаем форму для захвата контактных данных, после которой выдается результат прохождения квиза и обещанные бонусы.
Шаг 5
Переходим к выстраиванию логики последовательности появления вопросов. Изначально лучше этот момент прописать в интеллект-картах или на бумаге.
Переходим на вкладку «Логика» и создаем новое правило.
Шаг 5 — настраиваем «Логику»
Во всплывающем окне выбирается слайд вопроса, далее условие: равно/не равно и вариант ответа. К выбранному варианту подбирается следующий слайд-вопрос. Аналогичным образом выстраивается логика для всего квиза.
Шаг 6
На этом шаге остается только установить квиз на сайт с помощью специального кода вставки.
Шаг 6 — Копируем код для вставки
Копируем JavaScript-код и устанавливаем на страницу сайта, после чего квиз будет доступен уже непосредственно на вашем ресурсе.
Возможности сервиса, которые мы открыли для себя
- Широкий инструментарий создания квизов с нуля. Можно встраивать различные элементы, оформлять их с применением стилей CSS. Это позволяет создавать квизы любой сложности и стилистики.
- База готовых шаблонов квизов, которые можно редактировать и адаптировать под свои цели.
- Формы обратной связи, данные из которых могут поступать как на e-mail, так и экспортироваться в CRM-систему или приходить в виде SMS.
- Удобный конструктор логики, позволяющий реализовывать всевозможные сценарии развития событий внутри квиза.
- Система имеет инструмент, с помощью которого можно формировать удобные отчеты на основе данных полученных из опросников.
- Возможность создания квизов-калькуляторов, с помощью которых по окончанию опросника пользователю выводится конечная стоимость товара или услуги.
Квизы открывают широкие возможности для привлечения клиентов, сбора статистических данных и для выстраивания отношений между пользователем и брендом. А конструктор FormDesigner, в свою очередь, позволяет создавать квиз-опросы для сайта любой сложности, не требуя при этом знаний верстки и программирования.
