Главная страница » Пошаговая форма в WordPress

Пошаговая форма в WordPress

Bootstrap snippet + Contact Form 7

Пример симпатичной пошаговой формы — https://www.bootply.com/Tou8fnpxJW

  • Копируем JS и CSS на наш сайт. Без JS кода переходы не будут работать. А стили дают нужный вид форме.

  • Создаем новую форму Contact Form 7 и копируем в неё HTML код.

  • Нужно заменить все поля ввода на элементы управления CF7. Не забудьте про кнопку «Отправить» в конце формы.

пошаговую форму ‹ Contact Form 7 — WordPress

  • Собственно, всё, дизайн готов. Копируем шорткод на страницу и наслаждаемся. Далее вы знаете как довести форму и тело сообщения до работающей отправки.

Ничего сложного. В сети выложены много готовых сниппетов (на сайтах подобным https://www.bootply.com) и вы легко найдете подходящие для себя, даже если не умеете верстать самостоятельно красивые формы.

к содержанию ↑

Плагин последовательной формы Contact Form 7

Скачать: https://ru.wordpress.org/plugins/contact-form-7-multi-step-module/

Образец: http://webheadcoder.com/contact-form-7-multi-step-form/

Последовательность состоит не из одной, а из нескольких страниц и форм. Иногда это то, что требуется.

Для каждого шага нужно создать страницу и форму. В шаблоне формы вставляется тег multistep, с указанием текущего шага, количества шагов и ссылки на следующую страницу.

пошаговую форму ‹ Contact Form 7 Multistep — WordPress

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

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

к содержанию ↑

Плагин конструктор Multi Step Form (не CF7)

Страница: https://wordpress.org/plugins/multi-step-form/

Посмотреть демо: https://mondula.com/msf-demo/

Плагин позволяет создать отзывчивую форму с помощью привычного перетаскивания элементов.

Инструкция (https://mondula.com/en/2017/01/06/multi-step-form-anleitung/) абсолютно вся в картинках. Поэтому разобраться не сложно.
За неё разработчику отдельный жирный плюс.

к содержанию ↑

Платные плагины

Например, https://codecanyon.net/item/contact-form-7-multistep/15232990

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

Демо напоминает наш первый Bootstrap сниппет.
https://demo.ninjateam.org/contact-form-7-multi-step/

Разумеется, этот плагин сделает за вас все сложные технические шаги.

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