Kак настроить пошаговую форму? Как сделать квиз?
Содержание:
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.
Более сложные примеры можно найти в нашем Блоге:
Готово!🎉 Мы создали и настроили квиз-форму 👍