Як стилізувати форми в 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
Окремі елементи, такі як поля вводу, textarea та кнопки надсилання, використовують стандартні HTML-теги
Крок 2: Додайте власний CSS на свій сайт WordPress
Ви можете додати CSS двома основними способами:
Через Кастомайзер:
Перейдіть у Зовнішній вигляд > Налаштувати > Додатковий CSS і вставте свої стилі.
ПРИМІТКА: Додавайте свій CSS у файл style.css дочірньої теми для більш розширених налаштувань.
Крок 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 (коли елемент натискається). Використання псевдокласів допомагає покращити досвід користувача, надаючи миттєвий зворотний зв’язок під час взаємодії з формою.
Застосуйте стиль до конкретної форми
Кожна форма має унікальний ідентифікатор, наприклад #wpcf7-f123-o1. Використовуйте його, щоб стилізувати лише цю форму:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Замініть f123-o1 на фактичний ідентифікатор вашої форми. Ви можете знайти унікальний ідентифікатор форми, переглянувши сторінку, де розміщена форма Contact Form 7, клацнувши правою кнопкою миші на формі та вибравши «Перевірити» (або «Inspect Element») у вашому браузері. Знайдіть <div> з класом .wpcf7 — ідентифікатор виглядатиме як id="wpcf7-f123-o1" у HTML-коді. Використовуйте цей ідентифікатор у 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, щоб зробити рамки навколо кожного поля форми синіми.
Швидкі поради для кращого стилізування форм
Зробіть форму доступною: Забезпечте хороший контраст кольорів і читабельний розмір шрифту
Використовуйте відступи: Додавайте padding і margin для чистого, охайного вигляду
Виділяйте помилки: Стилізуйте повідомлення про помилки яскравим кольором (наприклад, червоним), щоб допомогти користувачам виправити помилки
Тестуйте на мобільних пристроях: Переконайтеся, що ваші форми виглядають чудово на всіх пристроях
Вирішення проблем
Якщо ваші стилі не відображаються, спробуйте ці кроки:
Очистіть кеш браузера та сайту – Іноді кешовані файли заважають відображенню нового CSS. Якщо ви використовуєте плагін кешування або керований хостинг, очистіть і ці кеші.
Перевірте специфічність CSS – Якщо ваші стилі не застосовуються, спробуйте зробити селектори більш специфічними, щоб перекрити існуючі стилі.
Переконайтеся, що ви редагуєте правильний CSS-файл або розділ – Перевірте, що ви додаєте код у правильне місце, наприклад, у панель Додатковий CSS, файл style.css дочірньої теми або плагін для власного 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. Він застосовується до всіх текстових полів, полів email і textarea, надаючи їм світло-сіру рамку, закруглені кути, зручний відступ і однакову ширину для чистого, сучасного вигляду.
Код також стилізує кнопку надсилання: зелений фон, білий текст, закруглені краї та жирний, легкий для читання шрифт. Коли користувачі наводять курсор на кнопку, фон стає темно-зеленим, забезпечуючи інтерактивний зворотний зв’язок.
Додавання CSS: класичні теми проти блокових тем
Кроки цього посібника зі стилізації форм Contact Form 7 за допомогою CSS розраховані на класичні теми WordPress. Класичні теми, такі як популярна Astra, використовують Кастомайзер, де ви можете легко додати власний CSS у розділі «Додатковий CSS». Це дозволяє просто стилізувати форми та бачити зміни в реальному часі.
Однак якщо ваш сайт використовує блокову тему (іноді її називають темою з повним редагуванням сайту або FSE), процес буде іншим. Блокові теми не завжди містять Кастомайзер або поле «Додатковий CSS» за замовчуванням. Натомість для змін дизайну використовується Редактор сайту. Ви можете налаштовувати глобальні стилі для кольорів, типографіки та макета, але додавання довільного власного CSS не завжди доступне в інтерфейсі.
Що робити, якщо ви використовуєте блокову тему
Відкрийте панель керування WordPress і перейдіть у Зовнішній вигляд > Редактор (Редактор сайту).
У Редакторі сайту знайдіть панель Стилі (іконка у вигляді напівзатемненого кола).
Деякі блокові теми тепер пропонують опцію «Додатковий CSS» у панелі Стилі, але це залежить від вашої теми та версії WordPress.
Якщо ви не бачите опції для додавання власного CSS, ви можете скористатися плагіном WPCode для додавання CSS на весь сайт. WPCode простий у використанні та працює з будь-якою темою, тож ви зможете стилізувати свої форми навіть якщо ваша тема не підтримує пряме редагування CSS в інтерфейсі. Зверніть увагу, що встановлення цього плагіна може вплинути на стиль інших існуючих форм на вашому сайті.
Додаткові ресурси
Стилізація форм Contact Form 7 — це простий, але потужний спосіб покращити досвід користувачів на вашому сайті. Лише кілька рядків CSS допоможуть зробити ваші форми органічною частиною бренду.