Strona może mieć dopracowane logo, sensowne kolory i porządny układ, a potem nagle pojawia się formularz kontaktowy wyglądający, jakby przyjechał z zupełnie innej witryny. Inny font, przypadkowe obramowania, przycisk z własnym życiem i etykiety, które ledwo widać. Niby drobiazg, ale użytkownik nie ocenia każdego elementu osobno. Widzi całość.

WordPress rozwija stylowanie formularzy w Global Styles, więc część takich poprawek może być prostsza niż wcześniej. Jest jednak mała gwiazdka, i to całkiem ważna: nie każda zapowiadana funkcja jest już stabilna, a nie każda wtyczka formularzowa musi automatycznie respektować ustawienia edytora. Zobaczmy więc, co można ustawić, gdzie zaczynają się ograniczenia i jak nie zepsuć formularza na telefonie.

Formularz nie musi wyglądać jak doklejony z innej strony

Formularz kontaktowy jest częścią strony, a nie doczepionym dodatkiem do odhaczenia na końcu projektu. Powinien pasować do reszty serwisu: typografii, kolorów, obramowań, odstępów i stylu przycisku. Jeśli marka jest spokojna i uporządkowana, a formularz przypomina panel sterowania z przypadkowej aplikacji, całość traci spójność.

Nie chodzi przy tym o malowanie każdego pola na firmowy kolor za wszelką cenę. Formularz ma być przede wszystkim zrozumiały i wygodny. Spójny wygląd może wspierać odbiór strony, ale sam w sobie nie gwarantuje większej liczby zapytań ani lepszej konwersji. Nie ma tu magicznego suwaka „więcej klientów”. Liczy się także treść pól, ich liczba, sposób działania, komunikaty i wygoda obsługi.

Dlatego stylowanie warto potraktować jako część porządkowania strony. Najpierw ustalasz, jak formularz ma wyglądać i działać, a dopiero potem sprawdzasz, które ustawienia da się wprowadzić w Global Styles, które zależą od motywu lub bloku, a gdzie potrzebna będzie wtyczka albo dodatkowy CSS.

Co właściwie zmieniają style formularzy w Global Styles

Global Styles to miejsce, w którym można zarządzać wybranymi zasadami wyglądu strony z poziomu edytora. WordPress rozwija tam obsługę elementów formularzy. W materiałach dotyczących cyklu 7.2 wymieniono stylowanie form elements, a także rozwój stylów responsywnych i niestandardowych stanów elementów.

W opisanych możliwościach pojawiają się między innymi etykiety, pola tekstowe oraz listy wyboru. Element label można stylować przez ustawienia stylów, a elementy textInput i select są opisane jako obsługiwane przez theme.json oraz interfejs Styles. W praktyce może to oznaczać ustawianie typografii, kolorów i części wyglądu bez ręcznego pisania CSS dla każdego elementu.

Brzmi dobrze? Jasne. Tylko nie wyciągajmy z tego zbyt szybkiego wniosku, że każda instalacja WordPressa ma już kompletny panel do stylowania dowolnego formularza.

Global Styles, theme.json i wtyczka — trzy różne poziomy ustawień

Najprościej myśleć o tym jak o trzech warstwach:

• Global Styles i theme.json opisują ustawienia obsługiwane przez motyw oraz edytor.
• Blok formularza może korzystać z tych ustawień, ale zakres zależy od tego, co faktycznie obsługuje.
• Wtyczka formularzowa może mieć własne pola, klasy i zasady stylowania, więc trzeba sprawdzić ją osobno.

To ważne, bo badane materiały nie potwierdzają identycznego działania każdej wtyczki. Sam fakt, że WordPress rozwija Global Styles, nie oznacza automatycznie, że formularz dodany przez dowolne narzędzie przejmie wszystkie ustawienia. Czasem zadziała typografia i kolor, ale nie układ. Czasem pola będą wyglądały dobrze, a przycisk nadal będzie wymagał osobnej reguły.

