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