Хотите узнать, как создать форма в несколько шагов с Elementor ?
Вы знаете типоформу? Он является создателем формы популярная онлайн-платформа, известная своим интерактивным стилем. В Typeform вы можете создать форма многошаговая интерактивная онлайн-игра для самых разных целей.
Если у вас есть веб-сайт на базе WordPress, работающий на Elementor, вы можете легко интегрировать формы Typeform с помощью Essential Addons.
См. Также: Как добавить ценовую сетку в Elementor
Но начиная с версии 2.9, Elementor сам по себе имеет функцию, которую вы можете использовать для создания формы в несколько этапов. В этой статье мы покажем вам, как это сделать с помощьюElementor.
Un форма Многошаговый подход сам по себе является отличной идеей для экономии места в вашем дизайне (будь то страница или шаблон конструктора тем). Это позволяет сократить длинную форму до более простой.
Как создать многоступенчатую форму в Elementor
Перед тем, как начать, убедитесь, что вы обновили свой Elementor до профессиональной версии, если вы этого не сделали, поскольку виджет формы (виджет Elementor для создания форм) доступен только в профессиональной версии.
Читайте также: Как создать контактную форму в Elementor
В этой статье мы сразу перейдем к добавлению виджета «Форма». Многоступенчатая форма, которую мы собираемся создать, состоит из трех следующих шагов:
- Шаг 1. Имя и пол
- Шаг 2. Телефон и электронная почта
- Шаг 3: переключатель
Сначала перетащите виджет формы в поле редактирования Elementor.
Перейдите на панель настроек слева, чтобы выполнить настройки. В блоке Поля формы под вкладка Content, определите поля в соответствии с вашими потребностями. В нашем случае это следующие поля:
- Фaмилия
- Жанр
- телефон
- Электронное письмо
- Хобби
После того, как вы закончите добавление и определение необходимых полей формы, добавьте еще одно поле и установите для типа поля значение Шаг.
См. Также: Как создать округлое изображение в Elementor
На этом шаге автоматически добавляется новое поле в верхнем порядке и новое поле в нижнем. Вы можете установить метку верхнего поля примерно так: шаг 1.
Затем перетащите нижнее поле и поместите его прямо над полем из второго шага (в данном случае - полем «Телефон»).
Добавьте еще одно поле и установите тип поля на шаге. Перетащите его и поместите прямо над полем на третьем шаге (в данном случае поле «Хобби»).
Здесь. Вы можете предварительно просмотреть результат, прежде чем настраивать форму. По умолчанию в качестве типа шага задано число и текст.
Вы можете редактировать из блока Параметры шага под вкладкой Содержание.
Вы можете получить доступ к вкладке Стиль чтобы настроить вашу форму. Вы можете открыть 5 блоков регулировки.
- форма для заполнения : вы можете открыть этот блок, чтобы определить расстояние между столбцами и строками формы, типографику (семейство шрифтов, размер шрифта, стиль шрифта и т. д.) меток формы и цвет текста последней .
- Поля : Вы можете открыть этот блок, чтобы определить типографику полей формы, цвет текста полей, фон, ширину границы, цвет границы и радиус границы.
- Кнопка: Вы можете открыть этот блок, чтобы настроить кнопки. Будь то кнопка отправки, предыдущая кнопка или следующая кнопка. Вы можете определить такие элементы, как типографика текста, цвет текста, цвет фона и т. Д.
- Сообщение: Вы можете открыть этот блок, чтобы определить типографику сообщений, а также цвет текста.
- Шаги: Вы можете открыть этот блок, чтобы определить типографику шагов, цвет, ширину разделителя, пространство разделителя и т. Д.
Закончив редактирование шаблона, вы можете опубликовать или обновить его.
Читайте также: Как создать раздел члена команды с помощью Elementor
Если вы хотите вставить только что созданную форму на страницу Гутенберга (или, может быть, вы хотите вставить ее в сообщение в блоге), вы можете сохранить виджет формы как глобальный виджет. Затем вы можете импортировать виджет с помощью плагина Блоки Elementor для Гутенберга.
Получите Elementor Pro прямо сейчас!
Заключение
Вот! Вот и все, что касается этой статьи, в которой показано, как создать многоступенчатую форму с помощью Elementor. Если у вас есть вопросы о том, как туда добраться fдайте нам знать в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
