Contact form 7 css стили: Изменяем стили для contact form 7. Три готовых решения

Сontact form 7 настройка внешнего вида. Изменяем дизайн форм

Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.

Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

1. Вкладка Contact Form 7 для правки формы.
2. Страницу на сайте с формой обратной связи.
3. Редактор с открытым файлом CSS.

Вкладки открыты приступим к внесению изменений, для начала немного подправим нашу форму.

• Добавляем классы к форме Contact Form 7.
• Стилизация формы Contact Form 7, работа с файлом style.css

Добавляем классы к форме Contact Form 7.

Когда мы откроем форму для правки мы увидим примерно следующую картину:

Такая форма обратной связи будет выглядеть примерно так:

Скучно, не пропорционально, скажем прямо не красиво.

Для изменения внешнего вида формы нужно немного поработать со стилями, но для начала добавим несколько классов в шаблон формы. Для этого открываем форму для правки (как на картинке выше) и дописываем следующие классы:

Писать мало, поэтому ошибок наделать трудно. В сети вы наверное находили советы без применения и добавления классов. Все дело в том что без добавления классов может возникнуть несколько проблем. К примеру вы захотите добавить сразу несколько форм на сайт, все они примут идентичный вид, а это не всегда удобно, по этому стоит использовать именно предложенный мной вариант.

Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.

Определяем ID формы на странице.

Для начала нужно понять что одна и та же форма будет иметь разные id на разных страницах сайта, так устроен плагин, он добавляет дополнительный параметр при каждом вызове формы. Сейчас разберем поподробнее.

Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.

В открывшемся коде ищем начало нашей формы, выглядит это так:

Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.

Как видим, идентификатор отличается всего несколькими цифрами. По этому для начала нужно определиться на какой странице будет расположена форма, а уж затем приступать к правке стилей.

Ну что, очередной шаг сделан, мы определили id, прописали наши классы, теперь приступим непосредственно к изменению внешнего вида.

Стилизация формы Contact Form 7, работа с файлом style.css

Забегая вперед скажу что предложенный мной вариант навряд покажется вам идеальным. Дело в том что каждый кто читает эти строки хочет видеть свою форму именно такой какой он ее представляет. Я не телепат, и не смогу угодить всем, но постараюсь дать вам наводку где и в каком месте искать информацию и что изменять. Так что простите сразу за возможное разочарование, панацеи нет, придется и вам немного поработать.

Изменяем цвет фона, отступы, шрифт формы.

После проделанной работы переходим к стилям. Сперва изменим (если это нужно) фоновый цвет формы, подгоним наши отступы, подберем необходимый шрифт и цвет текста. Все эти настройки будем проводить заранее зная ID. Как его узнать, мы рассматривали выше.

Сперва обратимся к файлу style.css, добавим первые правила для ID формы (добавлять нужно в самом низу файла), в моем случае это wpcf7-f172-p34-o1, вам же нужно подставить ваш идентификатор:

#wpcf7-f172-p34-o1 { margin: 5px; padding: 10px; background: #B3AFAF; font-family: Georgia, "Times New Roman", Times, serif; color: #000; }

Теперь разберем все подробнее:

1. Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
2. Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
3. Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
4. Цвет текста определяет свойство color, которое сейчас стоит в черном цвете (color: #000).

С данными параметрами можете экспериментировать сами, подбирать отступы, цвета и шрифты. Для этого нужно лишь изменить значение, сохранить новый вариант, обновить страницу и посмотреть изменения. Не бойтесь экспериментов, тут вы не сможете поломать ничего, в крайнем случае стили просто не сработают и вы легко все исправите как было.

Определяем отступы между полями, изменяем рамку.

Переходим к нашим полям, добавим отступов:

#wpcf7-f172-p34-o1 p{ margin:5px; }

Это отступы по краям полей, что бы текст и блоки не сливались в одно целое.

Следующим этапом будут рамки, я дам свой вариант, а вы сможете найти в сети множество вариантов которые вам понравятся и заменить их.

#wpcf7-f172-p34-o1 input,textarea { border: 3px double #000; }

О рамках немного подробнее. Значение в 3px это ширина рамки, double двойное использование (если не нужно, можно удалить это слово), #000 цвет рамки так же можете подобрать свой.

Можете сохранить изменения и посмотреть на то что у вас получилось. Далее перейдем непосредственно к полям и изменению их размеров и расположения.

Меняем ширину полей и их расположение.

Ранее мы немного изменили нашу форму и добавили классы, именно сейчас это и пригодится. По умолчанию ширина всех полей одинакова и это не очень красиво и удобно. Сейчас мы это исправим. Добавляем к нашему файлу стилей следующие правила:

.name-cf { float:left; padding: 2px; } .name-cf input { width: 270px; } .thems-cf input { width: 100%; } .clear-cf { clear: both; } .text-cf textarea { width: 100%; }

Теперь разберем все поподробнее:

1. Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
2. Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input { width: 270px; }). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
3. Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input { width: 100%;}). Если вы хотите свое, точное значение укажите его в пикселях.
4. Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input {width: 100%; }).
5. Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea {width: 100%;}).

