Как стилизовать формы 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. Так выглядела контактная форма на нашем тестовом сайте.

Форма обратной связи по умолчанию 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.

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

Стилизация нескольких форм контактов 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 без написания кода.

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

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

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

Как создать интранет для малого бизнеса с WordPress (легко)

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

Как добавить кнопки социальных сетей в WordPress (руководство для начинающих)

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

12 самых полезных руководств по настраиваемым типам записей в WordPress

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

Как отобразить общее количество комментариев в WordPress

Вы хотите отображать общее количество комментариев на вашем сайте WordPress? Комментарии позволяют пользователям участвовать и взаимодействовать