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.

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

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

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

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

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

Классы добавлены, пока ничего не изменилось, следующим шагом будет определение 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.

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

Contact Form 7 — как изменить внешний вид формы

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

Начнем с использования специально созданного для Contact form 7 плагина.

Contact Form 7 Style

Этот плагин находится в библиотеке WordPress. Просто введите его название или просто название плагина контактной формы и он будет выложен на первой странице. Активируем его.

Теперь при редакции новой формы, к четырем вкладкам настроек, добавляется пятая, которая так и называется “Contact Form 7 Style шаблоны”

Если Вы переходите на эту вкладку, то просто выбираете тот шаблон, который вам понравился (их несколько, просмотреть их можно перелистывая страницы “карусели” с шаблонами) и сохраняете выбор.

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

Теперь пройдемся по настройкам самого плагина. Вы их найдете в левом меню консоли блога.

All Styles – Все стили

В этой опции показаны все стили в виде списка. Если нажать под стилем формы на ссылку “Свойства”, то откроются настройки всех созданных вами форм в плагине Contact form 7. Каждая будет обозначена чек боксом. Установив напротив выбранной формы галочку, вы не заходя в настройке присваиваете ей вид того стиля, который выбрали. Или наоборот – убираете раннее выбранный. Очень удобно.

Add new – Добавить новую

Это страница конструктора формы. Первое что необходимо сделать – дать ей название. Здесь же – предварительный просмотр и возможность ее публикации или сохранения.

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

Здесь же есть очень большой выбор дополнительных шрифтов.

Теперь самое интересное – работа с настройками формы. Здесь все очень просто – выбираете кнопку соответствующей настройки – настройки самой формы (ширина, длина, цвет), натройка кнопки, текстового поля, радиокнопок и т.д. И работаете с ними. Если возникают вопросы – просто переведите текст.

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

После завершения работы – сохраните стиль формы.

CSS Editor – Настройки CSS

Здесь вы найдет поле для введения разметки CSS, которую невозможно добавить через настройки, указанные выше.

Setting – Настройки плагина

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

System Status – Обратная связь с поддержкой плагина.

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

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

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях

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

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).

Переводы

• Indonesian (Bahasa Indonesia; id_ID) — Sastra Manurung

Website | Documentation | FAQ | Add-ons

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. 🙁

The plugin does not support AMP, AMP for WP.
My support ticket was closed today without any explanation.

Also a year ago there was another problem with the radio checkboxes. Until now I didn’t receive any news. They told me that CF7 changed their code and the logic with radio checkboxes do not work as expected.

Has broken the design of the form page and we had to restore a backup

The templates are pretty good.
Maybe to modernize a little bit to make them more modern (2018)
Works well.

The support is very responsive and kind.

Works with a lot of CF7 plugin, and does not crash or crush, the other CF7 plugins, which is rare. $

Other CF7 design plugins, overwrites the main CF7 plugins.
This one is not 🙂

I will take pro version, I finished test with free version.

thank you for your kindness

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

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

Участники

2.4.2 — 2021-03-26

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
FIX: Stop CF7 Area Tab content being changed when deselect Template

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

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

Стили для контактной формы плагина Contact Form 7

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

И сегодня рассмотрим плагин Contact Form 7 Style, который предназначен для того, чтобы визуально создавать стили для Contact Form 7. Изначально, кроме своего оформления, у плагина есть готовые стили формы в виде шаблонов. Где вы просто выбираете вариант шаблона и ставите галочку какой форме, созданной вами ранее, применить это оформление. Давайте разберем это на деле.

Настройка плагина Contact Form 7 Style

Пропускаем часть объяснения установки модуля и создание форм, так как тема обзора направлена именно на стилизацию формы. Для этого, как говорилось выше, мы воспользуемся специальным плагином. После его установки в боковой панели добавится раздел «Contact Styles» с пяти подразделами.

В первом разделе «All Styles» находится уже готовые шаблоны стилей формы, и тут же будут сохраняться стили созданными вами. При наведении курсора мыши на один из шаблонов, появляются дополнительные кнопки управления: Изменить, Свойства, Удалить. При нажатии на кнопку «Свойства» отобразится все доступные формы связи имеющиеся на вашем сайте. Где нужно только поставить галочку напротив нужной формы и сохранить изменения.

В разделе «Add New» можно самостоятельно сделать шаблон для формы со своими стилями, как это показано выше на видео. Переключаясь между элементами формы и визуально оформлять все поля как в нормальном состоянии, так и в hover эффекте.

В разделе «CSS Editor» присутствует редактор для пользовательских стилей. Это на случай если невозможно что-то сделать в визуальном редакторе.

Contact Form 7 Style

Как стилизовать формы Contact Form 7 в WordPress

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

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

У нас есть пошаговое руководство по созданию контактной формы в WordPress.

