Стандартні стилі Contact Form 7 — це перше, що впадає в око після встановлення плагіна. Вузькі поля введення, непоказна кнопка надсилання та повідомлення про помилки без натяку на дизайн. Налаштувавши з десяток сайтів, перестаєш рахувати, скільки разів вручну правив style.css, і щоразу одне й те саме.

Підготовлений файл експорту форм розв’язує цю рутину. Ви імпортуєте готову форму з уже прописаними стилями, поля, кнопка, валідація та reCAPTCHA мають пристойний вигляд одразу після активації. Залишається лише замінити email-адреси та шлях до логотипу під конкретний проєкт.

Нижче, повний розбір CSS-правил, які ми використовуємо на своїх проєктах, плюс файл експорту для швидкого старту. Стилі протестовано на Contact Form 7 версії 6.x, вони актуальні на 2026 рік.

💡 Швидкий огляд:

• Завантажте файл експорту форм та імпортуйте в WordPress стандартним способом
• Замініть email-адреси в шаблоні листа та шлях до логотипу
• Скопіюйте CSS-стилі в style.css теми або в Additional CSS
• За потреби адаптуйте кольори та шрифти під бренд проєкту

1. Файл експорту: імпорт і первинне налаштування

Файл експорту містить готову форму зворотного зв’язку з полями: ім’я, email, телефон, текстове поле та Google reCAPTCHA. Форму створено в чотирьох мовних версіях: російській, українській, англійській та німецькій.

Імпорт виконується штатним інструментом WordPress: Інструменти → Імпорт → Contact Form 7 → Запустити імпорт. Виберіть завантажений XML-файл, і форми з’являться в розділі «Бланки».

Одразу після імпорту зайдіть у шаблон листа кожної форми, вкладка Лист. Замініть три речі:

• Поле «Кому», вкажіть вашу реальну email-адресу;
• Поле «Від кого», адреса має бути на домені сайту (наприклад, info@ваш-домен.com), інакше листи потраплять у спам;
• Шлях до логотипу, знайдіть у тілі листа тег <img src="/Logo-150x150.png"> і замініть на повний URL логотипу з вашого сайту.

Без заміни email-адрес форма не надсилатиме листи — це часта причина, через яку CF7 «не працює» після імпорту.

2. CSS-стилі: повний розбір

Нижче, комплект стилів, який ми накочуємо на кожен новий проєкт. Скопіюйте в style.css активної теми або в Additional CSS (Зовнішній вигляд → Налаштувати → Додаткові стилі). Другий варіант кращий: стилі не злетять під час оновлення теми.

2.1. Відповідні повідомлення та валідація

1
/* Ответ формы — отступ сверху */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Подсказка валидации — центрирование и отступы */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output, блок, який з’являється після надсилання (успіх або помилка). За замовчуванням він розриває потік, від’ємний margin-top підтягує його ближче до форми. .wpcf7-not-valid-tip, червона підказка під незаповненим полем; тут текст центрований і зроблений жирним для помітності.

2.2. Поля введення та текстові області

1
/* Единый шрифт для всех элементов формы */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Высота текстовой области */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Подсветка границы при фокусе */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

Селектор input.wpcf7-form-control чіпляє всі текстові поля CF7. textarea#TextareaJA, кастомний ідентифікатор із нашої форми; якщо у вашій формі інший ID, замініть на актуальний. Колір рамки при фокусі #709242, оливково-зелений, спокійний і не ріже око.

2.3. Кнопка надсилання

1
/* Кнопка отправки — основной стиль */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Ховер — инверсия цветов */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

Кнопка на зеленій підкладці #5a8f2b з білим пунктирним бордером. При наведенні кольори інвертуються: білий фон, зелений текст і бордер. Якщо зелений відсутній у палітрі вашого бренду, замініть #5a8f2b на свій акцентний колір в обох правилах (основному та hover).

2.4. Прелоадер та індикатор завантаження

1
/* Центрирование ajax-лоадера */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

Індикатор надсилання CF7, що обертається, за замовчуванням прилипає до краю. Тут його примусово відцентровано через margin-left/right: auto та display: block. !important потрібні, тому що сам плагін задає інлайнові стилі для лоадера.

2.5. Google reCAPTCHA, вирівнювання

1
/* Центрирование блока reCAPTCHA */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

Блок reCAPTCHA за замовчуванням притискається вліво. margin-left/right: auto за фіксованої ширини 300px вирівнює його по центру форми.

2.6. Адаптивність для мобільних

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

На екранах менше 768px підказка валідації отримує додатковий нижній відступ, щоб не злипатися з наступним полем. Текстові поля обмежені за висотою, на мобільних це запобігає надмірному розтягуванню.

2.7. Приховування службових елементів

1
/* Скрываем маркеры списка в сообщениях об ошибках */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Скрываем зелёное сообщение об успешной отправке */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Скрываем дублирующее сообщение о ошибке валидации */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Цвет текста screen-reader-блока для тёмных фонов */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

CF7 за замовчуванням дублює помилки валідації: і у спливній підказці, і в загальному блоці під формою. Ми приховуємо загальний блок (.wpcf7-validation-errors) і повідомлення про успіх (.wpcf7-mail-sent-ok), підказок .wpcf7-not-valid-tip достатньо. Стилі для .screen-reader-response актуальні, коли форма розташована на темному тлі.

2.8. Центрування плейсхолдерів

1
/* Центрирование плейсхолдера в поле textarea для разных браузеров */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

