KingComp – веб-программист
График работы: 9:00 - 18:00 Пн - Пт

Александр спрашивает:

Кто то знает конструктор опросников?

Виктория пишет:

Здравствуйте, раньше заказывала у вас скрипт, сейчас нужен ещё один, скрипт теста для платформы LP по типу как на сайте ba****.ru с возможностью менять контент. Сможете такое сделать и сколько это будет стоить?

Валерий написал:

Ильдар, привет, слушай, а ты делал квизы на платформе лп? Мне тут скинули пример: bk***.ru. Или может какую-нибудь другую платформу для квизов знаешь? Я видел пару забугорных платформ, но мне что-то не зашло)

Подобные вопросы часто пишут в ЛС или в группе Платформы. Теперь с уверенностью могу ответить, что да, такой скрипт существует! =)

Конструктор опросника на Платформе LP

Конструктор опросника позволит вам собрать эти самые квизы в редакторе Платформы LP. От вас не требуются навыки верстальщика или программиста. Главное, чтобы умели пользоваться Платформой LP.

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

Как это работает?

Допустим вы увидели рекламный баннер «Хотите узнать тайну своего имени?». Вы переходите, а там анкета на 4-5 шагов с простыми вопросами. Вы заполняете их и получаете информацию. А маркетологи получают информацию о вас.

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

Можно еще больше углубиться. Бывают ниши, где входных параметром много (вопросов). Но никто не мешает сделать опросник на 2-4 вопроса. После отправки формы с ответами , система перенаправляет клиента на следующий опросник, где он дополняет информацию своими новыми ответами на другие вопросы. Если ему надоест отвечать, то его контактные данные все равно уже у вас. =)

Как обойтись без фрилансера?

Воспользоваться конструктором опросника для Платформы LP! =)

Мне часто заказывают такие опросники. И работая с ними я уловил некую закономерность, а главное их минусы. Ок, допустим вам собрали опросник, а как же маркетинг? Он же не стоит на месте. Представьте, что через неделю вам потребуется изменить этот опросник. Заказывать новый? Дорого. Сидеть и изучать исходный код? Не думаю, что этим должен заниматься маркетолог.

На основе полученного опыта, я написал скрипт для составления опросника. Представьте только себе! Вы собираете его в редакторе и сразу же видите результат работы. Больше вам не придется изучать исходные коды. Только конструктор! У вас останется больше времени на получение прибыли.

Пример работы Квиза (опросника)

P.S.: Ниже постарался описать процесс настройки как можно подробнее, поэтому получилось много текста. На самом деле все там просто.

Исходный код

Опросник для Платформы LP можно настроить после приобретения исходных кодов по ссылке Скрипты для PlatformaLP.
Файлы body.html и head.html откройте в текстовом редакторе Блокнот.

Скопируйте в BODY исходный код из файла body.html.

здесь вам необходимо задать первоначальные настройки

где

radio,

checkbox

Необязательный параметр.

Вы можете задать свою иконку неактивной и активной кнопки через fontawesome.

Иконки передаются через массив в формате [неактивная, активная].

По умолчанию,

неактивная кнопка
активная

Параметр Значение
setprice Обязательный параметр.

Стоимость одного шага

math Обязательный параметр.

Тип арифметической операции.

Поддерживаются  следующие типы:

inc — прибавление

dec  — вычитание

Пример:

setprice = 1000  и указан тип inc

В этом случае конечная сумма будет увеличиваться на 1000 после каждого шага.

radio,

checkbox

Необязательный параметр.

Вы можете задать свою иконку неактивной и активной кнопки через fontawesome.

Иконки передаются через массив в формате [неактивная, активная].

По умолчанию,

неактивная кнопка
активная

answer_required Необязательный параметр.

Имеет два параметра:

  • true — кнопка «Далее» активируется только, если выбран один из вариантов ответа или заполнено одно из полей ввода текста;
  • false — кнопка «Далее» всегда активна.

По умолчанию, равное false.

Скопируйте в HEAD стили из файла head.html.

Стили квиза

Редактор

Работа с шаблонами

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

Добавьте пустую секцию, нажмите SHIFT + Стиль и скопируйте в модальное окно исходный код из файла template.txt.

Шаблон квизов

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

Скрыть конструктор квизов

Теперь просто копируете готовые блоки куда хотите. Сначала родительский блок (красный), затем в него блок шагов (зеленый).

Скриншот

Далее уже в зеленый копируете радиокнопки, галочки и поля ввода.

Скриншот

Теперь вам осталось настроить форму отправки заявки. Процесс описан ниже: перейти.

Здесь вы можете посмотреть пример работы квиза (3 Мб).

Ручная настройка

Добавьте Блок и задайте class=quiz  (для наглядности помечен красной рамкой).

Блок квиза

Здесь у нас будут содержаться все шаги квиза.


Теперь добавим первый шаг вопроса. Для этого внутрь красного блока добавьте еще один Блок (зеленый) и задайте class=step .

Шаг опросника

Это у нас первый шаг опросника. Вы можете добавить внутрь контейнера любые элементы прямо в редакторе.


Сейчас добавьте кнопку «Далее» и задайте class=bnext .

Кнопка Далее

Эта кнопка будет переключать шаги.

В параметрах кнопки переключите «Действие кнопки» в положение «Ничего не делать».