Начало работы

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

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

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

Мы будем стилизовать формы Contact Form 7 с помощью CSS. Весь CSS входит в таблицу стилей вашей темы или дочерней темы.

Стилизация форм Contact Form 7 в WordPress

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

Каждая контактная форма использует CSS-класс .wpcf7, который вы можете использовать для стилизации вашей формы.

В этом примере мы используем шрифт Google Lora в наших полях ввода. Узнайте, как добавить шрифты Google в WordPress.

div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;   
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Так выглядела наша контактная форма после применения этого CSS.

Стилизация нескольких форм контактов 7

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

Просто откройте страницу, содержащую форму, которую вы хотите изменить. Наведите указатель мыши на первое поле в форме, щелкните правой кнопкой мыши и выберите «Проверить элемент». Экран браузера разделится, и вы увидите исходный код страницы. В исходном коде вам нужно найти начальную строку кода формы.

Как вы можете видеть на скриншоте выше, код нашей контактной формы начинается со строки:

Атрибут id — это уникальный идентификатор, созданный контактной формой 7 для этой конкретной формы. Это комбинация идентификатора формы и идентификатора сообщения, куда добавляется эта форма.

Мы будем использовать этот идентификатор в нашем CSS для оформления нашей контактной формы. Мы заменим .wpcf7 в нашем первом фрагменте CSS на # wpcf7-f201-p203-o1.

div#wpcf7-f201-p203-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;   
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Стилизация форм Contact Form 7 с помощью CSS Hero

Многие новички в WordPress не имеют опыта написания CSS, и они не хотят тратить время на его изучение. К счастью, есть замечательное решение для новичков, которое позволит вам не только стилизовать свою контактную форму, но и почти все аспекты вашего сайта WordPress.

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

Посмотрите наш полный обзор CSS Hero и то, как использовать его для стилизации чего-либо на вашем сайте WordPress.

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

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как создавать и продавать онлайн-курсы с помощью WordPress (шаг за шагом)

Знаете ли вы, что с помощью WordPress можно создать успешный онлайн-курс?
Продажа онлайн-курсов — это популярная бизнес-идея в Интернете, которую можно

Как отключить автоматическое связывание URL-адресов в комментариях WordPress

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

Как создать партнерский магазин Amazon с помощью WordPress

Вы хотите создать партнерский магазин Amazon с помощью WordPress?
Партнерский магазин Amazon позволяет вам продавать товары с Amazon.com в качестве аффилированного

Как включить категорию и подкатегорию в URL-адреса WordPress

Недавно один из наших читателей спросил нас, как включить категорию и подкатегорию в URL-адреса WordPress. Категории и подкатегории позволяют сортировать

Contact Form 7 placeholder: color, текст подсказка

Решил посвятить еще несколько постов плагину WordPress для создания форм обратной связи — Contact Form 7. Сегодня поговорим о тексте подсказке contact form 7 placeholder и о том как задать цвет этого текста.

Как добавить Contact Form 7 placeholder

Нет ничего проще чем установить текст подсказку у CF7. Для этого нам нужно зайти в админку ваш_сайт/wp-admin/admin.php?page=wpcf7 создать контактную форму обратная связь WordPress, после чего вы увидите:

Нажать на вкладку text или textarea и установить галочку напротив «Use this text as the placeholder of the field» как показанно на рисунке:

Текст подсказка placeholder для textarea делается аналогично, смотрите рисунок:

Окончательный вид нашей формы будет иметь вот такой вид в редакторе Вордпресс:

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

Дальше я раскажу вам как избавится от этой проблемы.

Проблема с contact form 7 placeholder color

Сразу наверное стоит оговорится, что эта проблема бывает не только в CF7 — эта проблема стилей всех текстов подсказок. А раз эта проблема в стилях, то и править нужно стили. Если у вас нет больше никаких текстовых полей вы смело можете написать вот такой CSS код в свои стили:

