Standardowe style Contact Form 7 to pierwsza rzecz, która rzuca się w oczy po zainstalowaniu wtyczki. Wąskie pola formularza, niepozorny przycisk wysyłania i komunikaty o błędach bez krzty designu. Po skonfigurowaniu kilkunastu stron przestaje Pan/Pani liczyć, ile razy ręcznie poprawiało się style.css, za każdym razem to samo.

Przygotowany plik eksportu formularzy rozwiązuje tę rutynę. Importuje Pan/Pani gotowy formularz z już zapisanymi stylami, pola, przycisk, walidacja i reCAPTCHA wyglądają przyzwoicie od razu po aktywacji. Pozostaje jedynie podmienić adresy e-mail i ścieżkę do logo pod konkretny projekt.

Poniżej pełny przegląd reguł CSS, których używamy w naszych projektach, plus plik eksportu do szybkiego startu. Style przetestowano na Contact Form 7 w wersji 6.x, są aktualne na rok 2026.

💡 Szybki przegląd:

• Pobierz plik eksportu formularzy i zaimportuj go do WordPressa standardową metodą
• Podmień adresy e-mail w szablonie wiadomości oraz ścieżkę do logo
• Skopiuj style CSS do style.css motywu lub do sekcji Dodatkowy CSS
• W razie potrzeby dostosuj kolory i czcionki do identyfikacji wizualnej projektu

1. Plik eksportu: import i wstępna konfiguracja

Plik eksportu zawiera gotowy formularz kontaktowy z polami: imię, e-mail, telefon, pole tekstowe oraz Google reCAPTCHA. Formularz przygotowano w czterech wersjach językowych: rosyjskiej, ukraińskiej, angielskiej i niemieckiej.

Import wykonuje się standardowym narzędziem WordPressa: Narzędzia → Import → Contact Form 7 → Uruchom import. Proszę wybrać pobrany plik XML, a formularze pojawią się w sekcji „Formularze".

Zaraz po imporcie proszę wejść w szablon wiadomości każdego formularza, zakładka Wiadomość. Należy podmienić trzy rzeczy:

• Pole „Do", proszę wpisać rzeczywisty adres e-mail;
• Pole „Od", adres musi być w domenie strony (na przykład info@ваш-домен.com), w przeciwnym razie wiadomości trafią do spamu;
• Ścieżka do logo, proszę znaleźć w treści wiadomości tag <img src="/Logo-150x150.png"> i zastąpić go pełnym adresem URL logo z Pana/Pani strony.

Bez podmiany adresów e-mail formularz nie będzie wysyłał wiadomości, to częsta przyczyna, dla której CF7 „nie działa" po imporcie.

2. Style CSS: pełny przegląd

Poniżej zestaw stylów, który wdrażamy w każdym nowym projekcie. Proszę skopiować go do style.css aktywnego motywu lub do sekcji Dodatkowy CSS (Wygląd → Dostosuj → Dodatkowy CSS). Druga opcja jest lepsza: style nie znikną podczas aktualizacji motywu.

2.1. Komunikaty zwrotne i walidacja

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, blok, który pojawia się po wysłaniu (sukces lub błąd). Domyślnie rozrywa układ; ujemny margin-top przyciąga go bliżej formularza. .wpcf7-not-valid-tip, czerwona podpowiedź pod niewypełnionym polem; tutaj tekst jest wyśrodkowany i pogrubiony dla lepszej widoczności.

2.2. Pola tekstowe i obszary tekstowe

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
}

Selektor input.wpcf7-form-control obejmuje wszystkie pola tekstowe CF7. textarea#TextareaJA to niestandardowy identyfikator z naszego formularza; jeśli w Pana/Pani formularzu jest inne ID, proszę je podmienić na aktualne. Kolor obramowania przy fokusie #709242, oliwkowa zieleń, spokojna i nierażąca w oczy.

2.3. Przycisk wysyłania

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
}

Przycisk na zielonym tle #5a8f2b z białą przerywaną ramką. Po najechaniu kolory się odwracają: białe tło, zielony tekst i ramka. Jeśli zieleń nie występuje w palecie Pana/Pani marki, proszę zastąpić #5a8f2b własnym kolorem akcentowym w obu regułach (podstawowej i hover).

