UX/UI i dostępność

Formularz kontaktowy, który zbiera zapytania: 12 zasad

Formularz kontaktowy, który zbiera zapytania, a nie zniechęca: 12 zasad o polach, przyciskach, błędach, RODO i spamie. Z listą kontrolną.

· zaktualizowano · 6 min czytania

Formularz kontaktowy to miejsce, w którym odwiedzający staje się klientem albo rezygnuje. Często decydują o tym drobiazgi: jedno zbędne pole, niejasny komunikat błędu, przycisk, którego nie widać na telefonie. Poniżej 12 zasad, które stosujemy przy projektowaniu formularzy na stronach firmowych. Każdą możesz sprawdzić na własnej stronie w kilka minut.

Formularz ma dwa zadania. Po pierwsze, ułatwić klientowi kontakt. Po drugie, zebrać tyle informacji, żeby dało się sensownie odpowiedzieć. Te cele bywają sprzeczne: im więcej pytasz, tym lepiej przygotujesz odpowiedź, ale tym mniej osób dotrze do końca. Dobre formularze szukają równowagi i dopasowują się do rodzaju usługi.

Pola i treść formularza

1. Pytaj tylko o to, czego naprawdę potrzebujesz

Przy pierwszym kontakcie zwykle wystarczą trzy pola: imię, sposób kontaktu i wiadomość. Każde kolejne pole przejdź prostym testem: czy bez tej informacji nie da się odpowiedzieć? Jeśli da się, usuń je albo oznacz jako opcjonalne. NIP, adres i nazwę firmy zbierzesz później, gdy klient będzie gotowy do współpracy.

2. Daj wybór formy kontaktu

Jedni wolą maila, inni telefon. Zamiast wymagać obu, poproś o jedno z nich albo dodaj prosty wybór „Jak mamy się odezwać?”. Osoby, które nie chcą podawać numeru, nie zrezygnują z wysłania zapytania.

3. Pomóż napisać wiadomość

Puste pole „Wiadomość” onieśmiela. Krótka podpowiedź pod nim pomaga: „Napisz, czego potrzebujesz, w jakim terminie i jaki masz orientacyjny budżet”. Przy usługach, które trudno opisać słowami, przydaje się pole na zdjęcia lub pliki. Dla pracowni custom-art.pl przygotowaliśmy formularz wyceny ze zdjęciami, bo klientowi łatwiej pokazać przedmiot, niż go opisać.

4. Etykiety zawsze widoczne

Podpowiedź w środku pola, która znika po kliknięciu, to częsty błąd. Gdy zaczynasz pisać, nie pamiętasz już, o co pytano. Etykieta powinna stać nad polem przez cały czas. To wymóg dostępności i po prostu wygoda.

Wygoda na telefonie

5. Właściwa klawiatura i autouzupełnianie

Pole e-mail powinno otwierać klawiaturę z „@”, pole telefonu klawiaturę numeryczną. Dobrze opisane pola pozwalają przeglądarce podpowiedzieć imię i adres z pamięci urządzenia. To kilka linijek kodu, a oszczędza klientowi pisania kciukiem.

6. Duże pola i przyciski

Pola i przycisk wysyłki muszą być wygodne do trafienia palcem, z odstępami między nimi. Tekst w polach nie mniejszy niż reszta treści. Na telefonie formularz najlepiej układa się w jednej kolumnie, pole pod polem.

Przycisk i komunikaty

7. Przycisk, który mówi, co się stanie

„Wyślij” działa, ale „Wyślij zapytanie” albo „Poproś o wycenę” działa lepiej, bo mówi, co klient dostaje. Przycisk powinien być wyraźnie wyróżniony kolorem i nie ginąć pod klauzulami.

8. Błędy, które pomagają