body input::-webkit-input-placeholder{color:#000000; opacity:1;}
body input::-moz-placeholder{color:#000000; opacity:1;}
body textarea::-webkit-input-placeholder{color:#000000; opacity:1;}
body textarea::-moz-placeholder{color:#000000; opacity:1;}
body textarea, body input{color:#000000; opacity:1;}

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

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

На этом все, теперь если вам нужно указать placeholder и color для contact form 7 вы знаете как это сделать. Советую также прочесть статью contact form 7 дополнительные настройки у нас на сайте.

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

Иноформацию более в структурированном виде можно просмотреть в статье форма обратной связи wordpress.

Комментарии к записи «Текст placeholder в Contact Form 7»:

Простая Форма Contact Form 7 в Одну Строку

Было необходимо сделать контактную форму на плагине contact form 7 в одну строку. Как Вы прекрасно знаете, по умолчанию форма выглядит вертикально и идет в форме столбца, Но бывают случаи когда нужно вытянуть ее в одну строчку, чтобы она занимала меньше места на экране. Для этого нужно сделать несколько манипуляций. Первое добавляем к стилям нашего плагина следующие строчки:

Добавляем в самом конце или самом начале файла, значения не имеет, файл находиться по адресу —  site.ru/wp-content/plugins/contact-form-7/includes/css/styles.css

 .wpcf7-form-control-wrap{
display: inline-block;
}

Сама контактная форма выглядит следующим образом. Не забудьте сменить site.ru — на свой домен:

<div><label> <b>Как вас зовут?</b>
[text* your-name ] </label></div>
<div><label> <b>Ваш телефон, или Email (обязательно)</b>
[text* your-email] </label></div>
<div><input type=»submit» value=»Отправить»><img src=»https://site.ru/wp-content/plugins/contact-form-7/images/ajax-loader.gif» alt=»Отправка…»></div>

Далее вставляем форму как обычно, то что появляется в [квадратных скобках].

Посмотреть Видео Инструкцию:

Форма обратной связи по стайлингу | Контактная форма 7

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

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

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

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

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

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

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

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

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

input [type = "text"],
input [type = "email"],
текстовое поле
{
    цвет фона: #fff;
    цвет: # 000;
    ширина: 50%;
}
 

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

.wpcf7 input [type = "text"],
.wpcf7 input [type = "email"],
.wpcf7 текстовое поле
{
    цвет фона: #fff;
    цвет: # 000;
    ширина: 50%;
}
 

См. Также:

Стилизация специальных полей

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

 [text text-123 id: очень-особенное-поле] 

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

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

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

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

.wpcf7
{
    цвет фона: # f7f7f7;
    граница: 2px solid # 0f0;
}
 

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

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

Стиль ответных сообщений

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

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

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

.wpcf7 form .wpcf7-response-output {
    маржа: 2em 0,5em 1em;
    заполнение: 0.2em 1em;
    граница: 2px solid # 00a0d2; /* Синий */
}

.wpcf7 form.init .wpcf7-response-output {
    дисплей: нет;
}

.wpcf7 form.sent .wpcf7-response-output {
    цвет границы: # 46b450; /* Зеленый */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    цвет границы: # dc3232; /* Красный */
}

.wpcf7 form.spam .wpcf7-response-output {
    цвет границы: # f56e28; /* Апельсин */
}

Форма .wpcf7.недопустимый .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    цвет границы: # ffb900; /* Желтый */
}
 

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

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

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

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

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

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

Как это:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/ * Стили контактной формы 7
--------------------------------- * /

.wpcf7 {

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

граница: 5px solid # 666666;

}

 

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

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

.wpcf7-form {

маржа слева: 25 пикселей;

поле справа: 25 пикселей;

маржа сверху: 25 пикселей;

 

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

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

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

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

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

.wpcf7-textarea {

ширина: 85%;

}

 

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

.wpcf7 input {

ширина: 50%;

}

 

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

.wpcf7-text {
ширина: 50%;
}

 

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

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

.wpcf7-submit {

фон: # 555555;

цвет: #ffffff;

}

 

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

Как создать определенную форму

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

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

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

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

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

 

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

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

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

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

# custom-field {

цвет: #ffffff;

граница: 2px solid # 333333;

}

 

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

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

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

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

.wpcf7-list-item {
дисплей: блок;
}

 

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

.wpcf7-list-item {
дисплей: таблица-строка;
}

.wpcf7-list-item * {
дисплей: таблица-ячейка;
}

 

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

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

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

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

 

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

 

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

 

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

В заключение

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

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

Есть ли у вас собственные советы по стилю Contact Form 7? Есть какие-нибудь избранные, которыми вы хотели бы поделиться? Напишите нам в комментариях ниже!

Миниатюра статьи через Dmitry Lemon5ky // shutterstock.com

Как стилизовать формы Contact Form 7 в WordPress

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

Примечание: Мы больше не рекомендуем плагин Contact Form 7.Вместо этого мы рекомендуем WPForms, плагин для контактной формы, наиболее удобный для новичков. Вы также можете бесплатно скачать WPForms Lite.

У нас есть пошаговое руководство по созданию контактной формы в WordPress.

Видеоурок

Подписаться на WPBeginner

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

Начало работы

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

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

Как видите, контактная форма наследует некоторые стили формы от вашей темы WordPress. Кроме того, это очень просто.

Мы будем стилизовать формы Contact Form 7 с помощью CSS.Весь CSS входит в таблицу стилей вашей темы или дочерней темы.

Стилизация контактной формы 7 форм в WordPress

Contact Form 7 генерирует очень полезный и совместимый со стандартами код для форм. Каждый элемент в форме имеет соответствующий идентификатор и связанный с ним класс CSS.

Каждая контактная форма использует класс CSS .wpcf7 , который можно использовать для стилизации формы.

В этом примере мы используем шрифт Google Lora в наших полях ввода. Узнайте, как добавить шрифты Google в WordPress.

div.wpcf7 {
цвет фона: #fbefde;
граница: 1px solid # f28f27;
отступ: 20 пикселей;
}
.wpcf7 input [type = "text"],
.wpcf7 input [type = "email"],
.wpcf7 textarea {
фон: # 725f4c;
цвет: #FFF;
семейство шрифтов: lora, sans-serif;
стиль шрифта: курсив;
}
.wpcf7 input [type = "submit"],
.wpcf7 input [type = "button"] {
цвет фона: # 725f4c;
ширина: 100%;
выравнивание текста: центр;
преобразование текста: прописные буквы;
}
 

Так выглядела наша контактная форма после применения этого CSS.

Styling Multiple Contact Form 7 Forms

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

Просто откройте страницу, содержащую форму, которую вы хотите изменить. Наведите указатель мыши на первое поле в форме, щелкните правой кнопкой мыши и выберите «Проверить элемент».Экран браузера разделится, и вы увидите исходный код страницы. В исходном коде вам нужно найти начальную строку кода формы.

Как видно на скриншоте выше, код нашей контактной формы начинается со строки:

div # wpcf7-f201-p203-o1 {
цвет фона: #fbefde;
граница: 1px solid # f28f27;
отступ: 20 пикселей;
}
# wpcf7-f201-p203-o1 input [type = "text"],
# wpcf7-f201-p203-o1 input [type = "email"],
# wpcf7-f201-p203-o1 textarea {
фон: # 725f4c;
цвет: #FFF;
семейство шрифтов: lora, "Open Sans", без засечек;
стиль шрифта: курсив;
}
# wpcf7-f201-p203-o1 input [type = "submit"],
# wpcf7-f201-p203-o1 input [type = "button"] {
цвет фона: # 725f4c;
ширина: 100%;
выравнивание текста: центр;
преобразование текста: прописные буквы;
}
 

 div.wpcf7 {
    цвет фона: светло-розовый;
    граница: сплошной оранжевый 1px;
    отступ: 20 пикселей;
}
 
.wpcf7 input [type = "text"],
.wpcf7 input [type = "email"],
.wpcf7 textarea {
    цвет фона: розово-коричневый;
    цвет: #FFF;
    семейство шрифтов: 'Arial Rounded MT';
    стиль шрифта: курсив;
}
 
.wpcf7 input [type = "submit"] {
    цвет фона: розово-коричневый;
    текст-преобразование: прописные буквы;
    цвет: #FFF;
    отступ: 5 пикселей 10 пикселей;
}
 

 div # wpcf7-f4-p2-o1 {
    цвет фона: светло-розовый;
    граница: сплошной оранжевый 1px;
    отступ: 20 пикселей;
}
 
