Как да стилизирате формуляри в Contact Form 7 с помощта на CSS в WordPress
Искате вашите WordPress формуляри да изглеждат толкова стилно, колкото и останалата част от сайта ви? С Contact Form 7 имате пълен контрол върху външния вид на формуляра си чрез CSS. Това ръководство ще ви преведе стъпка по стъпка през процеса на стилизиране на формулярите на Contact Form 7, като ви позволява да създадете безпроблемно, брандирано изживяване за вашите посетители.
Защо да стилизирате формулярите на Contact Form 7?
Contact Form 7 е един от най-популярните WordPress плъгини за създаване на формуляри — но стандартният му вид е базов. Персонализирането на стила в класическите WordPress теми ви позволява да:
Съобразете се с брандирането на сайта си
Подобрете използваемостта и достъпността
Направете формулярите по-приветливи и професионални
Стъпка 1: Идентифицирайте CSS селекторите на вашия формуляр
Преди да започнете със стилизирането, трябва да знаете кои CSS селектори таргетират елементите на вашия формуляр.
Всеки формуляр Contact Form 7 е обвит в уникален клас: .wpcf7
Отделните елементи като полета за въвеждане, текстови области и бутони за изпращане използват стандартни HTML тагове
Стъпка 2: Добавете персонализиран CSS към вашия WordPress сайт
Можете да добавите CSS по два основни начина:
Чрез Customizer:
Отидете на Външен вид > Персонализиране > Допълнителен CSS и поставете вашите стилове.
ЗАБЕЛЕЖКА: Добавете вашия CSS във файла style.css на вашата child тема за по-напреднали персонализации.
Стъпка 3: Напишете вашия персонализиран CSS
Ето някои често срещани примери, с които да започнете, използвайки компонентите „text“ и „submit“ на формуляра като пример:
Стилизирайте всички формуляри на Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Псевдокласовете в CSS, като :hover, ви позволяват да стилизирате елементи според тяхното състояние или взаимодействие с потребителя. Например, псевдокласът :hover прилага стилове, когато потребителят премести курсора на мишката върху бутон или поле. Това често се използва за подчертаване на бутони или промяна на цвета им при задържане, което прави формулярите ви по-интерактивни и визуално привлекателни. Други полезни псевдокласове са :focus (когато дадено поле е избрано) и :active (когато елементът се натиска). Използването на псевдокласове подобрява потребителското изживяване, като предоставя незабавна обратна връзка при взаимодействие с формуляра.
Насочете се към конкретен формуляр
Всеки формуляр има уникален ID, като #wpcf7-f123-o1. Използвайте го, за да стилизирате само този формуляр:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Заменете f123-o1 с действителния ID на вашия формуляр. Можете да намерите уникалния ID на формуляра си, като отворите страницата, където е вграден Contact Form 7 формулярът, щракнете с десния бутон върху формуляра и изберете „Inspect“ (или „Inspect Element“) във вашия браузър. Потърсете <div> с клас .wpcf7 — ID ще се появи като нещо като id="wpcf7-f123-o1" в HTML кода. Използвайте този ID във вашия CSS селектор, за да насочите само този конкретен формуляр.
Стъпка 4: Използвайте вградените класове на Contact Form 7
Contact Form 7 автоматично добавя класове към елементите, което прави насочването още по-лесно. Например:
.wpcf7-form-control – Всички контроли на формуляра
.wpcf7-submit – Бутонът за изпращане
Можете също да добавяте свои собствени класове в редактора на формуляра за още по-голям контрол.
Пример
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Стъпка 5: Прегледайте и коригирайте
След като запазите вашия CSS, обновете сайта си, за да видите промените. Използвайте инструмента за инспектиране на браузъра, за да коригирате стиловете в реално време, преди да ги копирате в сайта си. Не забравяйте да изчистите кеша на сайта си след промени, за да са видими актуализациите за посетителите.
Ето примери преди и след на формуляр в демо сайт, където използвахме CSS кода от Стъпка 3, за да направим рамките около всяко поле на формуляра сини.
Бързи съвети за по-добро стилизиране на формуляри
Направете го достъпно: Осигурете добър контраст на цветовете и четливи размери на шрифта
Използвайте разстояния: Добавете вътрешни и външни отстояния за чист и подреден вид
Подчертайте грешките: Стилизирайте съобщенията за грешки с ясен цвят (като червен), за да помогнете на потребителите да коригират грешките
Тествайте на мобилни устройства: Уверете се, че формулярите ви изглеждат добре на всички устройства
Отстраняване на проблеми
Ако стиловете ви не се показват, опитайте следните стъпки:
Изчистете кеша на браузъра и сайта – Понякога кешираните файлове пречат на новия CSS да се покаже. Ако използвате плъгин за кеширане или управляван хостинг, изчистете и тези кешове.
Проверете за проблеми със специфичността на CSS – Ако стиловете ви не се прилагат, опитайте да направите селекторите си по-специфични, за да замените съществуващите стилове.
Уверете се, че редактирате правилния CSS файл или секция – Проверете дали добавяте кода си на правилното място, като панела Additional CSS, style.css на вашата child тема или плъгин за персонализиран CSS.
Прегледайте CSS класовете за правописни грешки или грешки – Потърсете неправилно изписани имена на класове, излишни интервали или случайна употреба на грешен клас. Също така проверете дали класът, който таргетирате, наистина съществува в HTML кода на формуляра ви.
Проверете за дублиращи се или конфликтни класове – Уверете се, че класът, който използвате, не е вече приложен другаде с различни стилове, които могат да заменят вашите промени.
Следвайте общите добри практики – Използвайте ясни и последователни имена за вашите класове, завършвайте всяко CSS правило със запетая, и винаги затваряйте правилно блоковете с къдрави скоби (}).
Внимателният преглед на кода ви за тези често срещани проблеми ще помогне да гарантирате, че персонализираните ви стилове се показват правилно на сайта ви.
Пример: Пълен персонализиран CSS за формуляр Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Ето пример за формуляр, стилизиран с горния CSS код. Този CSS код персонализира външния вид на няколко ключови елемента във вашия Contact Form 7 формуляр. Той таргетира всички текстови полета, полета за имейл и текстови области, като им дава светлосива рамка, заоблени ъгли, удобни вътрешни отстояния и еднаква ширина за чист, модерен вид.
Кодът също така стилизира бутона за изпращане със зелен фон, бял текст, заоблени ръбове и удебелен, лесен за четене шрифт. Когато потребителите задържат курсора върху бутона за изпращане, фонът става по-тъмно зелен, осигурявайки интерактивна обратна връзка.
Добавяне на CSS: класически теми срещу блокови теми
Стъпките в това ръководство за стилизиране на формуляри Contact Form 7 с CSS са предназначени за класически теми в WordPress. Класическите теми, като популярната Astra, използват Customizer, където лесно можете да добавите персонализиран CSS в секцията „Допълнителен CSS“. Това прави стилизирането на формулярите ви лесно и ви позволява да виждате промените на живо.
Ако обаче сайтът ви използва блокова тема (понякога наричана Full Site Editing или FSE тема), процесът е различен. Блоковите теми не винаги включват Customizer или полето „Допълнителен CSS“ по подразбиране. Вместо това използвате Site Editor, за да правите дизайнерски промени. Докато можете да коригирате глобални стилове за цветове, типография и оформление, добавянето на произволен персонализиран CSS не винаги е налично в интерфейса.
Какво да направите, ако използвате блокова тема
Отворете таблото за управление на WordPress и отидете на Външен вид > Редактор (Site Editor).
В Site Editor потърсете панела Styles (иконата с полукръг).
Някои блокови теми вече предлагат опция „Допълнителен CSS“ в панела Styles, но това зависи от темата и версията на WordPress.
Ако не виждате опция за добавяне на персонализиран CSS, можете да използвате плъгин като WPCode, за да добавите CSS за целия сайт. WPCode е подходящ за начинаещи и работи с всяка тема, като гарантира, че можете да стилизирате формулярите си, дори ако темата ви не поддържа директно редактиране на CSS в интерфейса. Имайте предвид, че инсталирането на този плъгин може да повлияе на стила на други вече съществуващи формуляри на вашия сайт.
Допълнителни ресурси
Стилизирайки формулярите си Contact Form 7, лесно и ефективно ще подобрите потребителското изживяване на сайта си. Само с няколко реда CSS можете да направите формулярите си да изглеждат и да се усещат като естествена част от вашия бранд.