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