Можно обновить файл стилей и посмотреть на изменения, если нужно, подогнать размеры под ваши нужды.

Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.

Переходим к нашей кнопке, выровняем по центру и добавим фон:

.submit-cf { width: 200px; /*ширина блока*/ height: 25px; /*высота*/ margin: 0 auto; /* Отступ слева и справа */ } .submit-cf input { width: 200px; background:#96B195; }

Традиционно объясняю что к чему:

1. Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
2. Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px, желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).

Сохраняем наши настройки и смотрим что у нас получилось:

Соглашусь далеко не шик, но зато адекватно смотрится в целом, ниже форма по умолчанию, думаю эффект очевиден. В любом случае мы научились изменять внешний вид формы Contact Form 7.

Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).

Поделиться статьей:

CF7 Skins for Contact Form 7 — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Разработка

Поддержка

CF7 Skins works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create Contact Form 7 forms — even if you don’t have HTML + CSS skills.

Includes a drag & drop Visual Editor together with range of compatible Templates and Styles.

Select from a list of compatible Templates that cover many common forms and then choose from a range of professional and beautiful Styles.

Each Template acts as an easy to follow guide, which can be adapted to your requirements. Every Style covers the full range of Contact Form 7 form elements.

CF7 Skins is highly customizable and easy to learn, even for beginners.

CF7 Skins now includes a drag & drop Visual Editor to help make building your Contact Form 7 forms much easier.

CF7 Skins Features

• Use a drag & drop Visual Editor to create your forms
• Select from a list of ready to use Templates
• Choose from a range of compatible form Styles
• Easily create complex forms using Contact Form 7 — without HTML and CSS knowledge

Our drag & drop Visual Editor includes support for all Contact Form 7 tags & options.

Read more about CF7 Skins

Website | Documentation | FAQ | Add-ons

Requires Contact Form 7 Version: 5.0 or later.

Range of Add-ons available

Our CF7 Skins Add-ons bring the functionality available in other premium WordPress form plugins directly within Contact Form 7.

CF7 Skins Pro — extra templates & styles

CF7 Skins Ready — extra useful styling options

CF7 Skins Multi — build multi-part forms

CF7 Skins Logic — add conditional logic to form fields

All Add-ons include access to premium email support.

Website | Documentation | FAQ | Add-ons

• CF7 Skins user interface showing Form, Template and Style tabs
• CF7 Skins provides a drag & drop Visual Editor for your forms
• CF7 Skins includes a range of Templates to help you get started
• CF7 Skins comes with many beautiful Styles for your finished forms
• Drag-and-drop new fields onto your form
• Edit each field to match your particular requirements
• Completed CF7 Skins Form

1. Visit Plugins > Add New in your WordPress admin area and search for Contact Form 7 Skins.
2. Locate the plugin in search results.
3. Click on the Install button to download and install the plugin.
4. Activate the plugin.

Alternate Installation Method

1. Download the plugin’s zip file and visit Plugins > Add New in your WordPress admin area.
2. Click on the Upload Plugin button and then simply upload the zip file.
3. WordPress will now upload the zip file from your computer to your website, extract it, and install the plugin.
4. Click on the Activate link to start using the plugin.

Having trouble? Learn more about how to install plugins on WordPress Codex.

