The Контактная форма 7 Элемент от Master Addons это специализированный виджет, используемый для интеграции и стилизации форм, созданных с использованием популярного плагина Contact Form 7 внутри вас Элементорные конструкции. Это позволяет вам использовать надежную функциональность CF7, одновременно получая мощную визуальную настройку с помощью Elementor.
Используя элемент контактной формы 7, можно
- Выбрать любая существующая форма контакта 7 из раскрывающегося списка.
- Выбирайте из нескольких Вариации дизайна (Стиль Один через Стиль Одиннадцать).
- Контролируйте видимость Сообщения об ошибках и Ошибки проверки.
- Полностью настроить Форма Контейнер, Поля ввода и текстовой области, Этикеткии Кнопка отправки для Нормальный и Наведите курсор государства.
- Стиль отображения Сообщения об ошибках и проверке.
Итак, посмотрим, как добавить и настроить этот элемент.
Что такое виджет контактной формы 7 в Elementor? #
Виджет Contact Form 7 Elementor - это элемент Master Addons, который отображает любую существующую форму Contact Form 7 внутри Elementor и дает вам полный визуальный контроль над ее дизайном. Он поддерживает CF7, обрабатывая логику формы и доставку по электронной почте, в то время как вы стилизуете контейнер, поля ввода, метки, кнопку отправки и сообщения об ошибках с вкладки Elementor's Style. Master Addons поставляет одиннадцать готовых предустановок дизайна (от Style One до Style Eleven), поэтому вы можете изменить стиль простой формы CF7, чтобы он соответствовал вашему сайту, не записывая никаких CSS. Это часть бесплатного Виджеты и расширения Master Addgets библиотека.
Добавление и настройка элемента контактной формы 7 #
Чтобы добавить стилизованную форму контакта 7 в Elementor: отредактируйте свою страницу с помощью Elementor, перетащите ее Контактная форма 7 виджет на холсте, выберите форму из раскрывающегося списка, выберите один из одиннадцати вариантов дизайна, затем отрегулируйте контейнер, поля, этикетки и кнопку отправки Стиль вкладка. Шаги ниже подробно проходят через каждую часть.
Выполните следующие действия, чтобы добавить и настроить элемент контактной формы 7 на любой странице вашего веб-сайта.
Шаг 1: Создайте или отредактируйте страницу #
- С панели управления WordPress перейдите по адресу Страницы → Добавить новое для создания новой страницы. также можно выбрать существующую страницу и нажать Редактировать.
- Далее нажмите “Редактировать с помощью Elementorкнопка ””.
Шаг 2: Найдите элемент контактной формы 7 #
- В левой панели Элементор используйте строку поиска, чтобы найти “Контактная форма 7.”
- Перетащите дополнение в нужный раздел страницы.
Шаг 3: Настройте настройки контактной формы 7 #
Разместив надстройку, вы найдете разделы настройки на левой панели, в первую очередь под Содержание и Стиль вкладки.
Вкладка Содержимое #
Здесь вы выбираете форму и определяете видимость ошибок.
Контактная форма 7: #
- Выберите контактную форму: Выберите конкретную форму контактной формы 7, которую вы хотите отобразить, из раскрывающегося списка.
- Стиль ошибок (сообщения об ошибках/ошибки проверки): Выберите, стоит ли Шоу или Скрывать сообщения об общем успехе/неудаче подачи и ошибки проверки для конкретных полей.
Макет дизайна: #
- Вариации дизайна: Выберите заранее разработанный стиль формы (Стиль Один через Стиль Одиннадцать).
Вкладка Стиль #
Здесь вы контролируете внешний вид формы и ее элементов.
Форма Контейнер: #
- Тип фона: Установите фоновый стиль для всего контейнера формы: Классика или Градиент.
- Цвет верхней части границы: Установите цвет верхней границы контейнера.
- Ширина формы (%)/Набивка формы: Контролируйте размер и внутреннее расстояние контейнера формы.
Название: #
- Цвет/Выравнивание/Типография: Стиль названия формы (если таковая присутствует в структуре CF7).
Входная и текстовая область: #
- Цвет фона/Цвет текста: Установите цвет фона и текста для всех полей ввода и текстовой области.
- Набивка: Отрегулируйте внутреннее расстояние между полями.
- Ширина поля (%): Установите горизонтальный размер полей.
- Тип границы/Радиус границы: Установите стиль границы и закругленные углы для полей ввода.
Этикетки: #
- Цвет / Типографика: Стиль цвета текста и настройки шрифтов для меток полей.
Кнопка отправки: #
- Типографика кнопок: Управляйте настройками шрифта для текста кнопки.
- Нормальный/Наведите курсор: Установите следующее для кнопки в обоих состояниях:
- Тип фона
- Цвет текста
- Цвет границы
- Радиус границы/Набивка: Установите закругленные углы и внутреннее расстояние между кнопками.
Ошибки: #
- Сообщения об ошибках (общие): Стиль основных сообщений об ошибках отправки (часто сообщений о глобальных ошибках/успехах).
- Цвет текста/Цвет фона/Тип границы.
- Ошибки проверки (полевой): Стиль сообщений об ошибках, которые появляются под отдельными полями (например, “Это поле обязательно”).
- Цвет фона/Цвет текста/Тип границы.
Шаг 4: Сохраните и опубликуйте свою страницу #
Как только все настроили по душе:
- Нажмите “Публиковатькнопка ”” (если это новая страница) или “Обновить”” (если редактировать существующую страницу).
- Проверьте сообщения о подаче формы и ошибках на интерфейсе, чтобы убедиться, что все стили применяются правильно.
Часто задаваемые вопросы #
Как мне оформить контактную форму 7 в Elementor?
Добавьте виджет формы 7 контактов главных аддонов на свою страницу Элементор, выберите форму из раскрывающегося списка, затем откройте вкладку Стиль. оттуда вы можете изменить стиль контейнера формы, полей ввода и текстовой области, этикеток, кнопки отправки и сообщений об ошибках. Вы также можете выбрать один из одиннадцати готовых предустановок дизайна, чтобы пропустить ручной стиль.
Бесплатен ли виджет контактной формы 7 в главных дополнениях?
Да. виджет контактной формы 7 является частью бесплатного Виджеты и расширения Master Addgets библиотека. Вам нужен только бесплатный плагин Contact Form 7 и установленные и активные главные дополнения; для стилизации ваших форм не требуется никакого Elementor Pro или платного обновления.
Сколько стилей дизайна контактной формы 7 включают в себя Master Addons?
Мастер-аддоны включают одиннадцать предварительно построенных вариантов дизайна, маркированных от Style One до Style Eleven. Выберите один в разделе "Макет дизайна", чтобы мгновенно нанести полный вид, а затем отрегулируйте цвета, границы и типографику на вкладке "Стиль", чтобы соответствовать своему бренду.
Могу ли я добавить значок "Потрясающий шрифт" к кнопке отправки контактной формы 7?
Да. Помимо встроенного стиля кнопок в этом виджете, вы можете добавить значок к кнопке отправки, следуя нашему руководству о том, как это сделать нанесите значок "Потрясающий шрифт" на кнопку "Отправить контактную форму 7". Он хорошо сочетается со стилями кнопок "Нормальный" и "Навести порядок", которые вы здесь установили.
Почему мой стиль контактной формы 7 не отображается в Elementor?
Это почти всегда кэширование или конфликт плагинов.Подтвердите, что как контактная форма 7, так и главные аддоны активны, убедитесь, что вы используете виджет контактной формы 7 главных аддонов (а не простой короткий код CF7), затем очистите свой кэш страницы и жесткий перезагрузка. сохранение активов также помогает; см. наши советы по этому вопросу ускорьте работу вашего сайта Elementor.
