Содержание:

1. Как создать простой квиз?
2. Настройки «Пошаговой формы»
 
 

Функция пошаговой формы позволяет разделить длинную форму на несколько частей (шагов), которые перелистываются кнопкой «Далее» . Это удобно использовать, если посетителю нужно выбрать много параметров товара/услуги и в конце указать свои контакты.

Пример квиза или пошаговой формы, которую будем делать в этой инструкции:
http://koto-quiz.plp7.ru/

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

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

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

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

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

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

Шаг 5. Перейдём к первому шагу. Для этого нажмите на иконку перекрестия возле настроек формы и на нужный шаг:

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

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

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

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

Шаг 7. На второй шаг формы тоже добавим кнопку, которая будет перелистывать к следующему шагу.

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

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

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

❗Обратите внимание, что в последнем шаге тоже должны быть виджеты «Поле» и «Кнопка», чтобы отправить форму, а не еще один, отдельный виджет формы.

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

2. Настройки виджета «Пошаговой формы»

Перейдем в настройки пошаговой формы, нажав иконку гаечного ключа и выбрав «Шаги»

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

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

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

Функция нумерации шагов позволяет вставить виджет «Номер блока» в каждый шаг, чтобы он отображал номер шага. Например, на шаге 2 будет цифра 2.

Более сложные примеры можно найти в нашем Блоге:

Готово!🎉 Мы создали и настроили квиз-форму 👍

Вы нашли ответ?