Czy da się ogarnąć formularz bez CSS? Tak, ale z gwiazdką

W prostym przypadku odpowiedź brzmi: częściowo tak. Jeśli formularz korzysta z obsługiwanych elementów, a motyw poprawnie współpracuje z edytorem, z poziomu interfejsu stylów może dać się ustawić między innymi typografię, kolory tekstu, obramowania i część odstępów. To wystarczy, żeby formularz przestał wyglądać jak przypadkowy gość.

Gwiazdka pojawia się przy bardziej nietypowych układach. Jeśli wtyczka ma własne style, motyw ogranicza dostępne ustawienia albo formularz korzysta z elementów, których Global Styles nie obejmuje, CSS nadal może być potrzebny. To nie jest porażka ani dowód, że WordPress „nie działa”. Po prostu różne warstwy strony mają różne możliwości.

Przed zmianami sprawdź konkretną wersję WordPressa, motyw, użyte bloki i wtyczkę formularza. Potem zobacz efekt na stronie widocznej dla użytkownika, a nie tylko w edytorze. Ustawienie, które wygląda poprawnie w panelu, może inaczej zachować się po publikacji, na węższym ekranie albo w określonym stanie pola.

Najbezpieczniejsze podejście? Traktować nowe ustawienia jako rozwiązanie do sprawdzenia w konkretnej konfiguracji, a nie jako uniwersalny zamiennik CSS. Szczególnie że roadmapa WordPressa 7.2 opisuje plan prac, nie gwarancję, że każda zapowiedź trafi do finalnego wydania dokładnie w opisanym kształcie.

Jak ujednolicić pola, etykiety i przycisk

Zanim zaczniesz klikać ustawienia, ustal kilka prostych zasad. Formularz nie potrzebuje designerskich fajerwerków. Potrzebuje konsekwencji. Pole tekstowe, lista wyboru i przycisk powinny wyglądać jak elementy tej samej strony, a nie jak trzy różne systemy.

Co ustalić przed klikaniem ustawień

• Typografia: wybierz sposób prezentowania etykiet oraz tekstu wpisywanego w pola.
• Kolory: ustal kolor tekstu, obramowania, tła i przycisku, pilnując czytelności.
• Obramowania i narożniki: zdecyduj, czy formularz ma być delikatny, wyraźny, zaokrąglony czy bardziej prosty.
• Odstępy: zaplanuj przestrzeń między etykietą, polem, komunikatem i kolejnym elementem.
• Stany: osobno sprawdź zwykły wygląd, focus, hover, błąd i poprawne uzupełnienie.

Nie styluj wyłącznie podstawowego stanu pola. Użytkownik musi widzieć, gdzie aktualnie pisze, co wymaga poprawy i czy formularz przyjął jego dane. Kolor może pomagać, ale nie powinien być jedyną informacją o błędzie, focusie czy poprawnym uzupełnieniu.

Zostaw widoczne, jednoznaczne etykiety. Placeholder może podpowiadać format albo przykład, ale nie powinien być jedynym opisem pola. Po rozpoczęciu wpisywania często znika, a wtedy użytkownik może już nie pamiętać, czego właściwie dotyczyło pole. Etykieta powinna być także poprawnie powiązana z kontrolką formularza.

Właśnie tutaj widać różnicę między „ładnie” a „dobrze”. Minimalistyczny formularz bez etykiet może wyglądać elegancko na makiecie, ale w praktyce szybko robi się zagadką. Użytkownik nie powinien rozwiązywać rebusu, zanim wyśle wiadomość.

Telefon to nie pomniejszony komputer

Formularz, który wygląda dobrze na szerokim ekranie, niekoniecznie będzie wygodny na telefonie. Najpierw sprawdź, czy pola nie wychodzą poza ekran, czy tekst nie jest ucinany i czy etykiety nadal jasno mówią, czego dotyczy dana kontrolka. Etykiety umieszczone nad polami mogą ograniczać problemy z poziomym przewijaniem na urządzeniach mobilnych.

