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

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

Плагин Contact Form 7 использует класс wpcf7. Все стили, которые заданы для этого класса применяются к формам, созданным посредством данного плагина.

Для начала даю общий код:

С помощью данного кода Вы можете создать форму следующего вида:

Как установить свой стиль Contact Form 7 на свой сайт

Давайте поставим код, который расположен выше на Ваш сайт. Идем в админку WordPress. Переходим в раздел «Внешний вид» ==> «Редактор».

Выбираем файл style.css (как правило, выбран по умолчанию при входе в редактор).

В самом конце данного файла вставляем код.

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

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

Стиль полей ввода

За стиль полей ввода отвечает следующая часть кода:

Разберем все по порядку. Первый селектор .wpcf7 input, .wpcf7 textarea отвечает за стиль поля ввода (текстового поля). Разберем его свойства.

padding — задает отступ от содержимого до границы элемента. В нашем случае это отступ от вводимого в поле текста до границы поля. Можно задать значение в виде Xpx, где X количество пикселей. Также можно задать различные отступы с разных сторон. Для этого надо написать 4 значения через пробел. Порядок идет сверху по часовой стрелке, то есть так: отступ сверху, отступ справа, отступ снизу, отступ слева. Пример: padding: 5px 3px 6px 8px;

color — цвет текста. После решетки можно указать код цвета в шестнадцатеричном виде. Подобрать цвет можно здесь.

font-family — задаем шрифт полей ввода. Первое значение — шрифт. Второе — шрифт, если на компьютере пользователя нет первого шрифта. Третье — любой шрифт из семейства (у нас sans-serif), если на компьютере пользователя нет шрифта ни с первого, ни со второго значения. У нас так: Arial, Helvetica, sans-serif;. Это значит, что шрифт текста, который мы будем вводить в форму будет Arial. Если на компьютере пользователя нет шрифта Arial, то будет шрифт Helvetica. Если не найдется и Helvetica, то будет любой шрифт из семейства шрифтов sans-serif.

font-size — задает размер шрифта. Значения указываются в пикселах.

line-height — задает высоту строки. Значения указываются в пикселах.

border — рамка вокруг поля ввода. Первое значение — ширина рамки, которая задается в пикселах. Второе — ее стиль (все стили смотрим тут). Третье — цвет (как подобрать цвет писал выше).

box-shadow — тень блока. Первое значение inset указывает на то, что тень должна быть внутренней. Если нужна внешняя тень, пропустите это значение. Второе и третье значения 2px 2px указывают на смешение тени по горизонтали и вертикали соответственно. Четвертое значение 8px задает радиус размытия тени. Пятое — #F9F9F9 — цвет тени.

Остальные селекторы разбирать не будем. Единственный селектор для полей ввода, значение которого я хочу подчеркнуть, это последний — .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active. Он задает цвет фона поля при наведении на него указателя мыши.

background — задет фон. Значение #FDFDFD — код цвета фона.

Стиль кнопки ОТПРАВИТЬ

За стиль данной кнопки отвечает следующая часть кода:

Итак, селектор намбэр ван у нас .wpcf7 input.wpcf7-submit. Он отвечает за стиль кнопки «Отправить». Разберем некоторые его свойства и их значения.

text-transform — преобразование текста. Значение uppercase говорит о том, что все символы будут заглавными.

-webkit-border-radius, -moz-border-radius, border-radius — данные свойства идентичны, только отвечают за разные браузеры. С их помощью можно сделать круглые углы. Значение задается в пикселах и отвечает за радиус скругления.

font-weight — устанавливает насыщенность шрифта. bold — значит жирный. Можно также задавать такие значения: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900.

background: -webkit-gradient, background: -moz-linear-gradient, progid:DXImageTransform.Microsoft.gradient, -ms-filter: «progid:DXImageTransform.Microsoft.gradient — свойства задают градиентный фон блока в различных браузерах. В значениях Вы должны указать 2 цвета (верхний и нижний). Между ними будет переход. Пример значения: (linear, left top, left bottom, from(#FFFFFF), to(#000000)). Означает, что будет переход от цвета FFFFFF (белый) к цвету 000000 (черный).

margin — задает внешние отступы до границы элемента. По значениям аналогичен свойству padding.

Стиль уведомлений

За стиль уведомлений об ошибках или успешной отправке сообщения отвечает следующая часть кода:

Кто не понимает что это за уведомления, объясняю. Они появляются после отправке сообщения (нажатии кнопки отправить). Выводят либо ошибки, либо уведомления об успешной отправке. Пара скринов для примера:

Рассматривать свойства данных селекторов не будем, так как большая их часть была рассмотрена ранее.

Общий код с пояснениями

Вот тот же код, но уже с комментариями и объяснениями в самом коде. Можете скопировать его прямо себе на сайт и уже там менять.

Ну и после такого мозгового штурма пару бугагшечек для расслабона