Komunikat „Błąd formularza” u góry strony nic nie mówi. Dobry komunikat pojawia się przy polu, którego dotyczy, i wyjaśnia, co poprawić: „Wpisz adres e-mail w formacie nazwa@domena.pl”. Nie usuwaj danych wpisanych przez klienta po błędzie. Nie zaznaczaj błędu wyłącznie czerwonym kolorem, bo nie każdy go rozróżni.

9. Potwierdzenie i jasne oczekiwania

Po wysłaniu klient powinien zobaczyć wyraźne potwierdzenie: zapytanie dotarło, odpowiemy w ciągu jednego dnia roboczego, w pilnej sprawie zadzwoń pod numer… Do tego automatyczny mail z kopią wiadomości. Bez tego część osób wysyła formularz dwa razy albo dzwoni z pytaniem, czy coś doszło.

Zaufanie i formalności

10. Krótka i zrozumiała informacja o danych

Pod formularzem wystarczy zwięzła informacja, kto jest administratorem danych, w jakim celu je przetwarzasz i link do polityki prywatności. Ściana drobnego druku i pięć obowiązkowych zgód odstrasza. Dobór zgód zależy od tego, co robisz z danymi. To nie jest porada prawna, więc przy wątpliwościach warto skonsultować się z prawnikiem.

11. Ochrona przed spamem bez męczenia ludzi

Klasyczna CAPTCHA z rozpoznawaniem obrazków irytuje i bywa niedostępna dla części osób. Zwykle wystarczą metody niewidoczne dla użytkownika: ukryte pole-pułapka dla botów, sprawdzenie czasu wypełnienia, filtrowanie po stronie serwera. Bardziej zaawansowane mechanizmy włączaj dopiero, gdy spamu jest naprawdę dużo.

Miejsce, pomiar i długość formularza

12. Formularz tam, gdzie klient podejmuje decyzję

Formularz schowany tylko na podstronie „Kontakt” oznacza dodatkowe kliknięcie. Krótka wersja na dole każdej podstrony usługi albo przycisk prowadzący prosto do formularza skraca drogę. Struktura serwisu też ma znaczenie, o czym piszemy w tekście o tym, jakie podstrony powinna mieć strona firmowa.

Do tego mierz. Ustaw w analityce zdarzenie wysłania formularza i sprawdzaj, z których podstron przychodzi najwięcej zapytań. Jeśli możesz, mierz też rozpoczęcie wypełniania, żeby wiedzieć, ile osób rezygnuje w połowie.

Formularz krótki czy wieloetapowy

Przy prostych usługach wygrywa krótki formularz. Przy wycenach, które wymagają wielu informacji (remont, aplikacja, ubezpieczenie), lepiej sprawdza się formularz podzielony na kroki:

Krótki formularz Formularz wieloetapowy
Liczba pól 3–4 kilkanaście, rozłożonych na kroki
Dobry dla zwykłego zapytania, kontaktu wyceny, konfiguracji, kwalifikacji klienta
Zaleta szybki, rzadko porzucany w połowie lepsze dane do odpowiedzi
Na co uważać mało informacji w zapytaniu pasek postępu i możliwość cofnięcia się

W formularzu wieloetapowym zacznij od łatwych pytań z gotowymi odpowiedziami do kliknięcia, a dane kontaktowe zostaw na koniec. Klient, który wybrał już kilka opcji, chętniej dokończy. Taki układ najlepiej sprawdzić na prototypie, zanim powstanie kod. Różnice między etapami projektu opisujemy w tekście o makiecie, prototypie i projekcie graficznym.

Co dzieje się po wysłaniu