# wpcf7-f4-p2-o1 input [type = "text"],
# wpcf7-f4-p2-o1 input [type = "email"],
# wpcf7-f4-p2-o1 textarea {
    цвет фона: розово-коричневый;
    цвет: #FFF;
    семейство шрифтов: 'Arial Rounded MT';
    стиль шрифта: курсив;
}
 
# wpcf7-f4-p2-o1 input [type = "submit"] {
    цвет фона: розово-коричневый;
    текст-преобразование: прописные буквы;
    цвет: #FFF;
    отступ: 5 пикселей 10 пикселей;
}
 

  


  Полное имя
[text * your-name class: pix-my-5 class: shadow-0 class: bg-gray-1 class: form-control placeholder «John Doe»]  

  Адрес электронной почты *
[email * your-email class: pix-my-5 class: shadow-0 class: bg-gray-1 class: form-control placeholder «email @ pixfort.com "]  

  Напишите свое сообщение ниже [textarea * your-message x4 class: pix-my-5 class: shadow-0 class: bg-gray-1 class: form-control placeholder "Your Message"]  


[submit class: btn class: btn-green class: text-white class: w-100 class: pix-mt-10 class: font-weight-bold class: btn-lg class: shadow-hover «Submit form»]  

  [text * your-name class: pix-my-5 class: shadow-0 class: bg-gray-1 class: form-control placeholder «John Doe»]  

  класс: bg-gray-1  

  класс: shadow-0  

  класс: pix-my-5  

  заполнитель «Джон Доу»  

  класс: контроль формы  

  <метка> Полное имя
      ... код поля здесь ...
  

  

      

            ... Первое поле здесь ...
      

      

            ... Второе поле здесь ...
      
  

  [submit class: btn class: btn-green class: text-white class: w-100 class: pix-mt-10 class: font-weight-bold class: btn-lg class: shadow-hover «Отправить форму» ]  

  класс: btn класс: btn-зеленый