Website | Documentation | FAQ | Add-ons

What does CF7 Skins do?

CF7 Skins is an add-on plugin for Contact Form 7. It extends the functionality of Contact Form 7 by adding a drag & drop Visual Editor

together with range of compatible Templates and Styles. You can learn more by visiting cf7skins.com

Is there Documentation available?

Yes, our in-depth Documentation is a great place to find detailed answers. It covers how to get started, how to customize your forms with CF7 Skins and everything else in between.

Many questions have been answered on the CF7 Skins FAQ.

Website | Documentation | FAQ | Add-ons

How do I get started?

There is a range of Tutorials available to help you get started using CF7 Skins.

Where can I get support?

Add-ons — if you have a current license you can post your questions to our Premium Email Support.

Free Version — you can use the WordPress Support forum. This is community based support offered by other CF7 Skin users (we visit the forum intermittently to assist with plugin bugs only).

What users have to say

Read testimonials from CF7 Skins users.

Do I need to have coding skills to use CF7 Skins?

Absolutely not. You can create and manage Contact Form 7 forms without any coding knowledge (100% drag & drop form builder).

it is very easy to build contact form 7 forms with this plugin, easy drag and drop option is available with custom styles

CF7 Skins for Contact Form 7 is a messed up plugin. It crashed my entire site. Please be careful to try this plugin in the production environment. Contacted Support and they dont even respond. Zero star for this plugin and plugin author.

We have a problem with the plugin and contacted the support. We got an automatic response in which they told us they contact us within 24 hours. 2 weeks later we still haven’t heard of them. Not what we expect from a premium plugin support!

The drag and drop function doesn’t show anything, templates and skins are uglier than simple HTML ones

Tested this and it seems to work just fine, however its quite complicated to set up and, for me, was slower than using the default Contact Form 7 editor. It does help if you want to change the style of the forms on your site and don’t know html but if you are looking for a simple drag and drop try interface such as you may have come across on other form plugins then this may confuse you. I was looking at it for a clients site but I don’t think they would be able to work out how to use it.

