Formularz kontaktowy na stronie: dobre praktyki i błędy
Dobry formularz kontaktowy zbiera tylko potrzebne dane, jasno mówi, co wpisać, działa na telefonie i potwierdza wysłanie wiadomości. Sprawdź, jak go zaprojektować i czego unikać.
Formularz kontaktowy na stronie powinien ułatwiać klientowi opisanie sprawy, a firmie przekazanie zapytania do właściwej osoby. Najlepiej sprawdza się krótki, czytelny formularz z polami potrzebnymi do odpowiedzi, jasnymi etykietami i komunikatem po wysłaniu. Nadmiarowe pytania, niejasne błędy i brak potwierdzenia utrudniają kontakt. Poniżej pokazuję, jak zaplanować formularz i sprawdzić go przed publikacją.
W skrócie
- Poproś tylko o informacje potrzebne do obsługi konkretnego zapytania.
- Opisz każde pole widoczną etykietą, a pola wymagane oznacz czytelnie.
- Wyjaśnij błędy i potwierdź, czy wiadomość dotarła.
- Sprawdź formularz na telefonie, klawiaturą i po stronie serwera.
Formularz kontaktowy na stronie: jakie pola dodać?
Zacznij od pytania: co zespół musi wiedzieć, żeby odpowiedzieć? W typowym formularzu usługowym wystarczą imię, adres e-mail i treść wiadomości. Telefon, nazwa firmy, temat zapytania czy lokalizacja mają sens wtedy, gdy pomagają obsłużyć konkretną sprawę. Jeśli klient pyta biuro nieruchomości o oglądanie mieszkania, przydatny może być wybór oferty lub preferowanego terminu. Do ogólnego pytania o usługę takie pole może być zbędne.
Krótszy formularz nie oznacza, że każdy musi mieć identyczny zestaw pól. Chodzi o to, by nie zbierać informacji „na zapas”. W3C zaleca proste formularze i ograniczenie pytań do danych potrzebnych do wykonania procesu; nadmiarowe lub nieistotne prośby mogą skłaniać użytkowników do porzucenia formularza. Zasada minimalizacji danych wynika z art. 5 ust. 1 lit. c RODO, który ogranicza dane do tego, co jest niezbędne do celów ich przetwarzania.
| Cel formularza | Przykładowe pola | Co sprawdzić |
|---|---|---|
| Ogólne pytanie o usługę | E-mail, treść wiadomości | Czy telefon naprawdę jest konieczny do odpowiedzi? |
| Prośba o wycenę | E-mail, rodzaj usługi, krótki opis | Czy zakres zapytania da się wybrać z listy, zamiast wpisywać od zera? |
| Kontakt w sprawie oferty nieruchomości | E-mail, wybrana oferta, wiadomość | Czy klient może wskazać konkretną ofertę bez przepisywania jej danych? |
| Reklamacja lub sprawa klienta | E-mail, numer zamówienia lub umowy, opis | Czy formularz nie prosi o dane wrażliwe, które nie są potrzebne na tym etapie? |
W formularzu umieść też krótką informację o tym, kto i w jakim celu przetwarza dane, wraz z odnośnikiem do pełnej informacji o prywatności. Upewnij się, że treść odpowiada faktycznemu przepływowi danych w firmie, na przykład temu, kto otrzymuje wiadomość i gdzie jest ona zapisywana. Wymagane informacje i podstawę prawną ustal dla swojego procesu, nie kopiuj klauzuli z innej strony.
Jak zaprojektować czytelne pola i komunikaty
Etykieta powinna nazywać oczekiwaną informację: „Adres e-mail”, „Treść wiadomości” albo „Numer zamówienia”. Nie polegaj wyłącznie na tekście zastępczym wewnątrz pustego pola, bo znika on podczas wpisywania. W3C zaleca powiązanie etykiety z kontrolką formularza, najczęściej przez element <label>, jak opisano we wskazówkach W3C dotyczących etykiet formularzy. W3C zaleca też podawanie instrukcji dotyczących formatu, gdy użytkownik ma wpisać dane w określony sposób, na przykład w instrukcjach W3C do formularzy.
Przy każdym polu wymaganym napisz wprost, że jest obowiązkowe, na przykład „E-mail (wymagane)”. Jeśli akceptujesz kilka formatów numeru telefonu, nie każ użytkownikowi zgadywać, który z nich przejdzie. Na przycisku użyj opisu działania, takiego jak „Wyślij zapytanie”, zamiast niejasnego „Dalej”.
Po wysłaniu pokaż jednoznaczny rezultat. Gdy wiadomość dotarła, napisz na przykład: „Dziękuję, formularz został wysłany. Odpowiemy na adres podany w formularzu”. Nie obiecuj czasu odpowiedzi, jeśli firma nie ustaliła takiego standardu.
Gdy wysłanie się nie powiedzie, zachowaj wpisane dane i powiedz, co użytkownik może zrobić dalej, na przykład ponowić próbę lub skontaktować się inną drogą. W3C zaleca zwięzłe komunikaty o błędach z instrukcją ich poprawienia oraz potwierdzanie pomyślnego zakończenia. Przykłady komunikatów W3C pokazują także, jak powiązać błąd z polem, którego dotyczy.
Walidacja, spam i najczęstsze błędy
Walidacja to sprawdzenie, czy wpisane dane spełniają wymagania formularza. Przykładowo można sprawdzić, czy pole e-mail ma oczekiwany format albo czy użytkownik uzupełnił pole wymagane. Walidacja w przeglądarce pomaga od razu wskazać pomyłkę, ale nie zastępuje sprawdzenia danych po stronie serwera. MDN wyjaśnia, że kontrolę przeglądarkową można ominąć, dlatego serwer również powinien walidować otrzymane dane.
Częstym błędem jest komunikat „Wystąpił błąd” bez wskazania pola i sposobu naprawy. Lepszy przykład: „Wpisz adres e-mail w formacie nazwa@firma.pl”. Błędu nie oznaczaj wyłącznie kolorem. Tekst powinien mówić, co jest nie tak, a wpisana wcześniej wiadomość powinna pozostać w formularzu.
Drugim problemem jest nadmierna ochrona przed spamem, która utrudnia kontakt prawdziwym osobom. Jeśli wiadomości-śmieci staną się kłopotem, dobierz zabezpieczenie do skali problemu i sprawdź, jak działa na urządzeniach mobilnych oraz z klawiaturą. Google opisuje reCAPTCHA jako usługę służącą ochronie przed spamem i nadużyciami, ale jej wdrożenie wymaga integracji po stronie witryny. To jedna z opcji, nie gwarancja, że niepożądane zgłoszenia znikną. Dokumentacja Google reCAPTCHA przedstawia jej działanie i warianty.
Jak sprawdzić formularz przed publikacją
- Przejdź przez formularz jako klient. Czy od razu wiadomo, co wpisać i które pola są obowiązkowe? Spróbuj też wysłać pytanie z telefonu.
- Sprawdź obsługę klawiaturą. Przechodź między polami bez myszy. Upewnij się, że widać, które pole jest aktywne, a przycisk można uruchomić z klawiatury.
- Wywołaj błędy. Wyślij pusty formularz i wpisz błędny adres e-mail. Sprawdź, czy komunikaty wskazują problem i wyjaśniają, jak go poprawić.
- Sprawdź powodzenie i awarię. Po prawidłowym wysłaniu zobacz, czy wyświetla się potwierdzenie. Ustal, co widzi użytkownik, jeśli wiadomości nie uda się przekazać.
- Prześledź drogę zapytania. Potwierdź, że wiadomość trafia do właściwej skrzynki lub systemu, a zespół wie, kto ją obsługuje. Jeśli korzystasz z integracji z CRM lub arkuszem, sprawdź, czy dane zapisują się w odpowiednich polach.
| Objaw | Możliwa przyczyna | Co poprawić |
|---|---|---|
| Klienci pytają, co wpisać | Niejasne etykiety lub brak wskazówek | Nazwij pole konkretnie i dodaj przykład formatu |
| Zespół dostaje niekompletne zapytania | Formularz nie zbiera informacji potrzebnej do obsługi | Dodaj jedno uzasadnione pole albo doprecyzuj instrukcję |
| Użytkownik nie wie, czy formularz zadziałał | Brak komunikatu po wysłaniu | Pokaż potwierdzenie lub czytelny błąd |
| Pojawia się dużo spamu | Brak lub niedopasowane zabezpieczenie | Sprawdź źródło zgłoszeń i dobierz ochronę, testując jej wpływ na obsługę formularza |
FAQ
Ile pól powinien mieć formularz kontaktowy?
Tyle, ile potrzeba do przekazania sprawy właściwej osobie i przygotowania odpowiedzi. Dla prostego pytania może wystarczyć e-mail i treść wiadomości. Dodatkowe pola dodaj wtedy, gdy odpowiedź zespołu zależy od tych informacji.
Czy pole telefonu powinno być obowiązkowe?
Tylko jeśli telefon jest potrzebny do obsługi danego rodzaju zapytania. Jeśli klient może dostać odpowiedź e-mailem, rozważ pozostawienie telefonu jako pola opcjonalnego albo pominięcie go.
Co zrobić, gdy formularz nie wysyła wiadomości?
Pokaż jasny komunikat, nie kasuj wpisanej treści i podaj alternatywny sposób kontaktu. Po stronie firmy sprawdź działanie przekazywania wiadomości, w tym to, czy zgłoszenie dociera do właściwej skrzynki lub integracji.
Czy formularz kontaktowy wystarczy każdej firmie?
To zależy od rodzaju zapytań i sposobu pracy zespołu. Formularz dobrze porządkuje zgłoszenia, ale nie odpowiada samodzielnie na pytania klienta. Porównuję różne rozwiązania w artykule Chatbot, formularz kontaktowy czy live chat na stronie firmy?.
Co dalej
Przejrzyj formularz na swojej stronie według pięciu kroków powyżej, a potem sprawdź, czy lepiej odpowiada klientom formularz, chatbot czy live chat. Więcej o różnicach przeczytasz w porównaniu sposobów kontaktu na stronie.