Najlepszy formularz nie pomoże, jeśli zapytanie utknie w skrzynce. Część zapytań ginie dopiero po stronie firmy, dlatego warto zadbać o kilka rzeczy:

  • Wiadomość trafia do osoby, która odpowiada, a nie na ogólny adres, którego nikt nie sprawdza. Przy kilku usługach dobrze działa kierowanie zapytań według wybranej kategorii.
  • Adres nadawcy jest poprawnie skonfigurowany, żeby powiadomienia nie lądowały w spamie. To sprawa ustawień domeny i serwera pocztowego.
  • Zapytania mają kopię zapasową, na przykład w arkuszu, CRM albo panelu. Gdy poczta zawiedzie, dane nie przepadną.
  • Odpowiedź przychodzi szybko. Klient, który pisze do kilku firm, często wybiera tę, która odezwała się pierwsza. Jeśli obiecujesz odpowiedź w jeden dzień roboczy, dotrzymuj tego.

Lista kontrolna: sprawdź swój formularz w 10 minut

  • Wysłanie z telefonu działa i wiadomość dociera, nie do spamu.
  • Formularz ma tylko niezbędne pola obowiązkowe.
  • Etykiety są widoczne nad polami przez cały czas.
  • Pole e-mail i telefonu otwiera właściwą klawiaturę.
  • Przycisk mówi, co się stanie po kliknięciu.
  • Błędy pojawiają się przy polach i mówią, jak je poprawić.
  • Po wysłaniu widać potwierdzenie i termin odpowiedzi.
  • Klient dostaje automatyczną kopię wiadomości.
  • Informacja o danych jest krótka i zrozumiała.
  • Obok formularza widać klikalny telefon i adres e-mail.
  • Wysłanie formularza jest mierzone w analityce.

Jeśli kilka punktów nie przechodzi, zacznij od tych, które dotyczą telefonu. Szybkie spojrzenie z zewnątrz da Ci też nasz darmowy audyt strony.

Podsumowanie

Formularz kontaktowy, który zbiera zapytania, jest krótki, czytelny na telefonie i jasno mówi, co się stanie po wysłaniu. Pytaj tylko o to, czego potrzebujesz do odpowiedzi, pomagaj komunikatami zamiast karać błędami i chroń się przed spamem tak, żeby nie męczyć ludzi. Na koniec mierz, bo bez danych trudno ocenić, które zmiany pomagają.

Formularze, ścieżki zapytań i ich testy to stała część naszej pracy przy projektowaniu UX/UI. Jeśli Twoja strona ma ruch, a zapytań jest mało, chętnie przyjrzymy się, gdzie klienci rezygnują.

FAQ

Pytania i odpowiedzi

Nie ma tu Twojego pytania? Napisz do nas, odpowiemy w ciągu 1 dnia roboczego.

Ile pól powinien mieć formularz kontaktowy?

Tyle, ile potrzebujesz, żeby sensownie odpowiedzieć. Przy zwykłym zapytaniu wystarczą zwykle trzy pola: imię, mail lub telefon i wiadomość. Dodatkowe pola mają sens wtedy, gdy bez nich nie da się przygotować wyceny.

Czy w formularzu kontaktowym musi być checkbox ze zgodą RODO?

Nie zawsze. Przy odpowiedzi na zapytanie często wystarcza klauzula informacyjna pod formularzem, a osobne zgody są potrzebne na przykład do wysyłki newslettera. To nie jest porada prawna, więc przy wątpliwościach warto skonsultować się z prawnikiem.

Jak sprawdzić, czy formularz działa?

Wyślij testowe zapytanie z telefonu i komputera, sprawdź, czy wiadomość dotarła i czy nie trafiła do spamu. Warto też mierzyć w analityce, ile osób zaczyna wypełniać formularz, a ile go wysyła.

Czy lepszy jest formularz, czy sam adres e-mail?

Najlepiej dać jedno i drugie. Formularz jest wygodniejszy na telefonie i pozwala zebrać potrzebne informacje, a adres e-mail i klikalny telefon obsłużą osoby, które wolą kontakt bezpośredni.

Bezpłatna wycena

Opisz projekt, przygotujemy wycenę.

Kilka zdań wystarczy. Odpowiadamy w ciągu 1 dnia roboczego z pytaniami albo wstępną wyceną.

Wyceń projekt