I have found the skins great for appearance, but cannot find enough help to know how to use is correctly and my whole form keeps getting messed up :(. REALLY disappointed in the support for this and for CF7. Almost every tutorial is done by someone who is ESL and is not understandable. 🙁

Посмотреть все 20 отзывов

«CF7 Skins for Contact Form 7» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• Neil Murray

«CF7 Skins for Contact Form 7» переведён на 6 языков. Благодарим переводчиков за их работу.

Перевести «CF7 Skins for Contact Form 7» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

2.5.3 — 2022-04-20

TWEAK: Don’t use variables or defines as text domain shortcuts

2.5.2 — 2022-03-10

FIX: Prevent sanitization error

2.5.1 — 2022-01-14

FIX: Remove security vulnerability
FIX: Ensure duplicating enclosed fields creates unique field IDs
TWEAK: Stabilize communication between WordPress & React/JavaScript

2.5.0 — 2021-08-31

FIX: Add DOMDocument admin notice if not available
TWEAK: Use @wordpress/data for data management
TWEAK: Use @wordpress/scripts for development
TWEAK: Move selected template and style info
TWEAK: Review CSS responsiveness
TWEAK: Allow adding extra CF7 Skins Tabs

2.4.2 — 2021-03-26

FIX: Stop CF7 Area Tab content being changed when deselect Template
TWEAK: Prevent checking multiple options for exclusive checkboxes
TWEAK: Remove asterisk symbol from change type select dropdown list
TWEAK: Contact Form 7 5. 4 removed jQuery frontend dependency

2.4.1 — 2020-12-11

FIX: Support WP 5.6 jQuery changes — replace jQuery tipsy with balloon-css

2.4 — 2020-08-11

FEATURE: Add Templates
FEATURE: Add support for Other field in CF7 Skins Visual Editor
FIX: Support WP 5.5 changes

2.3.3 — 2020-07-07

• TWEAK: Update software licenser

2.3.2 — 2020-06-30

• TWEAK: Enable translation of Pro Tips

2.3.1 — 2020-06-18

• FIX: Ensure Save Visual saves changed forms

2.3 — 2020-05-20

• FEATURE: Make adding asterisk to required fields optional
• TWEAK: Make CF7 Skins Settings clearer for users
• TWEAK: Enable translation of all JavaScript
• TWEAK: Minimize built JS & CSS files

2.2.2 — 2020-03-11

• FIX: Checkboxes not displayed in style

2.2.1 — 2020-01-14

• FIX: Improve getting list of all CF7 shortcode tags in CF7 form content

2.

2 — 2020-01-07

• FEATURE: Add Styles

2.1.4 — 2019-10-02

• FIX: Remove & replace clearfix removed/deprecated in WordPress 5.0 — had conflict with some other WP plugins.

2.1.3 — 2019-07-03

• TWEAK: Enable export of individual form.

2.1.2 — 2019-04-11

• FIX: Encode to UTF-8 when loading HTML

2.1.1 — 2019-03-04

• FIX: Remove opt-in data collection — security fix

2.1 — 2019-02-25

• FEATURE: Change type of CF7 Tag
• FEATURE: Copy visual form data option
• FIX: Remove duplicate from ReCAPTCHA and Submit fields
• TWEAK: CF7 acceptance tag options modified
• TWEAK: Add surrounding LIST-LI to additional CF7 Tag
• TWEAK: Visual form tab expandable
• TWEAK: Pro Tips added

2.0.2 — 2019-02-08

• FIX: Ensure Visual editor shown when add new form if have CF7 configuration error in CF7 5.1+
• TWEAK: Add minimum required PHP & CF7 versions

2.

0.1 — 2018-08-13

• FIX: Prevent JavaScript conflict with Yoast SEO

2.0 — 2018-06-19

• FEATURE: Add drag & drop Visual Editor
• FEATURE: Display Notices when update plugin
• FIX: Update template files to match visual files
• FIX: Ensure CF7 Skins connects to CF7 Form section
• TWEAK: Show Getting Started Tab when activate plugin
• TWEAK: Ensure deselecting within Template or Style List also deselects in Details or Expanded View

1.2.2 — 2018-01-11

• FEATURE: Add opt-in data collection
• FIX: Improve context and conjugation issues for non-Roman languages
• FIX: Ensure CF7 Skins scripts are loaded if CF7 default script de-registered
• TWEAK: Hide Info Tabs at WordPress Small screen: 850px
• TWEAK: Ensure active Tab is highlighted
• TWEAK: Remove WP hidden class

1.2.1 — 2017-06-07

• FIX: WPCF7_Shortcode & WPCF7_ShortcodeManager deprecated in CF7 4. 6
• FIX: Ensure key input exists when activating license
• FIX: Remove locale parameter for CF7 >= 4.4
• FIX: Display activation log data
• FIX: Stop default Ready CSS over-writing selected Style CSS
• TWEAK: Add JS trigger for React components
• TWEAK: Add Skins Tabs via filter
• TWEAK: Remove Default CF7 form Template
• TWEAK: Include typicons
• TWEAK: Save version installed when update
• TWEAK: Correct Info Tabs text

1.2 — 2016-04-08

• FEATURE: Show Template & Style selected in Skin Info Area
• FEATURE: Info Tabs in Skins Meta box & CF7 Skins Settings
• FEATURE: Add Styles
• FIX: Copy CF7 Skins data when CF7 Duplicate used
• FIX: Deselect Template & Style
• TWEAK: Check CF7 User Permissions
• TWEAK: Update colors on Admin messages
• TWEAK: Suitable for wordpress.org translation

1.1.2 — 2016-03-10

• FIX: Ensure CF7 Skins Styles are enqueued if Contact Form 7 styles are de-registered
• FIX: Ensure update version checking is operating
• FIX: Remove undefined index notice when updating multiple plugins
• FIX: Skins Metabox toggle not sticking

1.

1.1 — 2015-09-21

• FEATURE: Add support for Ready styles
• FIX: Enqueue styles for non-content shortcodes
• TWEAK: Add tabs & consistent spacing to templates
• TWEAK: Improve readability of Logs tab

1.1 — 2015-06-30

• FEATURE: Add Styles
• FIX: Ensure all plugin data is deleted
• TWEAK: Enqueue only where necessary within Contact Form 7
• TWEAK: Update Help Ballons

1.0.2 — 2015-05-29

• FIX: wpcf7_add_meta_boxes action removed in Contact Form 7 4.2
• FIX: Parse the CF7 shortcode ID in single or nested shortcodes
• FIX: Ensure JavaScript finds active textarea
• TWEAK: Add cf7skins_form_classes filter hook

1.0.1 — 2015-05-06

• FIX: Default CSS overriding input & textarea Styles

1.0 — 2015-04-09

• Первый релиз

Мета

• Версия: 2.5.3
• Обновление: 10 месяцев назад
• Активных установок: 30 000+
• Версия WordPress: 4. 3 или выше
• Совместим вплоть до: 6.0.3
• Версия PHP: 5.6 или выше
• Языки:

  Czech, English (US), German, Indonesian, Italian, Japanese и Spanish (Spain).

  Перевести на ваш язык

• Метки:

  contact formcontact form 7contact form 7 addoncontact form 7 stylecontact form 7 theme

• Дополнительно

Оценки

Посмотреть все

• 5 звёзд 10
• 4 звезды 2
• 3 звезды 3
• 2 звезды 2
• 1 звезда 3

Войдите, чтобы оставить отзыв.

Участники

• Neil Murray

Поддержка

Решено проблем за последние 2 месяца:

0 из 2

Перейти в форум поддержки

Контактная форма для стайлинга | Контактная форма 7

Как оформить контактную форму? Это частый вопрос на форуме поддержки. Contact Form 7 не предоставляет никаких настроек стиля. Редактирование таблиц стилей CSS — лучший способ оформления контактных форм. В этой статье я покажу вам несколько важных шагов по стилизации ваших контактных форм. Если вы знаете о CSS, мое объяснение простое. Если вы не знакомы с CSS, сначала изучите CSS на этих информативных веб-сайтах:

• Изучение CSS — W3C
• Учебное пособие по CSS — W3Schools
• Изучение CSS | MDN – Mozilla Developer Network
• Основы CSS

Какую таблицу стилей следует редактировать?

Подойдет любая таблица стилей, но я рекомендую отредактировать основную таблицу стилей вашей темы. Лучше не редактировать таблицы стилей в плагине, потому что ваши изменения будут перезаписаны при обновлении плагина. Темы можно обновлять, но обычно они обновляются реже, чем плагины. Если ваша тема часто обновляется, вы можете создать дочернюю тему и управлять таблицей стилей в дочерней теме.

Вы также можете использовать Дополнительный CSS , и он имеет несколько преимуществ по сравнению с прямым изменением таблиц стилей темы.

Стилизация полей контактной формы

Давайте посмотрим, как мы можем стилизовать отдельные поля в контактной форме. Существует несколько типов полей ввода. Наиболее распространенным полем является однострочное поле ввода текста, поэтому давайте добавим для него правило стиля:

.
ввод[тип="текст"]
{
    цвет фона: #fff;
    цвет: #000;
    ширина: 50%;
}
 

Этот селектор соответствует всем ввод элементов, у которых атрибут типа имеет точно значение text (т. е. однострочные текстовые поля ввода). Кроме того, это правило стиля имеет три свойства, определяющие белый цвет в качестве цвета фона, черный цвет в качестве цвета переднего плана (текста) и 50% в качестве ширины поля.

Возможно, вы захотите применить это правило стиля к другим типам полей. Добавим селекторы для поля ввода адреса электронной почты и области ввода многострочного текста:

ввод[тип="текст"],
ввод[тип="электронная почта"],
текстовая область
{
    цвет фона: #fff;
    цвет: #000;
    ширина: 50%;
}
 

Теперь этот стиль применяется ко всем частям вашего сайта. Вы можете ограничить его контактными формами. Форма Contact Form 7 имеет элемент-оболочку с классом wpcf7 . Вы можете ограничить область цели, добавив селекторы предков:

.wpcf7 ввод[тип="текст"],
.wpcf7 ввод [тип = "электронная почта"],
.wpcf7 текстовое поле
{
    цвет фона: #fff;
    цвет: #000;
    ширина: 50%;
}
 

См. также:

• Почему поле ввода моего адреса электронной почты отличается от других полей ввода текста?
• Пользовательский макет для флажков и радиокнопок

Стилизация определенных полей

Возможно, вы захотите задать стиль только определенным полям. Сначала добавьте параметр id или class в теги форм полей, которые вы хотите стилизовать:

 [text text-123 id:very-special-field] 

Затем добавьте правила стиля, используя идентификатор или класс:

# очень специальное поле
{
    цвет: #f00;
    граница: 1px сплошная #f00;
}
 

Оформление всей контактной формы

Как я упоминал ранее, элемент верхнего уровня контактной формы имеет класс wpcf7 . Чтобы оформить всю контактную форму, добавьте правила стиля для селектора класса:

.wpcf7
{
    цвет фона: #f7f7f7;
    граница: 2px сплошная #0f0;
}
 

Это правило стиля придает контактным формам светло-серый фон и зеленую рамку.

См. также: Можно ли добавить атрибуты id и class к элементу формы?

Стилизация ответных сообщений

Ответное сообщение в нижней части контактной формы по умолчанию имеет wpcf7-response-output , поэтому вы можете применить правило стиля к этому классу для оформления ответного сообщения.

Чтобы выбрать стиль на основе статуса контактной формы, обратитесь к атрибуту класса элемента формы . Он должен иметь класс, отражающий текущий статус. Возможные значения: инициализация , отправлено , не удалось , прервано , спам , недействительно или непринято .

В качестве примера стиля см. следующие правила стиля по умолчанию, которые контактная форма 7 5.2.2 применяет к ответному сообщению:

Форма .wpcf7 .wpcf7-response-output {
    поля: 2em 0.5em 1em;
    отступы: 0.2em 1em;
    граница: 2px сплошная #00a0d2; /* Синий */
}
.wpcf7 form.init .wpcf7-ответ-выход {
    дисплей: нет;
}
.wpcf7 form.sent .wpcf7-response-output {
    цвет границы: #46b450; /* Зеленый */
}
.wpcf7 form.failed .wpcf7-ответ-выход,
.wpcf7 form.aborted .wpcf7-response-output {
    цвет границы: #dc3232; /* Красный */
}
.wpcf7 form.spam .wpcf7-response-output {
    цвет границы: #f56e28; /* Апельсин */
}
. wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    цвет границы: #ffb900; /* Желтый */
}
 

