В этой статье вы узнаете, как создать форму с помощью бесплатного Elementor.
Несмотря на то, что виджет «Форма» доступен только на Факир ProЭто не означает, что вы не можете добавить форму с помощью бесплатной версии Elementor.
Если вы хотите добавить форму на страницу, созданную с помощью бесплатной версии Elementor, в этой статье мы рассмотрим два способа.
ElementorКак в профессиональной, так и в бесплатной версиях, он предлагает два виджета для создания форм: виджет HTML и виджет шорткода. Виджет HTML позволяет встраивать форму с помощью HTML-кода, а виджет шорткода — встраивать форму из плагинов форм, использующих шорткоды, таких как Contact Form 7.
содержание
Создайте форму с помощью бесплатной версии Elementor с помощью HTML-виджета за 7 шагов
Создать форму с помощью бесплатной версии Elementor вполне возможно, даже если у вас нет доступа к виджету «Форма», доступному в версии Pro. Эффективный способ — использовать виджет HTML, который позволяет встраивать форму с помощью HTML-кода.
Шаг 1: Создайте новую страницу или отредактируйте существующую.
Для начала создайте новую страницу и отредактируйте ее с помощью Elementor. (Страницы -> Добавить). При желании вы также можете отредактировать существующую страницу.
Если вы решили создать форму на новой странице, не забудьте настроить её макет, нажав на значок шестеренки, расположенный над страницей.
Шаг 2. Подготовьте HTML-код формы.
Для начала вам понадобится HTML-код вашей формы. Если у вас есть навыки HTML, вы можете написать код самостоятельно. В противном случае вы можете Найдите в Интернете множество бесплатных шаблонов HTML-форм. Как только HTML-код будет готов, скопируйте его и перейдите к следующему шагу.
Шаг 3. Добавьте новый раздел в Elementor
В редакторе Elementor начните с создания нового раздела на странице, куда вы хотите вставить форму. Нажмите кнопку «+», чтобы добавить раздел.
Затем выберите макет, который лучше всего соответствует вашей форме.
Шаг 4. Вставьте HTML-виджет
После добавления раздела найдите виджет "HTML" на панели виджетов слева. Перетащите его в созданный вами раздел. Этот виджет позволяет вставлять HTML-код непосредственно на страницу.
Шаг 5. Вставьте HTML-код формы.
После того, как HTML-виджет будет размещен, щелкните вкладку «Содержание» в левой панели виджета. Вставьте HTML-код вашей формы в соответствующее поле. Форма немедленно появится на странице.
Шаг 6. Настройте и стилизуйте форму
Интегрированная вами форма автоматически примет базовый стиль вашей темы WordPress. Однако, если вы хотите настроить ее еще больше, вы можете добавить пользовательский CSS для настройки цветов, полей, шрифтов и многого другого. Для этого требуются некоторые знания CSS или помощь разработчика, если необходимо.
Шаг 7. Предварительный просмотр и публикация
После того, как форма будет интегрирована и оформлена, уделите время предварительному просмотру страницы, чтобы убедиться, что все отображается правильно. Протестируйте форму, чтобы убедиться, что она работает должным образом. Когда вы будете удовлетворены результатом, опубликуйте страницу.
Смотрите также: Как использовать виджеты/шаблоны Elementor в качестве блоков Гутенберга
Следует отметить одну важную вещь: если ваша HTML-форма использует внешний CSS, изображения или JavaScript для стилизации, обязательно загрузите папки, содержащие файлы CSS, изображения и JavaScript, в корневой каталог вашего веб-сайта.
Использование HTML-виджета для создания формы в бесплатной версии Elementor — это простое и гибкое решение. Хотя оно требует немного больше усилий, чем виджет «Форма», доступный в версии Pro, это эффективный способ добавить функциональные формы на ваш сайт без дополнительных затрат.
Сочетая возможности Elementor с небольшим количеством HTML-кода, вы можете создавать формы, адаптированные под ваши потребности, сохраняя при этом визуальную целостность вашего сайта.
Создайте бесплатную форму Elementor, используя контактную форму 7, за 7 шагов
Создать форму с помощью бесплатной версии Elementor можно легко с помощью популярный плагин контактной формы 7. Этот плагин предлагает простой и эффективный метод встраивания форм в ваши страницы Elementor без каких-либо знаний в области кодирования.
Существует множество других плагинов для создания форм, но мы рекомендуем Contact Form 7, поскольку это самый популярный плагин для WordPress, и он совершенно бесплатный.
Шаг 1. Установите и активируйте контактную форму 7.
Для начала вам необходимо установить и активировать плагин Contact Form 7 на вашем сайте WordPress. Перейдите в панель управления WordPress, перейдите в Расширения> ДобавитьЗатем найдите плагин "Contact Form 7". Найдя его, нажмите на него. установить сейчасА потом активировать после завершения установки.
Шаг 2. Создайте новую форму.
После активации плагина вы можете создать форму. Для этого перейдите в Контакт > Добавить новый в панели управления WordPress. Дайте форме имя, чтобы ее можно было легко узнать позже.
По умолчанию Contact Form 7 предлагает вам базовую контактную форму с полями для имени, электронной почты, темы и сообщения. Вы можете использовать эту форму как есть или настроить поля в соответствии с вашими потребностями.
Чтобы добавить новое поле, поместите курсор в область, куда вы хотите его добавить (вы можете разместить его ниже или выше существующего поля). Добавьте метку для нового поля формы в формате: <label> votre label préféré </label>.
Поместите курсор сразу после названия поля, которое вы хотите изменить, или после последнего существующего поля. Затем выберите тип поля, которое хотите добавить, на вкладке. ЧемпионДля улучшения читаемости и организации формы можно вставлять перенос строки после каждого нового поля, что сделает форму более понятной и выровненной относительно остальных существующих полей.
Заполните поля и нажмите на Вставьте тег (можно оставить все по умолчанию).
Contact Form 7 будет отправлять полученные через вашу форму заявки на указанный вами адрес электронной почты. Вы можете указать адрес электронной почты на соответствующей вкладке. Электронная почта.
Вы можете перейти на вкладку Сообщения Если вы хотите заменить сообщения по умолчанию, вы можете настроить сообщение, которое отображается после успешной отправки формы посетителями, сообщение об ошибке, если форма не была отправлена, и т. д.
Нажмите на кнопку Регистрация как только вы закончите редактирование формы.
Шаг 3. Настройте форму
Если вы хотите изменить или добавить дополнительные поля в свою форму, вы можете сделать это непосредственно в интерфейсе Contact Form 7. Вы можете добавить поля для номеров телефонов, флажки или любые другие необходимые вам данные. После внесения изменений сохраните форму.
Прочтите наше руководство: Как настроить форму Контактный формуляр 7
Шаг 4. Получите шорткод формы
После создания и настройки формы Contact Form 7 предоставит вам уникальный короткий код. Этот короткий код необходим для интеграции формы на страницу Elementor. Просто скопируйте короткий код, найденный под именем формы.
Шаг 5: Вставьте форму в Elementor
Теперь, когда у вас есть шорткод, откройте страницу, куда вы хотите добавить форму, с помощью редактора Elementor. Добавьте новый раздел или выберите существующий, где должна появиться форма.
Найдите виджет «Шорткод» на панели виджетов Elementor, затем перетащите его в нужный раздел. Вставьте скопированный ранее шорткод в соответствующее поле.
Шаг 6. Настройте и стилизуйте форму
Форма Contact Form 7, интегрированная в Elementor, по умолчанию будет соответствовать стилю вашей темы WordPress. Если вы хотите дополнительно настроить внешний вид формы, это можно сделать, добавив... Пользовательский CSS. Вы можете изменить цвета, поля, типографику и многое другое, чтобы адаптировать форму к общему виду вашего сайта.
Читайте также: Как отключить всплывающее окно Elementor на смартфонах
Шаг 7: Тестирование и выпуск
Перед публикацией страницы обязательно просмотрите форму, чтобы убедиться в ее корректной работе. Отправьте тестовое сообщение, чтобы проверить работоспособность всех функций. После проверки опубликуйте страницу, чтобы форма стала доступна вашим посетителям.
Так ! Используя Contact Form 7 с бесплатным Elementor, вы можете легко создавать функциональные формы, не тратя ни копейки. Этот метод идеально подходит для пользователей, которым нужна базовая, но эффективная функциональность, сохраняющая при этом гибкость в настройке формы.
Контактная форма 7 в сочетании с Elementor дает вам надежное решение для сбора важной информации от ваших посетителей.
Если вам нужна более простая настройка, вы можете прочитать эту статью о том, как настроить форму Contact Form 7 с помощью Essential Addons и Elementor.
Часто задаваемые вопросы: Как создать форму в бесплатной версии Elementor
Могу ли я создать форму с помощью бесплатной версии Elementor?
Да, вы можете создать форму с помощью бесплатной версии Elementor, используя виджеты HTML или Shortcode. Хотя виджет «Форма» зарезервирован для версии Pro, существуют эффективные бесплатные альтернативы.
Каковы методы создания формы в бесплатном Elementor?
Вы можете использовать виджет HTML для непосредственного встраивания HTML-формы или виджет «Шорткод» для встраивания формы, созданной с помощью плагина, такого как Contact Form 7.
Как добавить HTML-форму на страницу Elementor?
Используйте виджет HTML в Elementor, чтобы вставить HTML-код для вашей формы. Вы можете вставить код непосредственно в поле содержимого виджета.
Нужно ли мне знать HTML, чтобы создать форму с помощью бесплатного Elementor?
Хотя это помогает, вам не нужны навыки работы с HTML, если вы используете плагин формы, такой как Contact Form 7, который генерирует короткие коды, которые легко встроить.
Как стилизовать форму, созданную с помощью бесплатного Elementor?
Если вы используете HTML-форму, вам потребуется использовать CSS для ее стилизации. Формы, созданные такими плагинами, как Contact Form 7, наследуют стиль вашей темы WordPress, но вы также можете настроить стиль с помощью CSS.
Есть ли бесплатные плагины для создания форм с помощью Elementor?
Да, такие плагины, как Contact Form 7, WPForms Lite и Ninja Forms, — это популярные бесплатные варианты создания форм, которые можно встроить в Elementor.
Как интегрировать форму Contact Form 7 на страницу Elementor?
Создайте свою форму в Contact Form 7, затем скопируйте сгенерированный шорткод. Используйте виджет Elementor Shortcode, чтобы встроить эту форму на свою страницу.
Каковы ограничения бесплатной версии Elementor для создания форм?
Бесплатная версия Elementor не предлагает специальный виджет «Форма». Для создания форм вам нужно будет использовать такие решения, как HTML, шорткоды или внешние плагины.
Как я могу протестировать свою форму, созданную с помощью Elementor?
После встраивания формы на страницу просмотрите страницу с помощью Elementor и отправьте тест, чтобы убедиться, что форма работает правильно.
Можно ли использовать расширенные формы в бесплатной версии Elementor?
Для использования расширенных функций, таких как условные поля или многошаговые формы, рекомендуется перейти на Pro-версию Elementor или использовать плагины форм с расширенными функциями в их бесплатных версиях.
Другие связанные ресурсы
- Как интегрировать ActiveCampaign с Elementor
- Как интегрировать AWeber с Elementor
- Elementor Как добавить анимацию Лотти
- Elementor : Как создать вертикальный трекер прогрессаПолучить Elementor Pro сейчас !!!
Заключение
Вот и всё! На этом завершается статья о том, как создать форму с помощью бесплатной версии Elementor. Если у вас возникнут какие-либо трудности, сообщите нам об этом в комментариях. Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...