2.4. Preloader i wskaźnik ładowania

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
}

Domyślny wskaźnik wysyłania CF7 z animacją obrotu przykleja się do krawędzi. Tutaj został wyśrodkowany za pomocą margin-left/right: auto oraz display: block. !important jest konieczne, ponieważ sam plugin ustawia style inline dla loadera.

2.5. Google reCAPTCHA, wyrównanie

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
}

Blok reCAPTCHA domyślnie jest dosunięty do lewej. margin-left/right: auto przy stałej szerokości 300px wyśrodkowuje go względem formularza.

2.6. Responsywność na urządzeniach mobilnych

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
}

Na ekranach o szerokości poniżej 768px podpowiedź walidacyjna otrzymuje dodatkowy dolny margines, aby nie zlewała się z kolejnym polem. Pola tekstowe mają ograniczoną wysokość, co na urządzeniach mobilnych zapobiega ich nadmiernemu rozciąganiu.

2.7. Ukrywanie elementów technicznych

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 domyślnie dubluje błędy walidacji: zarówno w dymku z podpowiedzią, jak i w ogólnym bloku pod formularzem. Ukrywamy ogólny blok (.wpcf7-validation-errors) oraz komunikat o sukcesie (.wpcf7-mail-sent-ok), ponieważ podpowiedzi .wpcf7-not-valid-tip są wystarczające. Style dla .screen-reader-response mają znaczenie, gdy formularz znajduje się na ciemnym tle.

2.8. Wyśrodkowanie placeholderów

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
}

Tekst podpowiedzi wewnątrz pola jest wyrównany do środka tylko wtedy, gdy pole jest puste. Gdy tylko użytkownik zacznie wpisywać tekst, wraca on do standardowego wyrównania. #TextareaJA to identyfikator z naszego formularza; w swoim proszę zastąpić go aktualnym.

2.9. Bonus: style dla ciemnego tła

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
}

Jeśli formularz został umieszczony w bloku z ciemnym wypełnieniem, komunikaty o błędach muszą być czytelne. Tekst błędu staje się biały (aliceblue), a dymek z podpowiedzią otrzymuje jasne tło.

2.10. Dodatkowe usprawnienia

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
}

Pola tekstowe na email i telefon są wyśrodkowane, co wygląda estetyczniej, gdy formularz składa się z 3-4 pól. Blok div#recapcha-popups to selektor specyficzny dla przypadków, gdy formularz jest osadzony w oknie pop-up.

3. Konfiguracja szablonu wiadomości

Po zaimportowaniu formularzy należy koniecznie sprawdzić zakładkę List w edytorze każdego z nich. CF7 używa tych ustawień do wysyłania powiadomień email:

• Do, adres, na który trafiają zgłoszenia. Domyślnie widnieje tam zaślepka z eksportu, proszę zastąpić ją swoim adresem;
• Od, nagłówek listu. Adres nadawcy musi znajdować się w domenie witryny, w przeciwnym razie wiadomości trafią do spamu lub w ogóle nie zostaną dostarczone;
• Temat, można pozostawić standardowy lub dodać nazwę witryny;
• Treść listu, szablon HTML z logo. Proszę zastąpić src="/Logo-150x150.png" pełnym adresem URL swojego logo.

Jeśli potrzebne są dodatkowe tagi do szablonu, pełna lista dostępna jest w oficjalnej dokumentacji na contactform7.com.

4. Optymalizacja ładowania skryptów CF7

Domyślnie Contact Form 7 ładuje CSS i JavaScript na każdej stronie witryny, nawet tam, gdzie formularza nie ma. To zbędne zapytania, które spowalniają ładowanie.

Od wersji 5.9 twórca dodał natywną opcję kontroli ładowania: w pliku wp-config.php można zdefiniować stałe WPCF7_LOAD_JS i WPCF7_LOAD_CSS z wartością false, a wtedy skrypty zostaną podłączone tylko na stronach z formularzem. Więcej szczegółów w dokumentacji CF7.