См. также: Расположение окна сообщения ответа в любом месте

Стилизация сообщений об ошибках проверки

Когда поле имеет недопустимое значение, под полем появляется сообщение об ошибке проверки. Поскольку элемент сообщения об ошибке проверки имеет класс wpcf7-not-valid-tip , этот класс можно использовать для оформления сообщений об ошибках проверки.

Контактная форма 7 5.2.2 по умолчанию применяет следующее правило стиля:

.wpcf7-недопустимый совет {
    цвет: #dc3232;
    размер шрифта: 1em;
    вес шрифта: нормальный;
    дисплей: блок;
}
 

См. также: Настройка сообщений об ошибках проверки

Подобно этому:

Нравится Загрузка…

Как настроить стиль контактной формы 7 в соответствии с вашим веб-сайтом

Более миллиона активных установок, контактная форма 7 на сегодняшний день является одним из самых популярных плагинов WordPress. Его популярность, вероятно, во многом связана с правдой, стоящей за его описанием: «Простой, но гибкий».

Contact Form 7 позволяет создавать несколько контактных форм, используя только простую HTML-разметку (которую он генерирует для вас). После создания каждую форму можно быстро развернуть, разместив соответствующий короткий код там, где вы хотите, чтобы форма отображалась; на странице, в записи или в области виджета. Сообщения, отправленные через формы, отправляются на адрес электронной почты, указанный в настройках плагина, а со спамом борются за счет поддержки CAPTCHA и Akismet.