Текст-підказка всередині поля вирівнюється по центру, лише поки поле порожнє. Щойно користувач починає введення, текст іде зі звичайним вирівнюванням. #TextareaJA, ідентифікатор із нашої форми; для вашої замініть на актуальний.

2.9. Бонус: стилі для темного тла

1
/* Стили ошибок для форм на тёмном бекграунде */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Якщо форму розміщено в блоці з темною заливкою, повідомлення про помилки мають читатися. Текст помилки стає білим (aliceblue), а спливна підказка отримує світле тло.

2.10. Додаткові поліпшення

1
/* Отступ нижнего сообщения об ошибке */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Центрирование текстовых полей */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA в попапах — дополнительные отступы */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

Текстові поля з email і телефоном відцентровані — це візуально охайніше, коли форма складається з 3-4 полів. Блок div#recapcha-popups, специфічний селектор для випадків, коли форму вбудовано у спливне вікно.

3. Налаштування поштового шаблону

Після імпорту форм обов'язково перевірте вкладку Лист у редакторі кожного бланка. CF7 використовує ці налаштування для надсилання email-сповіщень:

• Кому, адреса, на яку надходять заявки. За замовчуванням стоїть заглушка з експорту, замініть на вашу;
• Від кого, заголовок листа. Адреса відправника має бути на домені сайту, інакше листи потрапляють у спам або взагалі не доставляються;
• Тема листа, можна залишити стандартну або додати назву сайту;
• Тіло листа, HTML-шаблон із логотипом. Замініть src="/Logo-150x150.png" на повний URL вашого логотипа.

Якщо потрібні додаткові теги для шаблону, повний список доступний в офіційній документації на contactform7.com.

4. Оптимізація завантаження скриптів CF7

За замовчуванням Contact Form 7 підвантажує CSS і JavaScript на кожній сторінці сайту, навіть там, де форми немає. Це зайві запити, які сповільнюють завантаження.

З версії 5.9 розробник додав нативну опцію керування завантаженням: у wp-config.php можна задати константи WPCF7_LOAD_JS і WPCF7_LOAD_CSS зі значенням false, і тоді скрипти підключаться лише на сторінках із формою. Докладніше, в документації CF7.

Для тоншого контролю (лише конкретні сторінки) використовуйте сніпет у functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Сніпет прибирає скрипти CF7 з усіх сторінок, окрім зазначених у масиві is_page(). Замініть 'contact' і 'order' на slug-и ваших сторінок із формами.

⁉️🤔 Часті запитання

Після імпорту форми не надсилаються, що робити?

Перш за все перевірте вкладку «Лист», поля «Кому» та «Від кого». У файлі експорту там заглушки. «Кому» має містити реальний email, а «Від кого», адресу на домені сайту. Якщо домен не збігається, поштовий сервер отримувача відхилить лист як спам.

Де краще розміщувати CSS-стилі, у style.css теми чи в Additional CSS?

Additional CSS краще. Під час оновлення теми style.css перезаписується, а Additional CSS, ні. Мінус: стилі в Additional CSS підвантажуються інлайн у <head>, а не зовнішнім файлом, але для 100-150 рядків CSS різниця у швидкості непомітна.

Як змінити кольори кнопки під бренд замовника?

Знайдіть у стилях два правила для input.wpcf7-form-control.wpcf7-submit (основне та hover). Замініть #5a8f2b на акцентний колір бренду у властивості background основного правила та у color і border правила hover. Більше нічого чіпати не потрібно.

Чому reCAPTCHA з’їжджає вліво на мобільних?

Блок .g-recaptcha у наших стилях зафіксовано на стандартній ширині. На дуже вузьких екранах він може не вписатися. Додайте в медіа-запит правило з transform: scale() і transform-origin: left, reCAPTCHA пропорційно зменшиться й поміститься на будь-якому екрані.

Стилі не застосовуються, у чому причина?

Три часті причини: (1) кеш браузера, відкрийте сайт в інкогніто; (2) кеш плагіна продуктивності (WP Rocket, LiteSpeed), скиньте; (3) порядок завантаження, CF7 підвантажує свій CSS останнім. Додайте !important до конфліктного правила або збільште специфічність селектора, додавши батьківський клас.

Як перевірити, що форма взагалі робоча після налаштування?

Надішліть тестовий лист через саму форму на сайті. Якщо лист не прийшов, перевірте папку «Спам». Не прийшов і туди, налаштуйте SMTP-плагін (наприклад, FluentSMTP або Post SMTP). Без SMTP WordPress надсилає через wp_mail(), і багато хостингів блокують такі листи.

Стилізація CF7: швидко, один раз і для всіх проєктів

Підготовлений файл експорту та налагоджений комплект стилів заощаджують від 15 до 30 хвилин на кожному новому проєкті. Замість ручного підбору margin-top: -14px методом тику ви отримуєте форму з уже вибудуваними полями, кнопкою та валідацією, залишається тільки підставити email і логотип.

Якщо зелена гама #5a8f2b не вписується в дизайн, замініть акцентний колір на свій. Якщо форму вбудовано в попап, додайте селектор з ID попапа, як показано в розділі 2.10. Якщо сайт багатомовний, використовуйте мовні дублікати форм з експорту (RU/UK/EN/DE).

На проєктах без дизайнера цей набір стилів закриває переважну більшість потреб у пристойному вигляді контактної форми. На проєктах з дизайнером слугує базою, від якої відштовхуються для тоншого кастомізування.

Збережіть стилі у сніпет, і наступний запуск CF7 займе рівно дві хвилини.