Стандартные стили 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 займёт ровно две минуты.