Контактная форма 7 настолько проста, что кажется, буквально каждый может эффективно ее использовать. Стиль тоже должен быть простым. Но, возможно, слишком просто для некоторых. По умолчанию плагин Contact Form 7 не стилизует свои формы. Любой стиль, который у них есть, является результатом стилей по умолчанию, присутствующих в таблице стилей темы WordPress.

Обычно приводит к чему-то довольно простому, например:

К сожалению, такая форма, хотя и простая и гибкая, может быть не так красиво оформлена, как другие элементы на веб-сайте. В результате многие счастливые пользователи ищут альтернативу контактной форме 7 с большим количеством вариантов стиля. К счастью, с небольшим количеством CSS альтернатива плагина не требуется.

В сегодняшнем посте я поделюсь серией советов, которые откроют широкий спектр возможностей оформления Contact Form 7 для всех, использующих любую тему.

• 1 Как настроить стиль контактной формы 7 в соответствии с вашим веб-сайтом
• 2 Где редактировать контактную форму 7 CSS (и зачем)
• 3 Как создать стили формы для всего сайта
• 4 Как создать стили полей формы для всего сайта
• 5 Как стилизовать конкретную форму
• 6 Как стилизовать определенные поля
• 7 Как создавать собственные макеты форм для флажков и круговых кнопок
• 8 Бонусный совет: как удалить заголовки полей и вместо этого использовать текст-заполнитель
• 9 В заключение