Действие кнопки

Аналогично добавьте кнопку «Назад», но только class=bprev .

Кнопка Назад - Конструктор опросника

Отлично! Переключение между шагами настроено. Теперь добавим выбор вариантов ответов.


Всего существует четыре варианта кнопки:

  • простая галочка (чекбокс);
  • простая радиокнопка;
  • чекбокс с изображением;
  • радиокнопка с изображением.

На самом деле они очень похожи, но объяснить не разбив их на четыре части не получается. Итак, пройдемся по каждому типу кнопки.


Простая галочка

Допустим у нас есть некий вопрос и 3 варианта ответа на них. Выбор ответа может быть множественным, следовательно нам нужен чекбокс (галочка).

Добавьте внутрь шага (зеленого блока) еще один Блок (синий) и задайте class=checkbox-group .

Группа чекбоксов


Немного забегая вперед…

В синий блок добавьте Текст и задайте class="gname hidden" .

Имя скрытого поля

В сам текст пропишите имя скрытого поля из формы, которую посетитель отправит в конце шага.

Форма отправки ответов опросника

Как мы видим на скрине, скрытое поле называется «Группа 1», тогда и в текст прописываем «Группа 1». Этот текст с названием поля не будет отображаться на опубликованной странице. Она служит подсказкой для скрипта, чтобы он понимал в какое поле добавить выбранный ответ.

Внимание! Не форматируйте этот текст.


Осталось добавить сам вопрос.

Вопрос шага квиза

Здесь также может быть любой контент на ваше усмотрение.


Добавим ответы…

Вставьте Кнопку в синий блок и задайте class=button-wrap .

Кнопка ответа


В настройках содержимое переключите на «Текст + Иконка». В тексте напишите значение ответа.

Настройка кнопки на Платформе


Действие кнопки переключите в положение «Ничего не делать».

Действие кнопки


Стилизуйте кнопку на свое усмотрение. В нашем примере он будет имитировать строку текста с чекбоксом.

Чекбоксы на Платформе LP

Прекрасно! В принципе у нас все готово для 1 вопроса.


Простая радиокнопка

Собирается абсолютно по той же схеме, что и простой чекбокс.

Отличается только единственным моментом — синий блок имеет class=radio-group .

Радиокнопки на Платформе LP


Чекбокс с изображением

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

Давайте сделаем это…

Предположим, что все остальное  вы уже добавили, включая синий блок с class=checkbox-group .

Опросник с выбором ответа


Теперь добавьте Блок (в примере с пунктирной линией) и задайте class=button-wrap .

Да, да… ровно также как мы делали это для простых чекбоксов. Вся разница только в этом . =)

checkbox-image


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

Тест для Платформы LP


Радиокнопка с изображением

Собирается абсолютно также, как и чекбокс с изображением. Единственное отличие в class=radio-group .

radio-image


Вывод результата

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

Вывод суммы скидки


В его исходном коде сумма должна быть прописана в элементе с class=quiz-amount .

Сумма скидки

Скрипт берет его в качестве стартовой суммы и производит арифметические операции выводя результат в это же место.


Форма отправки

Все выбранные ответы должны отправляться к нам в админку. Для этого в форму, которая находится внутри красного блока добавьте скрытые поля. Названия полей должны совпадать с тем, что вы прописывали в тексте с class="gname hidden" . Избегайте в названиях спецсимволов, они могут привести к непредсказуемым результатам.

Форма отправки ответов опросника


Пример

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

Пример работы конструктора опросника

Преимущества конструктора опросника

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

Обновления

Обновление от 2 декабря 2017

Изменения коснулись файлов ebody.htm, head.html, example.txt, template.txt.

Теперь нет необходимости настраивать по инструкции каждый элемент. Вы можете воспользоваться готовым набором шаблонов. Просто копируете и изменяете под себя.

А при помощи дополнительных полей, вы сможете собрать всю необходимую информацию от ваших клиентов.

Скриншот
Добавил:

  • Шаблоны.
  • Поддержку полей ввода штатной формы: Текстовое поле, Выпадающий список, Имя, Телефон, Электронная почта, Количество, Многострочный текст, Галочка, Список вариантов.

Исправил:

  • Обновил json-строку в файле example.txt для 3-ей версии редактора Платформы LP. Добавил в пример поле ввода.

Обновление от 20 декабря 2017

Изменения коснулись файлов ebody.htm и head.html.

Теперь ваш BODY и HEAD чище и лаконичнее.

Добавил:

  • Возможность ссылаться на скрипт по ссылке, чтобы не загромождать BODY а Платформе LP.

Исправил:

  • Внутренние изменения в алгоритме взаимодействия.
  • Файл ebody.html переименован в body.html.

Обновление от 4 февраля 2018

Изменения коснулись файлов body.htm и head.html.

Добавил:

  • Теперь кнопка «Далее» активируется только при выборе ответа.
  • Добавил кнопку «Назад».

Исправил:

  • Баг, позволяющий отправить поле ввода (форма) по нажатию Enter.
  • Небольшие исправления в коде.
  • Обновил шаблон.
  • Обновил пример из файла example.txt.

Как обновиться?

Достаточно подключить новую версию скрипта в строке подключения в BODY

И добавить кнопки «Назад» и «Далее» в соответствие с вышеприведенной инструкцией.