Квиз, пошаговая форма

Пример квиза или пошаговой формы:
http://koto-quiz.plp7.ru/

100093000

Как создать простой квиз?

Шаг 1. Добавим на секцию виджет «Новые формы».

100093001
Шаг 2. Удалим предустановленные поля, заголовок и кнопку.

100093002
Шаг 3. Перейдём в «Настройки формы» во вкладку «Шаги» и включим пошаговую форму.

100093003
Шаг 4. Добавим нужное количество шагов для формы и изменим их «Название».

100093004
Шаг 5. Перейдём к первому шагу.

100093005
и начнем наполнять нашу «Пошаговую форму»

100093006
На первом шаге мы добавим:
Виджет «Текст»
Виджет «Картинка»
Виджет «Кнопка» с действием «Перейти к следующему слайду, вкладке или шагу»
Именно данное действие в кнопке будет перелистывать шаги вперёд.

100093007
Шаг 6. На втором шаге формы мы добавим поля для заполнения:
«Поля для новых форм – Имя»
«Поля для новых форм – Телефон»

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

100093009
Шаг 7. Добавим на второй шаг формы кнопку и настроим её под нашу пошаговую форму.

100093010
Подсказка! Если шагов много, то настроенную кнопку можно «Дублировать» и разместить на нужных шагах формы.

100093011
Шаг 8. На третьем шаге нам понадобится виджет «Кнопка» с действием «Вернуться к предыдущему слайду, вкладке или шагу».
Для этого дублируем нашу кнопку «Далее» и изменим: «Цвет», «Название» и «Действие».


100093012
Подсказка! Если шагов много, то настроенные кнопки можно «Дублировать» и разместить на нужных шагах формы.
Шаг 9. На шаге, где будет производиться отправка формы, необходимо установить виджет «Кнопка» с действием «Отправить форму или перейти к следующему шагу».

100093013
Квиз готов! Останется только опубликовать страницу и проверить его работу.

Подсказка! В качестве оформления можно использовать любые виджеты с панели инструментов.
100093014

Настройки «Пошаговой формы»

Плавное перелистывание влево и вправо – позволяет плавно перелистывать шаги в форме.
Пример: http://koto-quiz1.plp7.ru/

100093016
Одинаковая высота для всех шаговзадаст одно значение высоты для всех шагов в этом виджете.
Пример: http://koto-quiz2.plp7.ru/

100093017
Нумерация шагов – позволяет задать, с какого шага начинается нумерация шагов (с первого шага или со второго) и на каком шаге заканчивается (на последнем шаге или на предпоследнем):

100093018
Подсказка: Для автоматической нумерации шагов необходимо использовать виджет «Номер блока» и установить его на нужные шаги в пошаговой форме.

100093019

Была ли эта статья полезна?

Похожие статьи