Как настроить стиль контактной формы 7 в соответствии с вашим веб-сайтом

Подпишитесь на наш канал Youtube

Где редактировать контактную форму 7 CSS (и почему)

Важно, чтобы при добавлении пользовательского CSS вы не добавляли его в таблицу стилей контактной формы 7 или родительской темы. Любые внесенные вами изменения или дополнения будут перезаписаны, как только тема и/или плагин будут обновлены.

Вместо этого вы захотите добавить приведенный ниже CSS в CSS вашей дочерней темы. Вы также можете использовать функцию пользовательского CSS в Jetpack, или, если ваша тема предоставляет раздел в своей панели администратора для пользовательского CSS, вы также можете использовать его.

Хорошо, теперь, когда мы знаем, где разместить стили, которые мы рассмотрим ниже, давайте начнем!

Как создать стили формы для всего сайта

Давайте начнем с внесения некоторых общих правок, которые будут применяться ко всей форме. Мы можем сделать это с помощью селектора классов .wpcf7 , а затем добавить под ним стили.

(Я также настоятельно рекомендую вам разместить закомментированный заголовок, который я написал ниже, в вашей таблице стилей, чтобы обозначить, где начинаются стили вашей контактной формы 7.)

/* Контактная форма 7 стилей
-------------------*/

.wpcf7 {

цвет фона: #F0F0F0;

граница: 5px сплошная #666666;

}

 

После добавления приведенного выше кода в таблицу стилей каждая форма, которую вы создаете с помощью Contact Form 7, будет иметь стили фона и границ, которые вы только что определили. Ниже приведен пример.

Как видите, есть некоторые проблемы с интервалами. Чтобы исправить это, вам нужно настроить поля между границей и внутренними элементами формы. Вы можете сделать это с помощью кода ниже.

