Обсудим ваш проект?
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

Как создать квиз для сайта?

Дарья Иванова,
редактор
Анастасия Остроухова,
руководитель отдела интернет-маркетинга
Поделиться
Просмотров:
2932
Время на прочтение:
Статья обновлена:
1 июля 2021
Информация о статье
Просмотров: 2932
Время на прочтение:
Статья обновлена: 01.07.2021
Дарья Иванова, редактор
Анастасия Остроухова, руководитель отдела интернет-маркетинга
Поделиться

Способы взаимодействия с целевой аудиторией сайта постоянно совершенствуются, одним из таких вариантов стали квизы. Они являются полноценным маркетинговым инструментом, помогающим продвигать бренд и увеличивать конверсии. Мы подготовили подробную информацию о том, как создать квиз для сайта без привлечения программистов.

Директ Лайн
Кто мы
Крупнейшее агентство
интернет-маркетинга за МКАДом:
1200+ проектов
70 специалистов
15 лет на рынке
ТОП-10
лучших компаний интернет-продвижения России 2020
Коммерческое предложение

Из чего состоит квиз?

Маркетинговый квиз должен включать в себя следующие составляющие:

  • Вовлечение пользователя к прохождению квиза с помощью интригующего предложения. На этом этапе, как правило, товар или услуга не предлагается напрямую.
  • Подготовленные вопросы. Важно, чтобы они коррелировались с тематикой вашего сайта, проекта или продукта, и мотивировали пользователя пройти опросник до конца.
  • К каждому вопросу предлагается несколько вариантов готовых ответов.
  • Прохождение квиза обычно подразумевает под собой вручение каких-либо бонусов: скидок, консультации, бесплатных полезных материалов и т.д.
  • Форма для сбора контактных данных пользователя.
  • Страница благодарности, которая, как правило, содержит упоминание о том, что представители компании свяжутся с пользователем.

Как сделать квиз для сайта самостоятельно?

Квиз можно реализовать на основе верстки HTML, CSS и JavaScript, но это трудоемкий способ, неподходящий для новичков. Рассказываем, как создать квиз для сайта на базе готового онлайн-конструктора, FormDesigner.

Авторизуемся в кабинете и приступаем к созданию.

Шаг 1

Для начала придумываем тематику квиза, логику последовательности вопросов, а также оформление. В конструкторе FormDesigner создание формы квиза представляет собой простое перетаскивание элементов на рабочую область. Создавать опросники можно с нуля или используя готовые шаблоны.

Например, создаем стартовый экран. Для этого заходим в Формы – Мои формы – Создать форму.

На вкладке элементы происходит формирование структуры страниц квиза.

Левый столбец рабочей области содержит элементы, доступные для перетаскивания на саму рабочую область.

Шаг 1 - выбираем основные поля и перетягиваем их
Шаг 1 - выбираем основные поля и перетягиваем их

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

Пример создания квиза
Пример создания квиза

Шаг 2

На этом шаге необходимо подготовить последовательность вопросов и варианты ответов на них. Рекомендуется создавать не более 10 вопросов, но не менее 3-х, при этом формулируйте их (как и варианты ответов) простым языком, стараясь не прибегать к терминологии.

Переносим эти данные в квиз.

Шаг 2 - добавляем страницы
Шаг 2 - добавляем страницы

Реализовывать задачу будем с помощью элемента «Чекбоксы».

Выбираем«Чекбоксы»
Выбираем«Чекбоксы»

Заполняем данные
Заполняем данные

Каждый из вариантов ответа подразумевает развитие уникального сценария. Другими словами, при выборе варианта «Мальчик», пользователю на следующих шагах квиза предлагается один набор вопросов, если девочка, соответственно, другой. Данная функция реализуется на вкладке «Логика», но для начала необходимо создать все страницы квиза.

Не стоит предлагать большое количество вариантов ответов, лучше ограничиться 2-5. Также они должны быть подводящими пользователя к совершению конверсионного действия.

Шаг 3

Поговорим про оформление. Делать это можно как в процессе создания отдельных слайдов квиза, так и после того, как созданы все. В целом, рекомендуется продумать этот момент до создания квиза, в идеале привлечь дизайнера. FormDesigner позволяет применять к элементам правила стилей CSS, что открывает широкие возможности при оформлении форм.

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

Шаг 3 - Выбираем тему оформления
Шаг 3 - Выбираем тему оформления

Шаг 4

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

Шаг 5

Переходим к выстраиванию логики последовательности появления вопросов. Изначально лучше этот момент прописать в интеллект-картах или на бумаге.

Переходим на вкладку «Логика» и создаем новое правило.

Шаг 5 - настраиваем «Логику»
Шаг 5 - настраиваем «Логику»

Во всплывающем окне выбирается слайд вопроса, далее условие: равно/не равно и вариант ответа. К выбранному варианту подбирается следующий слайд-вопрос. Аналогичным образом выстраивается логика для всего квиза.

Шаг 6

На этом шаге остается только установить квиз на сайт с помощью специального кода вставки.

Шаг 6 - Копируем код для вставки
Шаг 6 - Копируем код для вставки

Копируем JavaScript-код и устанавливаем на страницу сайта, после чего квиз будет доступен уже непосредственно на вашем ресурсе.

Возможности сервиса, которые мы открыли для себя

  • Широкий инструментарий создания квизов с нуля. Можно встраивать различные элементы, оформлять их с применением стилей CSS. Это позволяет создавать квизы любой сложности и стилистики.
  • База готовых шаблонов квизов, которые можно редактировать и адаптировать под свои цели.
  • Формы обратной связи, данные из которых могут поступать как на e-mail, так и экспортироваться в CRM-систему или приходить в виде SMS.
  • Удобный конструктор логики, позволяющий реализовывать всевозможные сценарии развития событий внутри квиза.
  • Система имеет инструмент, с помощью которого можно формировать удобные отчеты на основе данных полученных из опросников.
  • Возможность создания квизов-калькуляторов, с помощью которых по окончанию опросника пользователю выводится конечная стоимость товара или услуги.

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

Комментарии
ДОБАВИТЬ КОММЕНТАРИЙ
Увеличим ваши продажи через интернет!
Разрабатываем и поддерживаем сайты. Приводим на сайт целевой трафик с помощью SEO и рекламы. Увеличиваем конверсию сайтов. Имеем успешные кейсы увеличения продаж интернет-магазинов, медицинских центров, производителей, застройщиков, автоцентров, интернет-сервисов и пр. В команде 33 специалиста.

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»

19 место
В топ-100 perfomance-агентств России

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

1 место
Рейтинг агентств контекстной рекламы Новосибирска

Золотая сотня
Российского Digital

Сертифицированное агентство Яндекс 2020

Работающие инструменты SEO, интернет–рекламы, UX от
60 профессионалов
Директ Лайн — агентство интернет–маркетинга с 15-летним опытом, 1200+ клиентами и 50+ специалистами. Мы сами ведем этот блог. Раз в месяц пришлём самые интересные и полезные материалы.
  • #SEO
  • #интернет-реклама
  • #email-рассылки
  • #юзабилити сайта
  • #веб–разработка на bitrix
  • #кейсы
60 профессионалов
Раз в месяц
Без спама и СМС