Jak stylizować formularze w Contact Form 7 za pomocą CSS w WordPressie
Chcesz, aby Twoje formularze WordPress wyglądały równie atrakcyjnie jak reszta Twojej strony? Dzięki Contact Form 7 masz pełną kontrolę nad wyglądem formularza za pomocą CSS. Ten przewodnik przeprowadzi Cię krok po kroku przez proces stylizacji formularzy Contact Form 7, umożliwiając stworzenie spójnego, markowego doświadczenia dla odwiedzających.
Dlaczego warto stylizować formularze Contact Form 7?
Contact Form 7 to jedna z najpopularniejszych wtyczek WordPress do tworzenia formularzy — ale jej domyślny wygląd jest podstawowy. Własna stylizacja w klasycznych motywach WordPress pozwala na:
Dopasuj do identyfikacji wizualnej strony
Popraw użyteczność i dostępność
Spraw, by formularze były bardziej zachęcające i profesjonalne
Krok 1: Zidentyfikuj selektory CSS swojego formularza
Zanim zaczniesz stylizować, musisz wiedzieć, które selektory CSS odpowiadają za elementy formularza.
Każdy formularz Contact Form 7 jest otoczony unikalną klasą: .wpcf7
Poszczególne elementy, takie jak pola input, textarea i przyciski submit, używają standardowych tagów HTML
Krok 2: Dodaj własny CSS do swojej strony WordPress
CSS możesz dodać na dwa główne sposoby:
Przez Personalizator:
Przejdź do Wygląd > Personalizuj > Dodatkowy CSS i wklej swoje style.
UWAGA: Dodaj swój CSS do pliku style.css motywu potomnego, aby uzyskać bardziej zaawansowane dostosowania.
Krok 3: Napisz własny CSS
Oto kilka popularnych przykładów na początek, z wykorzystaniem komponentów formularza „text” i „submit” jako przykładu:
Stylizuj wszystkie formularze 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;
}
Pseudoklasy w CSS, takie jak :hover, pozwalają stylizować elementy w zależności od ich stanu lub interakcji użytkownika. Na przykład pseudoklasa :hover stosuje style, gdy użytkownik najedzie kursorem myszy na przycisk lub pole. Jest to często używane do podświetlania przycisków lub zmiany ich koloru podczas najechania, co sprawia, że formularze są bardziej interaktywne i atrakcyjne wizualnie. Inne przydatne pseudoklasy to :focus (gdy pole jest zaznaczone) i :active (gdy element jest klikany). Używanie pseudoklas poprawia doświadczenie użytkownika, zapewniając natychmiastową informację zwrotną podczas interakcji z formularzem.
Wybierz konkretny formularz
Każdy formularz ma unikalny identyfikator, np. #wpcf7-f123-o1. Użyj go, aby stylizować tylko ten formularz:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Zamień f123-o1 na rzeczywisty identyfikator swojego formularza. Możesz go znaleźć, przeglądając stronę, na której osadzony jest formularz Contact Form 7, klikając prawym przyciskiem myszy na formularzu i wybierając „Zbadaj” (lub „Zbadaj element”) w przeglądarce. Poszukaj <div> z klasą .wpcf7 — identyfikator pojawi się jako np. id="wpcf7-f123-o1" w kodzie HTML. Użyj tego identyfikatora w selektorze CSS, aby stylizować tylko ten konkretny formularz.
Krok 4: Użyj wbudowanych klas Contact Form 7
Contact Form 7 automatycznie dodaje klasy do elementów, co ułatwia ich wybieranie. Na przykład:
.wpcf7-form-control – Wszystkie kontrolki formularza
.wpcf7-submit – Przycisk wysyłania
Możesz także dodać własne klasy w edytorze formularza, aby mieć jeszcze większą kontrolę.
Przykład
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Krok 5: Podgląd i dostosowanie
Po zapisaniu CSS odśwież stronę, aby zobaczyć zmiany. Skorzystaj z narzędzia inspektora w przeglądarce, aby na bieżąco poprawiać style przed ich skopiowaniem na stronę. Pamiętaj o wyczyszczeniu pamięci podręcznej strony po wprowadzeniu zmian, aby były widoczne dla odwiedzających.
Oto przykłady formularza na stronie demonstracyjnej przed i po, gdzie użyliśmy kodu CSS z Kroku 3, aby pola wokół każdego elementu formularza były niebieskie.
Szybkie wskazówki dotyczące lepszej stylizacji formularzy
Dbaj o dostępność: Zapewnij dobry kontrast kolorów i czytelne rozmiary czcionek
Używaj odstępów: Dodaj padding i marginesy, aby uzyskać czysty, przejrzysty wygląd
Wyróżniaj błędy: Stylizuj komunikaty o błędach wyraźnym kolorem (np. czerwonym), aby pomóc użytkownikom poprawić błędy
Testuj na urządzeniach mobilnych: Upewnij się, że Twoje formularze dobrze wyglądają na wszystkich urządzeniach
Rozwiązywanie problemów
Jeśli Twoje style się nie wyświetlają, spróbuj tych kroków:
Wyczyść pamięć podręczną przeglądarki i strony – Czasami pliki z pamięci podręcznej uniemożliwiają wyświetlanie nowego CSS. Jeśli używasz wtyczki cache lub hostingu zarządzanego, wyczyść także te pamięci podręczne.
Sprawdź specyficzność CSS – Jeśli Twoje style nie są stosowane, spróbuj uczynić selektory bardziej szczegółowymi, aby nadpisać istniejące style.
Upewnij się, że edytujesz właściwy plik lub sekcję CSS – Sprawdź, czy dodajesz kod we właściwym miejscu, np. w panelu Dodatkowy CSS, pliku style.css motywu potomnego lub wtyczce do własnego CSS.
Sprawdź klasy CSS pod kątem literówek lub błędów – Poszukaj błędnie napisanych nazw klas, zbędnych spacji lub przypadkowego użycia niewłaściwej klasy. Upewnij się też, że klasa, którą wybierasz, faktycznie istnieje w HTML Twojego formularza.
Sprawdź duplikaty lub konflikty klas – Upewnij się, że klasa, której używasz, nie jest już stosowana gdzie indziej z innymi stylami, które mogą nadpisać Twoje zmiany.
Stosuj ogólne dobre praktyki – Używaj jasnych i spójnych nazw klas, kończ każdą regułę CSS średnikiem i zawsze poprawnie zamykaj bloki kodu klamrą (}).
Dokładne sprawdzenie kodu pod kątem tych typowych problemów pomoże upewnić się, że Twoje własne style wyświetlają się poprawnie na stronie.
Przykład: Kompletny własny CSS dla formularza 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;
}
Oto przykład formularza wystylizowanego powyższym kodem CSS. Ten kod CSS dostosowuje wygląd kilku kluczowych elementów formularza Contact Form 7. Obejmuje wszystkie pola tekstowe, pola e-mail oraz obszary tekstowe, nadając im jasnoszarą ramkę, zaokrąglone rogi, wygodny padding i spójną szerokość, co zapewnia czysty, nowoczesny wygląd.
Kod stylizuje także przycisk wysyłania, nadając mu zielone tło, biały tekst, zaokrąglone krawędzie oraz pogrubioną, czytelną czcionkę. Gdy użytkownik najedzie kursorem na przycisk, tło staje się ciemnozielone, zapewniając interaktywną informację zwrotną.
Dodawanie CSS: motywy klasyczne vs motywy blokowe
Kroki opisane w tym przewodniku dotyczą stylizacji formularzy Contact Form 7 za pomocą CSS w motywach klasycznych WordPress. Motywy klasyczne, takie jak popularny Astra, korzystają z Personalizatora, gdzie łatwo można dodać własny CSS w sekcji „Dodatkowy CSS”. Dzięki temu stylizowanie formularzy i podgląd zmian na żywo jest bardzo proste.
Jeśli jednak Twoja strona korzysta z motywu blokowego (czasem nazywanego Full Site Editing lub FSE), proces wygląda inaczej. Motywy blokowe nie zawsze mają Personalizator ani pole „Dodatkowy CSS” domyślnie. Zamiast tego do zmian projektowych używasz Edytora witryny. Możesz tam dostosować globalne style kolorów, typografii i układu, ale dodawanie dowolnego własnego CSS nie zawsze jest dostępne w interfejsie.
Co zrobić, jeśli używasz motywu blokowego
Otwórz panel WordPress i przejdź do Wygląd > Edytor (Edytor witryny).
W Edytorze witryny poszukaj panelu Style (ikona półcienia koła).
Niektóre motywy blokowe oferują teraz opcję „Dodatkowy CSS” w panelu Stylów, ale zależy to od motywu i wersji WordPressa.
Jeśli nie widzisz opcji dodania własnego CSS, możesz użyć wtyczki takiej jak WPCode, aby dodać CSS na całej stronie. WPCode jest przyjazny dla początkujących i działa z każdym motywem, dzięki czemu możesz stylizować formularze nawet wtedy, gdy Twój motyw nie obsługuje bezpośredniej edycji CSS w interfejsie. Pamiętaj jednak, że instalacja tej wtyczki może wpłynąć na styl innych istniejących formularzy na Twojej stronie.
Dodatkowe zasoby
Stylizowanie formularzy Contact Form 7 to prosty, ale skuteczny sposób na podniesienie jakości doświadczenia użytkownika na stronie. Kilka linijek CSS sprawi, że formularze będą wyglądać i działać jak naturalna część Twojej marki.