Do bardziej precyzyjnej kontroli (tylko wybrane strony) proszę użyć snippetu w pliku 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
}

Snippet usuwa skrypty CF7 ze wszystkich stron oprócz tych wskazanych w tablicy is_page(). Proszę zastąpić 'contact' i 'order' slugami Państwa stron z formularzami.

⁉️🤔 Często zadawane pytania

Po imporcie formularz nie wysyła wiadomości, co robić?

Przede wszystkim proszę sprawdzić zakładkę „List", pola „Do" i „Od". W pliku eksportu znajdują się tam wartości zastępcze. „Do" musi zawierać prawdziwy adres e-mail, a „Od" adres w domenie witryny. Jeśli domena nie jest zgodna, serwer pocztowy odbiorcy odrzuci wiadomość jako spam.

Gdzie lepiej umieszczać style CSS, w pliku style.css motywu czy w Additional CSS?

Additional CSS jest lepszym rozwiązaniem. Podczas aktualizacji motywu style.css jest nadpisywany, a Additional CSS nie. Minus: style w Additional CSS są ładowane inline w <head>, a nie jako plik zewnętrzny, ale dla 100-150 linii CSS różnica w szybkości jest niezauważalna.

Jak zmienić kolory przycisku pod markę klienta?

Proszę znaleźć w stylach dwie reguły dla input.wpcf7-form-control.wpcf7-submit (podstawową i hover). Proszę zastąpić #5a8f2b kolorem akcentowym marki we właściwości background reguły podstawowej oraz we właściwościach color i border reguły hover. Nic więcej nie trzeba zmieniać.

Dlaczego reCAPTCHA przesuwa się w lewo na urządzeniach mobilnych?

Blok .g-recaptcha w naszych stylach ma stałą, standardową szerokość. Na bardzo wąskich ekranach może się nie mieścić. Proszę dodać w media query regułę z transform: scale() i transform-origin: left, reCAPTCHA proporcjonalnie się zmniejszy i zmieści na każdym ekranie.

Style nie są stosowane, jaka jest przyczyna?

Trzy częste przyczyny: (1) pamięć podręczna przeglądarki, proszę otworzyć witrynę w trybie incognito; (2) pamięć podręczna wtyczki wydajnościowej (WP Rocket, LiteSpeed), proszę ją wyczyścić; (3) kolejność ładowania, CF7 ładuje swój CSS jako ostatni. Proszę dodać !important do konfliktowej reguły lub zwiększyć specyficzność selektora, dodając klasę rodzica.

Jak sprawdzić, czy formularz w ogóle działa po konfiguracji?

Proszę wysłać testową wiadomość przez sam formularz na stronie. Jeśli wiadomość nie dotarła, proszę sprawdzić folder „Spam". Jeśli i tam jej nie ma, proszę skonfigurować wtyczkę SMTP (na przykład FluentSMTP lub Post SMTP). Bez SMTP WordPress wysyła przez wp_mail(), a wiele hostingów blokuje takie wiadomości.

Stylizacja CF7: szybko, raz i dla wszystkich projektów

Przygotowany plik eksportu i dopracowany zestaw stylów oszczędzają od 15 do 30 minut przy każdym nowym projekcie. Zamiast ręcznego dobierania margin-top: -14px metodą prób i błędów otrzymują Państwo formularz z już uporządkowanymi polami, przyciskiem i walidacją, pozostaje tylko wstawić email i logo.

Jeśli zielona tonacja #5a8f2b nie pasuje do projektu, proszę zastąpić kolor akcentowy własnym. Jeśli formularz jest osadzony w pop-upie, proszę dodać selektor z ID pop-upa, jak pokazano w rozdziale 2.10. Jeśli witryna jest wielojęzyczna, proszę użyć duplikatów językowych formularzy z eksportu (RU/UK/EN/DE).

W projektach bez projektanta ten zestaw stylów zaspokaja zdecydowaną większość potrzeb związanych z przyzwoitym wyglądem formularza kontaktowego. W projektach z projektantem służy jako baza, od której można wyjść do bardziej szczegółowego dostosowania.

Proszę zapisać style jako snippet, a następne uruchomienie CF7 zajmie dokładnie dwie minuty.