Jak stylizować formularze w WordPress?

Stylizacja formularzy w WordPressie opiera się przede wszystkim na własnym CSS. Dzięki niemu możesz dopasować pola, etykiety i przyciski do motywu bez zmiany wtyczki, na przykład Contact Form 7 lub WPForms. Najważniejszy etap polega na znalezieniu właściwych klas CSS, a następnie dodaniu reguł w Customizerze lub motywie potomnym.

Metody stylizacji formularzy w WordPressie

Domyślny wygląd formularza zależy zarówno od wtyczki, jak i aktywnego motywu. Czasem wystarczy zmiana koloru przycisku, innym razem trzeba ustawić szerokość pól, odstępy, obramowanie oraz wygląd komunikatów. Możesz zrobić to na kilka sposobów.

Własny CSS zwykle daje najlepszy kompromis między kontrolą a wydajnością. Dodatkowa wtyczka może przyspieszyć konfigurację, ale zwiększa liczbę elementów utrzymywanych na stronie i nie zawsze pozwala precyzyjnie dopasować każdy szczegół. Nie edytuj bezpośrednio plików wtyczki formularza, ponieważ aktualizacja może usunąć wprowadzone zmiany.

Jak znaleźć odpowiednie klasy CSS?

Każda wtyczka generuje własny kod HTML. Dlatego selektory używane w Contact Form 7 mogą różnić się od tych w WPForms. Zamiast zgadywać nazwy klas, sprawdź je w narzędziach deweloperskich przeglądarki. Do inspekcji możesz użyć między innymi:

• Chrome DevTools
• Firefox Inspector
• Microsoft Edge DevTools
• Safari Web Inspector

W Chrome i większości innych przeglądarek otworzysz je klawiszem F12 albo przez kliknięcie prawym przyciskiem myszy i wybranie opcji „Zbadaj”. Następnie wykonaj poniższe czynności:

1. Otwórz stronę zawierającą formularz i uruchom narzędzia deweloperskie.
2. Wybierz ikonę wskaźnika, a potem kliknij pole formularza, które chcesz zmienić.
3. W panelu HTML odszukaj element <input>, <textarea> albo <button> oraz przypisane do niego klasy.
4. Skopiuj nazwę klasy i przetestuj regułę CSS w zakładce z deklaracjami stylów, a następnie przenieś gotowy kod do WordPressa.

W Contact Form 7 często spotkasz klasę .wpcf7-form-control, ale nie zakładaj, że będzie ona wystarczająca dla każdego elementu. Selektor może być zbyt ogólny i zmienić wygląd kilku różnych pól. Bezpieczniej zawęzić go do konkretnego formularza, jego kontenera albo rodzaju pola.

Przykłady kodu CSS dla formularza

Poniższy przykład zmienia wygląd pól tekstowych, adresu e-mail oraz pola wielowierszowego. Selektor .wpcf7 ogranicza działanie reguł do formularzy Contact Form 7. Jeżeli używasz innej wtyczki, zastąp tę klasę selektorem znalezionym w narzędziach deweloperskich.

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  background-color: #ffffff;
  color: #222222;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  border-color: #2463eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 99, 235, 0.15);
}

Selektor :focus odpowiada za stan pola, które aktualnie jest używane. Obramowanie i delikatny cień pomagają wskazać użytkownikowi miejsce wpisywania danych. Nie usuwaj jednak całkowicie widocznego wyróżnienia, ponieważ jest ono ważne także dla osób korzystających z klawiatury.

Przycisk wysyłania możesz ostylować osobno. Poniższy kod zmienia jego kolor, odstępy, zaokrąglenie oraz wygląd po najechaniu kursorem:

.wpcf7 input[type="submit"] {
  padding: 12px 24px;
  border: 0;
  border-radius: 6px;
  background-color: #2463eb;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #174bb8;
  transform: translateY(-1px);
}

.wpcf7 input[type="submit"]:focus {
  outline: 3px solid rgba(36, 99, 235, 0.35);
  outline-offset: 2px;
}

Jeżeli formularz korzysta z elementu <button> zamiast <input type="submit">, użyj selektora .wpcf7 button albo dokładnej klasy odczytanej w inspektorze. W niektórych motywach domyślne reguły mają większą specyficzność. Wtedy możesz zawęzić selektor, ale traktuj !important jako ostateczność, a nie podstawową metodę rozwiązywania konfliktów.

Przy pisaniu własnych reguł CSS trzymaj się kilku zasad:

• Używaj klas i selektorów ograniczonych do formularza zamiast bardzo ogólnych reguł dla wszystkich elementów strony.
• Sprawdzaj wygląd na telefonie, ponieważ pola o stałej szerokości mogą powodować przewijanie poziome.
• Dobieraj kolory, kontrast i odstępy do istniejącej palety oraz typografii motywu.
• Testuj stany normalne, focus, hover, błędy walidacji i komunikat po wysłaniu formularza.

Gdzie wkleić kod CSS w WordPressie?

Najprostszym i bezpiecznym miejscem jest panel WordPressa. Otwórz Wygląd → Dostosuj → Dodatkowy CSS, wklej reguły, zapisz zmiany i sprawdź formularz na stronie. Nazwy sekcji mogą się różnić w zależności od motywu i jego sposobu obsługi edytora.

Jeśli korzystasz z motywu potomnego, możesz umieścić kod w jego arkuszu stylów. To dobre rozwiązanie przy większej liczbie zmian lub własnym systemie stylowania. Nie wprowadzaj zmian bezpośrednio w plikach aktywnego motywu ani w plikach Contact Form 7. Aktualizacja może je nadpisać, a modyfikowanie plików wtyczki utrudnia późniejsze utrzymanie strony.

Gdy styl formularza nie zmienia się po zapisaniu kodu, sprawdź poprawność selektora, kolejność ładowania arkuszy oraz pamięć podręczną. Dopiero po potwierdzeniu tych kwestii rozważ zwiększenie specyficzności reguły.

Najbezpieczniejszy schemat pracy jest prosty: znajdź element w inspektorze, skopiuj jego klasę, przetestuj CSS i zapisz kod w Customizerze lub motywie potomnym. Dzięki temu formularz może pasować do wyglądu strony bez ingerowania w działanie wtyczki.