Хотите настроить форму обратной связи Contact Form 7 с помощью плагина Elementor Essential Addons?
Contact Form 7 — один из самых популярных плагинов для создания форм в WordPress. Однако, несмотря на его мощные возможности, настройка внешнего вида форм может быть ограничена без знания CSS.
С помощью плагина WordPress Contact Form 7 вы можете создавать множество типов форм, например, форму бронирования или форму загрузки файлов. Он предлагает 14 типов полей, которые можно использовать при создании формы.
Смотрите также: Как использовать виджеты/шаблоны Elementor в качестве блоков Гутенберга
Однако одной из распространенных проблем плагина Contact Form 7 является процесс его настройки. Contact Form 7 использует стиль по умолчанию вашей активной темы WordPress. Вы можете использовать другой стиль, но для этого потребуются навыки работы с CSS.
Вот тут-то и пригодится Essential Addons для Elementor. Этот плагин предлагает целый ряд инструментов для оформления и улучшения ваших форм. С помощью Essential Addons вы можете настроить каждый аспект ваших форм Contact Form 7 непосредственно из интерфейса Elementor.
В этой статье мы рассмотрим, как использовать этот плагин для преобразования ваших форм в визуально привлекательные элементы.
содержание
Как оформить контактную форму 7 с помощью Essential Addons
Установка и настройка
Начните с установки и активации Elementor et Contact Form 7 на вашем сайте WordPress. После установки создайте базовую форму, которую вы будете стилизовать позже.
Затем установите и активируйте Основные дополнения Для Elementor. Убедитесь, что Elementor также установлен и активен на вашем сайте. Essential Addons работает в тандеме с Elementor, предоставляя расширенные возможности настройки.
В панели управления WordPress активируйте виджет "Contact Form 7" в настройках Essential Addons, если он еще этого не сделал.
После установки и активации создайте новую страницу (Страницы -> Добавить) и отредактируйте его с помощью Elementor.
Стилизация формы с помощью необходимых дополнений
Перед началом процесса настройки определите макет страницы, щелкнув значок шестеренки над страницей. Выберите макет в выпадающем меню. Полноразмерный элементор.
Для начала настройки перейдите на страницу, куда вы хотите вставить форму, используя редактор Elementor. Добавьте виджет "Контактная форма советника 7«От необходимых дополнений к вашей странице.»
После добавления формы можно приступать к её оформлению. Essential Addons позволяет изменять цвета, шрифты, поля и многое другое. Настройте внешний вид полей, кнопок и сообщений об ошибках по своему вкусу.
Перейдите на левую панель и выберите форму, стиль которой вы хотите настроить.
После выбора формы перейдите на вкладку Стиль. Как видите, вы можете установить несколько параметров стиля. Вот общие параметры стиля, которые вы можете установить.
Ширина формы, выравнивание и фон
Под блоком ФормаКонтейнер, щелкните палитру цветов в разделе Тип фона и задайте желаемый цвет для фона формы. В качестве фона можно использовать либо сплошной цвет, либо градиентный цвет.
Читайте также: Elementor: как импортировать или экспортировать шаблоны
Чтобы задать выравнивание формы, просто выберите желаемый вариант выравнивания в соответствующем разделе. Выравнивание формы.
Для установки ширины формы установите значение Максимальная ширина формы в поле Максимальная ширина формы.
Фоновое поле, ширина и радиус границы
Чтобы задать фон поля, ширину границы и радиус, вы можете открыть соответствующий раздел. Ввод и текстовое поле. Нажмите на палитру цветов поля Цвет фона определить фон.
Также вы можете установить цвет фона полей, находящихся в фокусе, щелкнув по вкладке. ФОКУС.
Чтобы определить ширину полей, вы можете указать значение в полях Ширина входа. В этом разделе вы также можете установить ширину поля текстового поля в Ширина текстового поля.
Чтобы установить радиус границы, просто отредактируйте поле Радиус границы и установите желаемое значение границы. Вы также можете настроить типографику (семейство шрифтов, размер шрифта, стиль шрифта), щелкнув значок карандаша в поле. книгопечатание.
Метки
Essential Addons также позволяет настраивать стиль подписей к формам. Вы можете задать цвет и шрифт текста. Для этого откройте соответствующую опцию. Метки. Установите цвет текста, щелкнув палитру цветов в поле Цвет текста.
Чтобы задать типографику, щелкните значок карандаша в поле. книгопечатание.
кнопка отправки
Чтобы настроить стиль кнопки отправки, откройте блок Разместить кнопкуЗдесь вы можете задать выравнивание кнопки, ширину, цвет фона, цвет текста, радиус скругления углов и типографику.
Сообщение d'erreur
Чтобы настроить стиль сообщения об ошибке, вы можете открыть блок. ошибкиВы можете задать цвет текста сообщения об ошибке, типографику, цвет фона ошибки валидации, цвет текста ошибки валидации и т. д.
Вы можете задать несколько других параметров стиля. Вы можете поэкспериментировать с левой панелью, пока не будете удовлетворены стилем вашей формы.
Вы можете добавить на свою страницу несколько других элементов, используя доступные виджеты Elementor и Essential Addons. После завершения нажмите кнопку. ОПУБЛИКОВАТЬ в нижней части левой панели, чтобы опубликовать свою страницу.
Интеграция формы в обычную страницу
После нажатия кнопки ОПУБЛИКОВАТЬВаша страница контактов, по сути, опубликована. Сама страница создана с помощью Elementor. Если вы предпочитаете добавить форму обратной связи Contact Form 7 на обычную страницу (страницу, созданную с помощью Gutenberg, стандартного редактора WordPress), вы можете установить плагин. Блоки Elementor для Гутенберга. Этот плагин преобразует шаблон Elementor в блок Gutenberg.
Чтобы сохранить контактную форму как шаблон Elementor, нажмите кнопку со стрелкой рядом с кнопкой ПУБЛИКАЦИЯ / ОБНОВЛЕНИЕ на левой панели и выберите Сохранить как шаблон.
Дайте вашему шаблону имя и нажмите кнопку ЗАПИСЫВАТЬ.
Создать новую страницу (Страницы -> Добавить) и дайте ему имя, например «свяжитесь с нами», «контакт» или любое другое имя, которое вам нравится.
Добавьте новый блок и выберите Библиотека Elementor и выберите шаблон контактной формы, который вы только что создали.
И теперь вы только что персонализировали свою контактную форму.
Тестирование и оптимизация
После того, как форма будет оформлена, важно убедиться, что она корректно отображается на всех устройствах. Проверьте адаптивность формы с помощью встроенных инструментов Elementor. Внесите необходимые корректировки, чтобы форма была идеально читаемой на мобильных телефонах и планшетах.
Кроме того, убедитесь, что примененные стили не влияют на производительность вашего сайта. Хорошо оформленная форма должна загружаться быстро. При необходимости оптимизируйте изображения и минимизируйте визуальные эффекты для обеспечения оптимальной производительности.
Также прочитайте ресурсы, связанные с этой статьей.
- Elementor : Как создать карточку товара
- Elementor : Как создать раздел для участников команды
- Elementor : Как создать шестиугольную карту с эффектом
- Elementor : как прокручивать изображение при наведении
- Elementor : Как добавить звуковой эффект кнопки
FAQ
Совместимы ли Essential Addons с другими плагинами форм?
Да, Essential Addons совместим с несколькими другими плагинами, хотя некоторые функции предназначены для Contact Form 7.
Могу ли я использовать Essential Addons без Elementor?
Нет, Essential Addons работает только с Elementor, поскольку он является расширением этого конструктора страниц.
Что делать, если стилизация применена неправильно?
Убедитесь, что кеш вашего сайта очищен и все плагины обновлены. Если проблема не устранена, проверьте возможные конфликты с другими плагинами или темами.
Получить Elementor Pro сейчас !!!
Заключение
Вот и всё! На этом завершается статья о том, как настроить форму Contact Form 7 с помощью Essential Addons. Оформление формы Contact Form 7 с помощью Essential Addons — это эффективный способ сделать ваши формы более привлекательными визуально, сохраняя при этом превосходный пользовательский опыт.
При правильной настройке вы можете создавать формы, которые не только привлекают внимание пользователей, но и укрепляют визуальную идентичность вашего сайта. Не стесняйтесь изучать другие функции Essential Addons, чтобы еще больше персонализировать свой сайт WordPress.
Если у вас есть какие-либо вопросы о том, как туда добраться, сообщите нам об этом в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...