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 для каждой формы.
Просто откройте страницу, содержащую форму, которую вы хотите изменить. Наведите указатель мыши на первое поле в форме, щелкните правой кнопкой мыши и выберите «Проверить элемент». Экран браузера разделится, и вы увидите исходный код страницы. В исходном коде вам нужно найти начальную строку кода формы.
Как вы можете видеть на скриншоте выше, код нашей контактной формы начинается со строки:
