Projektowanie formularzy: najlepsze praktyki w zakresie konwersji

Zaktualizowano 19 października 2026 r.

Twój formularz jest krótki. Pytania są trafne. Ruch płynie. A jednak na urządzeniach mobilnych znaczna część odwiedzających zatrzymuje się na drugim polu. Problemem często nie jest ani oferta, ani liczba pytań, ale projekt formularza. Klawiatura alfabetyczna otwierająca się na polu kodu pocztowego, etykieta znikająca zaraz po wpisaniu tekstu, jasnoszary przycisk, który jest ledwo widoczny. Ten przewodnik zawiera najlepsze praktyki dotyczące projektowania formularzy, które mają mierzalny wpływ na konwersję, wraz z dokładnym kodem lub ustawieniami, które należy zastosować.

Krótko mówiąc: projekt formularza, który konwertuje, spełnia pięć najlepszych praktyk: pojedyncza kolumna z widocznymi etykietami nad polami, klawiatura mobilna dostosowana do każdego typu danych, krótkie kroki z widocznym postępem, odpowiedni kontrast (4,5:1 dla tekstu, 3:1 dla obramowań pól) oraz przycisk, który wyraźnie wskazuje wynik użytkownika. Te ustawienia są niedrogie we wdrożeniu i eliminują tarcia prowadzące do porzucenia formularza na urządzeniach mobilnych.

Jedno wyjaśnienie, zanim przejdziemy do szczegółów: ten artykuł nie dotyczy długości formularzy, ale ich formatu. Na końcu znajdziesz 12-punktową listę kontrolną, która pozwoli Ci zweryfikować swój formularz w zaledwie dziesięć minut.

Układ: jedna kolumna, etykiety nad polami

Najbardziej efektywnym układem formularza generowania leadów jest pojedyncza kolumna, gdzie każda etykieta znajduje się nad odpowiadającym jej polem. Wzrok podąża za linią prostą, bez konieczności zygzakowania między kolumnami lub szukania, która etykieta odpowiada danemu polu.

Liczby to potwierdzają. W badanie kontrolowane przeprowadzone przez CXL Institute (obecnie Speero) z udziałem 702 uczestników, wersja jednokolumnowa została ukończona w średnim czasie 102,3 sekundy, w porównaniu do 117,8 sekundy w wersji wielokolumnowej. Oznacza to oszczędność czasu rzędu 13%, przy zachowaniu identycznych pytań.

Ważna różnica: w badaniu mierzono tylko czas wypełniania formularza przez osoby, które go wypełniły. Nie mówi się nic o tych, którzy zrezygnowali. Jednak formularz, który można szybko przeczytać, rzadko zniechęca.

Etykieta zastępcza, etykieta ruchoma czy etykieta stała?

Stała etykieta, zawsze widoczna nad polem, pozostaje najbezpieczniejszym wyborem. Przykładowy tekst umieszczony wewnątrz pola (symbol zastępczy) znika natychmiast po naciśnięciu pierwszego klawisza: użytkownik przeglądający wprowadzone dane nie wie już, o co został zapytany.

Etykiety pływające, spopularyzowane przez Material Design, rozwiązują tylko część problemu. Etykieta kurczy się, dopasowując się do pola, długi nagłówek zostaje obcięty, a kontrast zredukowanego tekstu jest często zbyt niski. Należy zarezerwować symbol zastępczy dla przykładu formatowania („06 12 34 56 78”), nigdy jako jedyną etykietę.

Dopuszczalne są dwa wyjątki

Zasada jednej kolumny dopuszcza wyjątki, gdy dwa pola reprezentują to samo pojęcie: kod pocztowy i miasto lub datę ważności i kod bezpieczeństwa. Umieszczenie ich obok siebie na komputerze pozostaje czytelne, pod warunkiem, że są wyświetlane jedno pod drugim na urządzeniu mobilnym.

Mobilny: Wyświetl poprawną klawiaturę dla każdego pola

Każde pole powinno aktywować klawiaturę odpowiadającą oczekiwanym danym: klawiaturę numeryczną do wprowadzenia kodu pocztowego, klawiaturę telefoniczną do wprowadzenia numeru telefonu oraz klawiaturę ze znakiem „@” do wprowadzenia adresu e-mail. Ten szczegółowy kod HTML zapobiega konieczności ręcznego przełączania się użytkownika między klawiaturami dla każdego pola.

Ten szczegół jest często źle wdrażany, nawet w dużych lokalizacjach. Audyt klawiatur dotykowych przeprowadzony przez Baymard Institute wykazał, że 54% największych amerykańskich witryn e-commerce nie wyświetlało zoptymalizowanej klawiatury w przypadku pól numeru telefonu, kodu pocztowego lub karty kredytowej, 79% użytkowników pozostawiło włączoną autokorektę, co powoduje błąd w danych wejściowych. Adres e-mail „skorygowany” numerem telefonu to stracony trop.

Oto ustawienia, które należy zastosować do najczęściej używanych pól w formularzu kontaktowym w języku francuskim:

Unikać type='number' w przypadku kodu pocztowego lub numeru SIRET: dodaje niepotrzebne strzałki zwiększające wartość na komputerze i może usunąć początkowe zero z kodu pocztowego, np. 01000.

Pułapka zoomu iPhone'a

W systemie iOS Safari automatycznie powiększa pola z tekstem mniejszym niż 16 pikseli. Strona się przesuwa, przycisk znika z ekranu i użytkownik musi ręcznie pomniejszyć obraz. Ustaw rozmiar czcionki w polach na minimum 16 pikseli: problem znika.

Rozważ również cele dotykowe. Przycisk radiowy o rozmiarze 16 pikseli jest trudny do dotknięcia kciukiem; staraj się, aby klikalne obszary miały co najmniej 44 × 44 piksele, dzięki czemu klikalny będzie cały wiersz opcji, a nie tylko kropka.

Autofokus i autouzupełnianie: pomoc bez wymuszania czegokolwiek

Autouzupełnianie w przeglądarce oszczędza cenne sekundy; autofokus natomiast częściej przeszkadza niż pomaga. To dwa podobne ustawienia o przeciwstawnych efektach.

Atrybut autocomplete pozwala przeglądarce uzupełnić imię, e-mail, telefon i adres jednym dotknięciem. W formularzu wyceny z sześcioma polami może to ograniczyć wpisywanie do dwóch–trzech dotknięć. Z kolei wyłączenie autouzupełniania „dla bezpieczeństwa” w formularzu kontaktowym utrudnia życie użytkownikowi, niczego nie chroniąc.

Autofokus, który automatycznie umieszcza kursor w pierwszym polu po załadowaniu, stwarza kilka problemów. Brytyjski projektant Adam Silver wymienia pięć: nieoczekiwane podziały stron, zablokowane przewijanie klawiatury, niedostępne skróty przeglądarki, czytnik ekranu odczytujący etykietę pola zamiast tytułu strony oraz w systemie Android pole aktywowane bez otwierania klawiatury.

Nasza rekomendacja jest prosta. Nie ustawiaj autofocusa na stronie zawierającej cokolwiek innego niż formularz (tekst wprowadzający, argumenty, opinie klientów). Natomiast w przypadku formularza wieloetapowego przydatne jest przeniesienie fokusa na tytuł kolejnego kroku: osoba nawigująca za pomocą klawiatury lub czytnika ekranu od razu wie, gdzie się znajduje.

Podziel to na kroki, nie tracąc przy tym uwagi czytelnika

Formularz wieloetapowy jest skuteczniejszy, gdy na każdym ekranie pojawia się tylko jedno lub dwa pytania, postępy są widoczne, a odpowiedź na pierwsze pytanie wymaga minimalnego wysiłku. Rozbicie formularza na części nie jest rozwiązaniem idealnym: źle zaprojektowany, zwiększa liczbę kliknięć bez zmniejszania nakładu pracy.

Trzy zasady projektowania robią całą różnicę:

• Zacznij od łatwego i angażującego pytania : rodzaj projektu lub potrzeby jest prezentowany na dużych, klikalnych kartach. Dane kontaktowe są dodawane na końcu, po tym, jak użytkownik poświęci już trochę czasu.
• Pokaż uczciwy postęp :„Krok 2 z 4” jest lepszy niż takt, który na początku porusza się szybko, a potem staje w miejscu.
• Automatyczne przejście do następnego ekranu po dokonaniu pojedynczego wyboru (przycisku radiowego), ale nigdy po wpisaniu tekstu, gdzie użytkownik musi zachować kontrolę.

Aby zagłębić się w ten format, nasze przykłady formularzy ofertowych z wieloma krokami i adnotacjami pokaż kolejność pytań, która działa zgodnie z sektorami. Aby wyświetlić tylko pytania istotne dla każdego profilu, logika warunkowa unika wyświetlania pola „Liczba pracowników” użytkownikowi.

Partycjonowanie można wykonać bez udziału programisty z funkcjami Blastform : kroki, mapy wizualne, pasek postępu i warunki wyświetlania są konfigurowane z poziomu edytora.

Kolory, kontrast i dostępność

Dostępna forma to również forma, która lepiej konwertuje: tekst musi zapewniać kontrast co najmniej 4,5:1 z tłem, a obramowanie pól co najmniej 3:1, zgodnie z kryteriami WCAG 1.4.3 i 1.4.11. To drugie kryterium jest najczęściej pomijane.

Najnowsze trendy w projektowaniu graficznym preferują bardzo jasne szare pola na białym tle, bez widocznej granicy. W rezultacie, na ekranie telefonu w jasnym świetle słonecznym, użytkownik nie jest już w stanie rozróżnić, gdzie kliknąć. Szara granica, taka jak #767676 na białym tle, zdaje egzamin; bardzo popularny #E0E0E0 nie spełnia oczekiwań.

Trzy inne odruchy, które należy przyjąć:

• Nigdy nie wskazuj błędu wyłącznie na podstawie koloru. Czerwona obwódka nie wystarczy dla około 8% mężczyzn dotkniętych daltonizmem: wystarczy dodać ikonę i wiadomość tekstową.
• Połącz każdą etykietę z jej polem (etykietka label z atrybutem for): Kliknięcie etykiety aktywuje pole, a czytnik ekranu odczyta prawidłowe pytanie.
• Utrzymuj widoczny wskaźnik ostrości. Usunięcie domyślnego niebieskiego konturu bez zastąpienia go innym spowoduje, że formularz stanie się bezużyteczny za pomocą klawiatury.

Problem nie jest już tylko kwestią wygody. Od 28 czerwca 2025 r. Europejski Akt w sprawie Dostępności nałożył wymogi dostępności na wiele publicznych usług online w Unii Europejskiej, w tym na usługi e-commerce i bankowość. Zgodny formularz pozwala uniknąć konieczności ponownego wypełniania formularza w przyszłości.

Z punktu widzenia identyfikacji wizualnej, dopasowanie kolorów i typografii formularza do wyglądu witryny internetowej buduje zaufanie: formularz, który wygląda jak ogólny widget innej firmy, wzbudza niepokój użytkowników. Omawiamy ten aspekt bardziej szczegółowo w naszym artykule na temat dostosowywanie formularza bez kodowania.

Mikrokopie i komunikaty o błędach

Mikrotekst odnosi się do małego tekstu otaczającego pola: etykiety, tekst pomocy, komunikaty o błędach. Dobrze napisany, rozwiązuje problem, zanim zablokuje użytkownika. Źle napisany, zamienia zwykłą literówkę w porzucenie.

Zaznacz pola opcjonalne, a nie wymagane

Czerwona gwiazdka to odruch dziedziczny, ale wielu użytkowników go nie zauważa lub nie rozumie jego znaczenia. Praktyka zalecana przez kilku specjalistów UX jest odwrotna: zakładaj, że wszystko jest obowiązkowe i dodawaj „(opcjonalne)” tylko do pól, które nie są. Jeśli masz wiele pól opcjonalnych, rozważ ich przydatność.

Sprawdź we właściwym czasie

Według Instytutu Baymarda, 31% przetestowanych witryn nie posiada walidacji pól online, niektórzy użytkownicy, którzy mają taki adres, uruchamiają go zbyt wcześnie. Wyświetlanie komunikatu „nieprawidłowy adres e-mail”, gdy użytkownik wpisał tylko trzy litery, wywołuje frustrację. Właściwy moment: gdy użytkownik opuści pole. A gdy tylko poprawi błąd, komunikat o błędzie powinien zniknąć w trakcie pisania, bez czekania na przejście do innego pola.

Zapisywanie błędów, które pomagają

Porównaj „Nieprawidłowy format” i „Numer musi zawierać 10 cyfr, na przykład 06 12 34 56 78”. Drugie polecenie podpowiada, co zrobić. Umieść komunikat bezpośrednio pod polem, którego dotyczy problem, nigdy nie umieszczaj go na samej górze formularza, i zachowaj wszystkie wpisy wprowadzone po wystąpieniu błędu.

Uspokajanie w przypadku wystąpienia problemu

Pole numeru telefonu to klasyczny problem w formularzu generowania leadów. Pomocna linijka umieszczona bezpośrednio pod nim („Tylko w celu oddzwonienia w sprawie wyceny”) rozwiązuje problem od razu po jego pojawieniu się. Jest to skuteczniejsze niż generyczna stopka, której nikt nie czyta.

Przycisk wysyłania: ostatni licznik

Przycisk powinien jasno wskazywać, co użytkownik otrzymuje, a nie jaką czynność techniczną wykonuje. Opcja „Otrzymaj moją wycenę” konwertuje lepiej niż „Wyślij”, ponieważ wzmacnia obietnicę w momencie finalizacji działania.

Unbounce zgłasza kilka przypadków, w których jedno słowo zmieniło wynik. Na portalu wynajmu biur B2B, zastąpienie przycisku „Zamów” przyciskiem „Odbierz” zwiększyło współczynnik konwersji o 38% :czasownik ostatecznie mówił o tym, co się otrzymuje, a nie o tym, co trzeba zrobić.

Pod względem projektu istotne są cztery ustawienia:

• Pełna szerokość na urządzeniach mobilnych, tak, aby kciuk mógł dosięgnąć go bez celowania.
• Kolor kontrastujący z resztą strony. Nie istnieje „najlepszy kolor”: liczy się kontrast z otoczeniem, a nie czerwień czy zieleń same w sobie.
• Nigdy nie jest wyłączony ani wyszarzony dopóki formularz jest niekompletny, użytkownik nie rozumie, czego brakuje. Pozwól mu kliknąć i wskazać pola do uzupełnienia.
• Stan ładowania po kliknięciu („Trwa wysyłanie…”), aby uniknąć podwójnego przesłania i duplikowania leadów w CRM.

Te optymalizacje projektu są uzupełnieniem tych skoncentrowanych na kosztach zakupu. Jeśli Twoim głównym zmartwieniem jest budżet, zapoznaj się z naszym artykułem na temat obniżenie kosztu pozyskania leadu dzięki konwersji formularzy łączy te ustawienia z Twoimi kampaniami.

Najlepsze praktyki projektowania formularzy: siatka audytu w 10 minut

Oto siatka obiecana na początku artykułu. Weź telefon, otwórz formularz w trybie prywatnym i zaznacz każde pole. Każde „nie” to punkt tarcia, który możesz wyeliminować w tym tygodniu.

1. Na urządzeniu mobilnym formularz mieści się w jednej kolumnie.
2. Nad każdym polem widoczna jest etykieta, która pozostaje wyświetlana podczas wprowadzania danych.
3. Pole adresu e-mail otwiera klawiaturę ze znakiem "@". Nie używa się wielkich liter.
4. Pola numeru telefonu i kodu pocztowego otwierają klawiaturę.
5. Strona nie powiększa się po dotknięciu pola (minimalny rozmiar czcionki 16 px).
6. Przeglądarka automatycznie proponuje wypełnienie pola imienia, adresu e-mail i numeru telefonu.
7. Żadne pole nie otrzymuje automatycznie fokusu po załadowaniu strony.
8. W formularzu wieloetapowym wyświetlany jest postęp („Krok X z Y”).
9. Granice pól pozostają widoczne przy maksymalnym oświetleniu, na zewnątrz.
10. Celowy błąd (adres e-mail bez znaku @) powoduje wyświetlenie wyraźnego komunikatu pod polem, a nie tylko czerwonej ramki.
11. Przycisk opisuje korzyść („Odbierz…”, „Otrzymaj…”) i zajmuje całą szerokość.
12. Po kliknięciu wyświetla się status ładowania, a następnie wyraźne potwierdzenie.

Wynik 10 na 12 lub wyższy oznacza, że ​​Twój projekt prawdopodobnie nie jest główną przeszkodą. Poniżej 8 punktów, zacznij od punktów 3, 4 i 5: są one najszybsze do naprawienia i wszystkie wpływają na użytkowników mobilnych.

Aby zacząć od bazy, która spełnia większość z tych kryteriów, przejrzyj nasze gotowe do użycia szablony formularzy B2B, lub zobacz, jak zrobiły to inne zespoły nasze studium przypadku dotyczące zwiększenia współczynnika konwersji.

Często zadawane pytania

Czy możemy zastąpić etykiety w polach przykładowym tekstem?

Nie. Przykładowy tekst (symbol zastępczy) znika natychmiast po naciśnięciu pierwszego klawisza, uniemożliwiając użytkownikowi sprawdzenie wpisanego tekstu, a jego jasnoszary kolor często zapewnia niewystarczający kontrast. Zachowaj widoczną etykietę nad polem i zarezerwuj symbol zastępczy na przykład formatowania.

Czy formularz dwukolumnowy jest naprawdę mniej wydajny?

W większości przypadków tak. Badanie CXL z udziałem 702 uczestników wykazało o 13% szybszy wskaźnik wypełniania pól jednokolumnowych. Jedynymi uzasadnionymi wyjątkami są powiązane pary pól, takie jak kod pocztowy i miasto, i to tylko na komputerach.

Czy autofokus powinien być aktywowany w pierwszym polu?

Nie na stronie zawierającej cokolwiek innego niż formularz. Autofokus powoduje przeskakiwanie strony, blokuje przewijanie klawiatury i dezorientuje czytniki ekranu. Przydaje się tylko do skupienia się na tytule nowego kroku w formularzu wieloetapowym.

Jaki jest najlepszy kolor przycisku formularza?

Nie ma uniwersalnej reguły. Liczy się kontrast przycisku z resztą strony i czytelność tekstu (co najmniej 4,5:1). Pomarańczowy przycisk na pomarańczowej stronie internetowej jest mniej widoczny niż niebieski przycisk na tej samej stronie.

Czy formularz wieloetapowy zawsze zapewnia lepszą konwersję?

Nie, tylko jeśli jest dobrze zaprojektowany: jedno lub dwa pytania na ekran, łatwe pierwsze pytanie, widoczny postęp i dane kontaktowe na końcu. Formularz z trzema polami nie ma powodu, by go dzielić.

Czy chcesz zastosować te najlepsze praktyki bez ingerencji w kod? Wypróbuj Blastform za darmo lub zarezerwuj demo aby omówić Twój aktualny formularz z naszym zespołem.