.wpcf7-форма {

поле слева: 25px;

поле справа: 25px;

поле сверху: 25px;

 

На моем тестовом сайте это привело к следующему:

Примечание. Эти стили могут немного по-разному влиять на ваши формы из-за того, что мы, скорее всего, работаем с разными темами. Это не означает, что этот код не будет работать для вас, просто вам, возможно, придется немного изменить цифры, чтобы все было правильно для вашего сайта.

Как создать стили полей формы для всего сайта

Один из наиболее частых запросов, которые возникают у пользователей при оформлении контактной формы 7, заключается в том, как они могут настроить ширину полей. В частности, область сообщений, которая не простирается очень далеко.

Приведенный ниже код расширит область сообщения до желаемой ширины (при настройке). Я установил свой в примере на 95%, так как это выглядело лучше всего в моем воображаемом варианте использования. Вы также можете настроить его в соответствии с вашими потребностями, используя процент или фиксированное количество пикселей.

.wpcf7-текстовое поле {

ширина: 85%;

}

 

Вы также можете настроить ширину других полей, настроив селектор класса ввода .

.wpcf7 ввод {

ширина: 50%;

}

 

Если вы не хотите настраивать все свои поля ввода по одним и тем же критериям, вы можете немного углубиться, выбрав только те, которые вас интересуют. В приведенном ниже примере я решил просто изменить свои текстовые поля, чтобы моя отправка кнопка также не влияет.

.wpcf7-текст {
ширина: 50%;
}

 

После всех вышеперечисленных изменений я смог оформить форму, которую вы видите ниже.

Я лично не хотел менять цвет кнопки, но думаю, что это, скорее всего, еще одно распространенное желание. Поэтому, если вы хотите изменить цвет кнопки, вы можете использовать приведенный ниже CSS для экспериментов.

.wpcf7-отправить {

фон: #555555;

цвет: #ffffff;

}

 

С этими фрагментами CSS каждая форма, созданная с помощью Contact Form 7, будет выглядеть так, как показано на изображении выше. Но что происходит, когда вы хотите, чтобы одна конкретная форма отличалась от всех остальных?

Как оформить конкретную форму

Получение определенного идентификатора CSS, необходимого для изменения стиля в определенной форме, может быть немного хлопотным, но это возможно, если немного повозиться.

Первое, что вам нужно сделать, это добавить шорткод формы на свой сайт и просмотреть его. (Вы заметите, что внутри этого шорткода есть номер идентификатора, но на самом деле это не полный идентификатор, который вам понадобится.)

Затем, используя функцию проверки элемента Google Chrome или что-то подобное в другом браузере, взгляните на код формы. Используя это, вы найдете полный идентификатор формы.

В моем случае идентификационный номер в моем шорткоде был 4407 . Полный идентификатор оказался wpcf7-f4407-p4405-o1 . Это означало, что я мог вносить дальнейшие изменения только в эту конкретную форму, используя приведенный ниже код с различными критериями, которые отличались от моих настроек для всего сайта.

#wpcf7-f4407-p4405-o1 {
цвет фона: #333333;
граница: 5px сплошная #0074A2;
}

 

Как стилизовать определенные поля

То же самое можно сделать с определенными полями. Вместо того, чтобы отслеживать определенный класс CSS или идентификатор в браузере, все, что вам нужно сделать, это добавить его в конструктор форм.

Когда вы создаете тег для размещения в построителе форм, вы заметите, что есть два варианта создания идентификатора, класса или обоих.

В этом примере я решил создать класс с именем custom-field . Если вы сделаете то же самое (или что-то подобное), вы сможете стилизовать только это поле, используя свой новый идентификатор (или класс), как показано ниже.

# настраиваемое поле {

цвет: #ffffff;

граница: 2px сплошная #333333;

}

 

Как создавать настраиваемые макеты форм для флажков и круговых кнопок

По умолчанию флажки и радиусы отображаются слева направо.

Но из-за личных предпочтений или конкретного варианта использования, в котором может быть предпочтительнее отображать их сверху вниз, вы можете использовать один из двух вариантов ниже.

Используйте это, чтобы отобразить флажки или радиальные кнопки сверху вниз и слева.

.wpcf7-элемент-списка {
дисплей: блок;
}

 

Используйте это, чтобы отобразить флажки и радиальные кнопки сверху вниз и справа. Также убедитесь, что при создании тега для этой опции установлен флажок «Сначала метка».

.wpcf7-элемент-списка {
отображение: таблица-строка;
}

.wpcf7-элемент-списка * {
отображение: таблица-ячейка;
}

 

Дополнительный совет: как удалить заголовки полей и использовать вместо них текст-заполнитель

Этот совет не требует использования CSS, как другие выше, а скорее простой настройки разметки, используемой в конструкторе форм Contact Form 7.

Иногда нет необходимости иметь заголовки полей, особенно когда вы можете поместить текст-заполнитель в сами поля, поясняющий, какая информация там содержится.

Если это так на вашем сайте, то все, что вам нужно сделать, это удалить заголовки в конструкторе форм и добавить замещающий текст, как я сделал в примере ниже.

[email* ваш адрес электронной почты заполнитель "Адрес электронной почты"]



[textarea местозаполнитель вашего сообщения "Поговори со мной"]

 

В результате получается более чистая форма с меньшим количеством беспорядка.