Стиль CSS контактной формы Contact Form 7

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

Куда поместить CSS код для стиля Contact Form 7?

Существует множество способов размещения пользовательского CSS кода на сайтах WordPress. Можно добавить дополнительный CSS в файл style.css или область «Дополнительный CSS» в разделе настройки темы. Популярные темы, такие как ASTRA, предоставляют эту опцию в своей бесплатной версии.

Ещё один простой и безопасный способ добавить дополнительный код CSS ─ воспользоваться плагином Simple Custom CSS и JS. Вы можете использовать его.

Как изменить цвет фона в Contact Form 7?

Если вы используете конструктор страниц, такой как Elementor. Поместите короткий код контактной формы 7 в элемент Elementor ‘Short Code’, затем перейдите на вкладку Style элемента ShortCode и измените цвет фона.

Если вы не используете какой-либо конструктор страниц, поместите код CSS:

.wpcf7 {
background: #9CCC8E;
padding: 25px 25px 25px 25px !important;
}

Вы можете выбрать любой цвет фона, изменив шестнадцатеричный код. Шестнадцатеричный код цвета вы можете найти в Таблице безопасных цветов HTML.

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

Как добавить границу в CF7?

Поместите этот фрагмент CSS-кода для добавления границы в Contact Form 7…

.wpcf7 {
     border: 5px solid #2F8040;
 }

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

Как добавить тень окна в контактную форму 7?

Добавление shadow или box-shadow делает контактную форму привлекательной. Введите код для тени…

.wpcf7 {
	 box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.3);
 }

Есть интересный сайт cssmatic.com. На нём можно создать код желаемых теней для прямоугольника. В конструкторе можно менять размер тени в реальном времени. Итак, перейдите туда, сгенерируйте теневой код и поместите код во фрагмент CSS.

Примечание: вы можете объединить несколько кодов в один фрагмент, то есть вы можете объединить border (рамку) и box-shadow (рамку-тень) в одном коде…

.wpcf7 {
     border: 5px solid #2F8040;
     box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.3);
 }

Как настроить ширину Contact Form 7?

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

.wpcf7 { width: 500px;} 

@media screen and (max-width: 500px) {
.wpcf7 { width: auto;}
}

В этом коде @media screen and (max-width: 500px) является адаптивным кодом для мобильных устройств. Мы устанавливаем ширину ‘auto’ для мобильных устройств.

Как настроить поле ввода в CF7?

Мы можем настроить конкретное поле ввода в контактной форме 7 с помощью CSS.

.wpcf7 input[type="text"],
 .wpcf7 input[type="email"],
 .wpcf7 input[type="textarea"],
 .wpcf7 input[type="submit"],
 textarea {
     font-size: 16px;
     font-family: Georgia;
     font-weight: bold;
     background-color: #F9F98F;
     border: 2px solid #000000;
     box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.3);
 }

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

Как настроить высоту окна сообщения в контактной форме 7?

Используйте этот код для настройки высоты окна сообщения, которое является полем textarea в CF7…

.wpcf7-form textarea {
    height: 200px;
}

Отрегулируйте значение высоты в соответствии с вашими требованиями.

Как настроить размер и выравнивание кнопки отправки?

Лучший способ настроить ширину кнопки «Отправить» ─ указать процент ширины кнопки. Если мы зададим ширину кнопки равной 50%, размер кнопки увеличит её ширину до 50% от общей площади формы. С помощью этого метода мы можем оперативно изменять размер кнопки.

Положение кнопки align по умолчанию оставлено, но мы можем выровнять положение кнопки по центру с помощью кода.

.wpcf7 input[type="submit"] {
   width: 60%;
   position:relative;
   left:20%;
}

В этом коде ширина задана на 60% от площади формы, а положение задано «относительным», но мы корректируем положение с помощью свойства 20% left position. Расчет составляет 100% (общая площадь формы) – 60% (площадь кнопки) = 40% (оставшаяся область) мы центрируем кнопку, размещая её на половине оставшейся области, то есть остается 20%.

Если мы установим ширину кнопки 50%, то «положение слева» должно составлять 100%-50% = 50%, а половина от 50% = 25%

Как настроить кнопку отправки в CF7?

Поместите фрагмент кода CSS для настройки кнопки отправки.

.wpcf7 input[type="submit"] {
     color: #ffffff;
     font-size: 18px;
     font-weight: 700;
     background: #E2272E;
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 33px;
     text-transform: uppercase;
     letter-spacing: 5px;
 }

 .wpcf7 input:hover[type="submit"] {
     background: #0A9E1C;
     transition: all 2.0s;
 }
 
.wpcf7 input:active[type="submit"] {
     background: #092AE4;
 }

Вы можете свободно редактировать все значения и диапазон в коде. Измените border-radius (радиус границы) для создания различных форм кнопки.

Вы можете собрать все нужные вам строчки кода вместе и поместить код в самый конец файла Style.css и нажать кнопку «Обновить файл».