Контактная форма 7 Виджет Elementor: Стиль CF7 без CSS
Виджет контактной формы 7 в бесплатном плагине Master Addons размещает любую форму, в которую вы встроены Контактная форма 7 на странице Элементор и позволяет стилизовать его с панели.Выберите форму, выберите вариант дизайна, затем установите контейнер, заголовок, поля, метки, отправить сообщения кнопки и ошибки. контактная форма 7 по-прежнему обрабатывает поля и отправляет электронную почту. Четыре варианта дизайна бесплатны, и еще семь поставляются с Master Addons Pro. Вам нужен бесплатный плагин контактной формы 7, установленный и по крайней мере одна созданная форма.
Как добавить контактную форму 7 в Элементор
Вам нужен Элементор, свободный Контактная форма 7 плагин и бесплатный плагин Master Addons.
- Установите контактную форму 7 и создайте форму под ней Контакты, Добавить новое, с нужными вам полями и настройками электронной почты.
- Установить и активировать Мастер-адреса от WordPress.org.
- Отредактируйте свою страницу с помощью Elementor и найдите панель виджетов Контактная форма 7. Выберите тот, у кого есть значок Master Addons.
- В Выберите контактную форму, выберите форму.
- В стиле выберите вариант дизайна (стили с первого по четвертый бесплатны).
- Настройте контейнер, поля, метки, кнопку и ошибки, затем отправьте тестовое сообщение на странице в реальном времени.
Каждая обстановка описана в Настройки виджета контактной формы 7 гид.
Вариации дизайна: 4 бесплатных, 7 профессиональных
В стиле, Макет дизайна, выберите а Вариация дизайна. Стиль от первого до четвертого находятся в бесплатном плагине. Стиль от пятого до одиннадцатого типа нужен Мастер Аддоны Про. В каждом варианте поля и кнопки расположены вместе, и вы можете изменить любую часть после этого в разделах ниже.
- Каждый виджет на странице может использовать свой вариант, поэтому форма нижнего колонтитула и форма страницы контактов могут выглядеть по-разному.
- Выберите форму на вкладке "Содержимое" под Выберите контактную форму. В списке показаны формы, которые вы создали в контактной форме 7.
- Если контактная форма 7 не активна, виджет показывает уведомление вместо формы.
Контактная форма для стилизации 7: Виджет против формы CSS против Elementor Pro
Есть три распространенных способа получить красивую форму на сайте Elementor. Вот как они сравниваются.
| Виджет Master Addons CF7 | Пользовательский CSS на CF7 | Виджет формы Elementor Pro | |
|---|---|---|---|
| Формостроитель | Контактная форма 7 | Контактная форма 7 | Встроенный в Elementor Pro |
| Стайлинг | Управление панелью и 11 вариантов (4 бесплатно) | Записывайте и поддерживайте CSS | Панельные элементы управления |
| Стоимость | Бесплатно (7 вариантов нужны Pro) | Бесплатно | Нужен Элементор Про |
| Лучший для | Сайты, уже использующие CF7 | Разработчики, которые хотят полного контроля | Сайты Elementor Pro, которым нужны формы и действия в одном месте |
Если у вас уже есть формы контактной формы 7, виджет - это самый быстрый способ привести их в соответствие с вашим дизайном. Если вы используете другой плагин формы, см Ниндзя Формы или Гравитационные формы виджеты или Майлшимп виджет для регистрации.
Форма Контейнер и название
Форма Контейнер устанавливает цвет, градиент или фон изображения, a Верхняя граница цвета, Ширина формы и Форма Набивка. Название в разделе устанавливается цвет, расположение и типографика заголовка внутри разметки формы, если она есть в вашей форме.
- Установите ширину формы ниже 100%, чтобы центрировать узкую форму в широком столбце.
- Цвет верхней границы работает как простой акцент над формой.
- Набивка дает форму внутри цветной карты.
Поля и этикетки
Вход и текстовая область устанавливает цвет фона, цвет текста, заполнение, Ширина поля, радиус границы и границы для текстовых полей, текстовых областей и выбранных меню. Этикетки имеет свой цвет и типографику, поэтому названия полей могут стоять отдельно от того, что печатают посетители.
- Ширина поля работает в процентах, что удобно для макетов с двумя столбцами, встроенных в разметку формы CF7.
- Флажки, кнопки радио и входные данные файлов сохраняют стиль вашей темы или CF7.
- Сохраняйте достаточный контраст между фоном поля и текстом для доступности.
Отправить сообщения о кнопках и ошибках
Кнопка отправки имеет типографику плюс вкладки Normal и Hover: фон, цвет текста и цвет границы для Normal, а также цвет фона и текста для Hover. Ширина границы, цвет границы, радиус и заполнение установлены под вкладками.The Ошибки стили разделов Сообщения об ошибках под полями и Ошибки проверки для всей формы, а также на вкладке "Содержимое" вы можете показать или скрыть каждую из них.
- Кнопка по умолчанию фиолетовая (#6e00e9) с белым текстом, поэтому установите цвета вашего бренда.
- Скрытие ошибок поля делает форму более аккуратной, но посетители затем полагаются на сообщение уровня формы.
- Для кнопки нет управления значком. чтобы добавить один, см как добавить значок "Потрясающий шрифт" к кнопке "Отправить контактную форму 7".
Часто задаваемые вопросы для контактной формы 7
Как мне подключить это к существующим формам контактной формы 7?
Во вкладке Содержимое откройте Выберите контактную форму. В ней перечислены все созданные вами формы в Контактной форме 7. Выберите одну, и виджет отобразит ее с выбранным вами дизайном.
Будет ли моя форма по-прежнему отправлять электронные письма и работать так, как настроено в контактной форме 7?
Да. виджет только меняет вид формы Поля, настройки электронной почты, сообщения и защита от спама остаются в контактной форме 7 и работают так, как вы их там настроили.
Виджет контактной формы 7 бесплатен?
Да, виджет является частью бесплатного плагина Master Addons, а Style One to Style Four бесплатны.Style Five to Style Eleven need Мастер Аддоны Про. Сама контактная форма 7 также бесплатна.
Нужен ли мне плагин контактной формы 7?
Да. этот виджет стили Контакт Форма 7 формирует, поэтому бесплатный плагин Контакт Форма 7 должен быть установлен и активен. без него виджет показывает “Контакт Форма 7 не активирована” уведомление.
Что произойдет, если я добавлю новое поле в плагин Contact Form 7?
Редактировать форму в Контактной форме 7 и сохранить. виджет показывает обновленную форму, и ваши стили полей и меток применяются к новому полю, потому что они нацелены на все текстовые поля и метки.Обновите редактор Elementor, если предварительный просмотр не обновляется.
Нужно ли мне знать CSS, чтобы стилизовать свои формы?
Нет для цветов, границ, интервалов и типографики, которые все являются панельными элементами управления. раскладка внутри формы, например, размещение двух полей рядом, происходит из вашей разметки формы контактной формы 7.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
