Testujesz formularz na komputerze i wygląda idealnie. Pełna szerokość, dwie kolumny, dużo miejsca. Wysyłasz test na telefonie i od razu wiesz, że coś jest nie tak. Pola są malutkie. Klawiatura zasłania połowę formularza. Trafiasz w złe pole. Całość wydaje się zepsuta.
Połowa odwiedzających korzysta z telefonów. Jeśli formularz nie jest responsywny, tracisz połowę zgłoszeń. Ten artykuł pokazuje, jak projektować formularze działające na telefonach, tabletach i komputerach.
Formularze mobilne różnią się od formularzy na komputer
Użytkownicy telefonów wypełniają formularze inaczej niż użytkownicy komputerów. Na komputerze masz miejsce. Możesz użyć układów wielokolumnowych. Możesz umieścić etykiety obok pól. Na telefonie liczy się każdy piksel.
Klawiatury w telefonach są ogromne. Gdy klawiatura się otwiera, zasłania połowę ekranu. Formularz się przewija. Użytkownik traci kontekst. Przycisk, który był widoczny, jest teraz ukryty za klawiaturą.
Obszary dotyku muszą być większe. Klikalny obszar 14 na 14 pikseli działa dobrze z myszą. Palec potrzebuje co najmniej 48 na 48 pikseli, inaczej użytkownik nie trafi.
Użytkownicy telefonów często mają słabe połączenie. Każde dodatkowe wczytanie formularza lub obrazu wydłuża czas. Szybkość liczy się bardziej niż na komputerze.
Jednokolumnowy układ formularza
Najbezpieczniejszy formularz responsywny jest jednokolumnowy. Jedno pole w wierszu, niezależnie od rozmiaru ekranu.
Układy jednokolumnowe są proste, działają na wszystkich ekranach, dają spójne wrażenia i są bardzo przewidywalne. Główna wada to wrażenie, że formularze są dłuższe na komputerze i wymagają więcej przewijania.
Większość formularzy powinna być jednokolumnowa. Jeśli formularz ma pięć pól, jedna kolumna jest w rzeczywistości krótsza niż układ dwukolumnowy na komputerze. Użytkownik przewija mniej i widzi więcej kontekstu.
Aby uzyskać układ jednokolumnowy, użyj input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. To układa wszystko pionowo na każdym punkcie przełamania.
Dwie kolumny na komputerze, jedna na telefonie
Jeśli chcesz wykorzystać poziomą przestrzeń na dużych ekranach, użyj siatki .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } oraz zapytania mediów @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Na komputerze daje to dwie kolumny, a na telefonie układa się w jedną, dzięki czemu układ jest prosty i responsywny.
Grupuj tylko pola, które naprawdę są ze sobą powiązane. "Imię" i "Nazwisko" obok siebie mają sens. "Ulica" i "Kraj" obok siebie już nie.
Obszary dotyku i projekt przyjazny palcom
Minimalny obszar dotyku na telefonie to 44 na 44 piksele (według wytycznych producentów systemów mobilnych) lub 48 na 48 pikseli (Android). Celuj w co najmniej 44.
Wielkość obszaru dotyku dotyczy pól tekstowych, które muszą być dość wysokie, by łatwo w nie trafić (dobre jest 40 do 50 pikseli), pól wyboru i przycisków opcji, które domyślnie mają 13 na 13 pikseli i powinny zostać powiększone do co najmniej 44 na 44 przez CSS lub JavaScript, przycisków, które powinny mieć co najmniej 44 na 44 piksele dzięki dodatkowemu odstępowi wewnętrznemu, oraz etykiet, które też muszą mieć 44 na 44 piksele, jeśli można je kliknąć przez atrybut for. Czasem etykieta i pole razem tworzą pełny obszar dotyku.
Aby powiększyć pola tekstowe i ułatwić stukanie, użyj input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Odstęp wewnętrzny zwiększa wysokość pola i poprawia łatwość trafienia.
Obsługa klawiatury
Na telefonie klawiatura przeglądarki zasłania dolną połowę ekranu. Jeśli formularz jest na dole strony, przycisk wysyłania zostaje ukryty. Użytkownik musi przewinąć w dół lub schować klawiaturę, żeby zobaczyć przycisk.
Trzymaj formularz blisko góry strony. Albo umieść przycisk wysyłania zarówno u góry, jak i na dole. Nie chowaj ważnych przycisków pod klawiaturą.
Ważny jest też typ klawiatury. Dla pola e-mail użyj <input type="email">, żeby pokazać klawiaturę e-mail z klawiszem @. Dla pola telefonu użyj <input type="tel">, żeby pokazać klawiaturę numeryczną. Dla danych liczbowych użyj <input type="number">, żeby pokazać klawiaturę z liczbami. Właściwy typ pola pozwala przeglądarce automatycznie dobrać klawiaturę.
Gdy użytkownik stuknie pole, przeglądarka przewija je do widoku. To dobrze. Pole jest widoczne, gdy trzeba pisać. Ale czasem przewija obok innego kontekstu. Przetestuj formularz na prawdziwym telefonie, żeby zobaczyć to zachowanie.
Położenie etykiet na telefonie
Na komputerze etykiety mogą być nad polami, obok nich lub w środku. Na telefonie niemal zawsze najlepiej sprawdza się położenie nad polem.
Etykieta nad polem jest czytelna. Użytkownik widzi etykietę, a potem pole. Na wąskim ekranie etykieta obok pola marnuje poziomą przestrzeń. Tekst zastępczy w polu znika, gdy zaczynasz pisać.
Najlepsza praktyka: umieszczaj etykiety nad polami. Zawsze.
<label for="email">E-mail</label>
<input type="email" id="email">
Odstępy i margines wewnętrzny
Formularze responsywne potrzebują na telefonie więcej odstępów, nie mniej. Twój instynkt każe ścisnąć wszystko, żeby zmieściło się na ekranie. Opieraj się temu instynktowi.
Używaj hojnych odstępów: co najmniej 1rem (16 pikseli) między polami, co najmniej 0,75rem (12 pikseli) z każdej strony dla odstępu wewnętrznego pól i co najmniej 1rem (16 pikseli) z każdej strony dla odstępu wewnętrznego przycisków. Hojne odstępy ułatwiają korzystanie z formularzy, zmniejszają liczbę chybionych stuknięć, poprawiają czytelność, a na telefonie oddech jest cenniejszy niż miejsce na ekranie.
Rozmiar tekstu na telefonie
Używaj co najmniej 16 pikseli w polach tekstowych. Mniejszy tekst zmusza użytkowników do powiększania lub mrużenia oczu. 16 pikseli to wartość domyślna i działa dobrze.
Etykiety mogą być mniejsze, około 14 pikseli. Ale pola tekstowe powinny mieć minimum 16 pikseli.
Niektóre przeglądarki automatycznie powiększają widok, gdy stukniesz pole mniejsze niż 16 pikseli, przez co formularz niespodziewanie skacze i się powiększa. Użyj input { font-size: 16px; }, żeby tego uniknąć.
Typowe błędy w formularzach responsywnych
Układ dwukolumnowy na wszystkich ekranach
Formularze są ściśnięte na telefonie. Pola są malutkie. Etykiety układają się niezgrabnie. Zawsze układaj w jedną kolumnę przy mniejszych punktach przełamania.
Zbyt małe obszary dotyku
Pola wyboru, przyciski opcji i przyciski muszą mieć co najmniej 44 na 44 piksele. Testuj na prawdziwym telefonie. Jeśli musisz się skupiać, żeby w coś trafić, to jest za małe.
Tekst zastępczy jako jedyna etykieta
Gdy użytkownik zaczyna pisać, tekst zastępczy znika. Zapomina, do czego służy pole. Zawsze używaj prawdziwego elementu label. Możesz zostawić tekst zastępczy, ale nigdy nie polegaj tylko na nim.
Formularz na dole długiej strony
Użytkownik przewija do formularza kontaktowego, stuka pole e-mail, a klawiatura zasłania formularz. Nie widzi, co wpisuje, ani nie dosięgnie przycisku wysyłania. Umieszczaj formularze blisko góry albo zadbaj, żeby mieściły się na ekranie razem z klawiaturą.
Brak testów na prawdziwych telefonach
Przeglądarka na komputerze ma tryb widoku mobilnego. Jest przydatny do szybkiego sprawdzenia. Ale nie pokazuje, jak formularz naprawdę działa na telefonie. Testuj na prawdziwych urządzeniach. Pożycz telefon, jeśli go nie masz.
Techniki formularzy responsywnych
CSS Grid dla elastycznych układów
Użyj .form-group { display: grid; gap: 0.5rem; } oraz .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Wartości auto-fit i minmax tworzą układ dopasowujący się do dostępnej przestrzeni: pola układają się jedno pod drugim na wąskich ekranach i obok siebie na szerokich.
Flexbox dla układu przycisków
Użyj .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } oraz .form-actions button { flex: 1; min-width: 150px; }. Przyciski stoją obok siebie na komputerze, zawijają się do kilku wierszy na telefonie, a każdy rośnie, żeby wypełnić dostępne miejsce.
Zapytania mediów dla konkretnych punktów przełamania
Użyj @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } }, żeby wymusić układ jednokolumnowy na ekranach węższych niż 480 pikseli.
Jak formularze WEMASY dopasowują się do każdego ekranu
Kreator formularzy WEMASY automatycznie tworzy formularze responsywne. Budujesz na komputerze, a wersja na telefon jest już gotowa. Formularze układają się w jedną kolumnę na telefonach. Obszary dotyku mają rozmiar dopasowany do telefonów. Etykiety i pola mają właściwe odstępy. Bez dodatkowej pracy.
Zobacz, jak działa responsywność formularzy w Twoim pakiecie WEMASY.