Nie usuwaj etykiet tylko po to, żeby zyskać trochę miejsca. Mniej elementów na ekranie nie zawsze oznacza prostszą obsługę. Sprawdź też właściwe typy pól HTML5. Typy takie jak number i date mogą uruchamiać na telefonie dopasowaną klawiaturę albo natywny wybór daty. To drobna decyzja techniczna, która wpływa na codzienne wpisywanie danych.

Przetestuj przycisk, checkboxy i inne elementy interaktywne palcem, bez precyzji chirurga. WCAG 2.2 zawiera kryterium dotyczące minimalnego rozmiaru celów dotykowych: wskazuje próg 24 na 24 piksele CSS albo odpowiedni odstęp między mniejszymi celami. Nie oznacza to, że każde pole formularza ma mieć dokładnie taki wymiar. Chodzi o to, żeby małe elementy nie tworzyły toru przeszkód.

Na telefonie sprawdź konkretnie:

• czy klawiatura ekranowa nie zasłania aktywnego pola;
• czy selecty dają się wygodnie otworzyć i obsłużyć;
• czy checkboxy można łatwo zaznaczyć;
• czy focus jest widoczny także bez patrzenia na zmianę koloru;
• czy komunikaty błędów są czytelne i pojawiają się przy właściwych polach;
• czy przycisk nie jest zbyt mały ani odsunięty od treści, której dotyczy.

Czy WordPress 7.2 jest już gotowy na stronę firmową?

Nie da się odpowiedzieć bezwarunkowym „tak”. Materiały dotyczące WordPressa 7.2 opisują funkcje planowane i rozwijane. Sama roadmapa zaznacza, że nie każda praca musi trafić do finalnej wersji. To oznacza, że nie warto budować strony firmowej na założeniu, że zapowiedziane ustawienia na pewno będą działały tak samo w każdej instalacji.

Można natomiast sprawdzić, co jest dostępne w konkretnej wersji WordPressa i jak zachowuje się na danym motywie. Przed wdrożeniem zweryfikuj także blok albo wtyczkę formularza oraz efekt na froncie. Jeśli ustawienia działają, świetnie. Jeśli nie obejmują potrzebnego elementu, trzeba rozważyć dodatkowe style albo inne rozwiązanie.

Najrozsądniejszy wniosek jest prosty: rozwój Global Styles jest obiecujący, ale nie traktuj go jako uniwersalnego przycisku „bez CSS”. Najpierw test, potem publikacja. Kolejność odwrotna potrafi zrobić z formularza mały, lecz bardzo widoczny bałagan.

Krótka checklista przed publikacją formularza

Przed wypuszczeniem formularza na stronę przejdź przez krótką listę:

• czy pola, etykiety i przycisk pasują do identyfikacji wizualnej strony;
• czy widoczne są jednoznaczne etykiety, a nie tylko placeholdery;
• czy działają stany focus, hover, błąd i poprawne uzupełnienie;
• czy formularz mieści się na telefonie i nie wymaga poziomego przewijania;
• czy klawiatura ekranowa, selecty, checkboxy i komunikaty błędów działają poprawnie;
• czy konkretna wtyczka formularzowa współpracuje z ustawieniami motywu i Global Styles;
• czy po zmianach formularz został sprawdzony na stronie widocznej dla użytkownika;
• czy w razie braków wiadomo, które elementy wymagają dodatkowych stylów.

Global Styles mogą uprościć część pracy nad spójnym wyglądem formularza, ale ich działanie zależy od wersji WordPressa, motywu, bloku i wtyczki. Najważniejsze jest połączenie wyglądu z czytelnymi etykietami, widocznymi stanami oraz wygodą na telefonie. Nie wdrażaj zapowiedzi w ciemno i nie zakładaj, że każdy formularz zareaguje identycznie.

Masz stronę, sklep albo materiały graficzne, które proszą się o ogarnięcie? Napisz do INB Marketing i zobaczymy, co da się z tym sensownie zrobić.