Użytkownik klika "wyślij". Co dzieje się dalej? Przeglądarka wysyła dane na serwer. Serwer je przetwarza. I co potem? Czy strona się przeładowuje? Czy coś pojawia się na stronie? Czy użytkownik jest przekierowywany gdzie indziej?
Obsługa wysyłania formularza to most między frontendem a backendem. Jeśli zrobisz to źle, użytkownik się pogubi. Jeśli dobrze, całość wydaje się płynna i przemyślana. Ten artykuł opisuje różne sposoby obsługi wysyłania formularzy.
Tradycyjne wysyłanie formularza
Przy tradycyjnym wysyłaniu przeglądarka przesyła dane formularza na serwer, korzystając z atrybutów action i method formularza.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Gdy użytkownik kliknie przycisk, przeglądarka koduje dane formularza i wysyła je na /submit. Serwer je przetwarza i odpowiada nową stroną. Przeglądarka ją wczytuje. Użytkownik widzi nowy adres URL i nową treść.
Tradycyjne wysyłanie jest proste, działa wszędzie i działa bez JavaScript. Główna wada to przeładowanie strony, które wydaje się wolne, nawet jeśli takie nie jest, a użytkownik traci pozycję przewijania i pola formularza zostają wyczyszczone.
Wysyłanie formularza z przekierowaniami
Po przetworzeniu formularza serwer zwykle przekierowuje użytkownika na stronę z potwierdzeniem albo z powrotem do formularza.
Na serwerze, po przetworzeniu formularza, użyj return redirect('/thank-you'), co wysyła odpowiedź z przekierowaniem HTTP 303, więc przeglądarka podąża za przekierowaniem i wczytuje stronę /thank-you, na której użytkownik widzi nową treść pod nowym adresem URL. Zaleta jest taka, że użytkownik wie, że formularz został przetworzony, a nowa strona jasno pokazuje, że coś się wydarzyło. Wada to przeładowanie strony, które wymaga dwóch żądań do serwera (jedno do wysłania formularza, drugie do celu przekierowania), przez co całość wydaje się wolniejsza, niż musi być.
Wysyłanie formularza przez AJAX
AJAX (Asynchronous JavaScript and XML) pozwala wysłać dane formularza bez przeładowania strony, na przykład tak: form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } });. Przeglądarka wysyła dane formularza przez _blocked_, serwer je przetwarza i odpowiada, a JavaScript odbiera odpowiedź i aktualizuje stronę bez przeładowania i bez przekierowania. Użytkownik zostaje na tej samej stronie, ale widzi potwierdzenie. Zaleta jest taka, że jest szybko, doświadczenie jest płynne, nie ma przeładowania strony, a Ty masz pełną kontrolę nad tym, co dzieje się dalej. Wada jest taka, że wymaga JavaScript, a jeśli JavaScript zawiedzie, formularz się nie wyśle, historia przeglądarki się nie aktualizuje (adres URL pozostaje ten sam), a całą informację zwrotną dla użytkownika musisz obsłużyć samodzielnie.
Progressive enhancement z AJAX
Progressive enhancement oznacza, że formularz działa bez JavaScript, ale z JavaScript działa lepiej. Zacznij od tradycyjnego formularza, który działa bez JavaScript: formularz się wysyła, a strona przekierowuje na podziękowanie. Potem, jeśli JavaScript jest dostępny, przechwyć zdarzenie wysłania przez addEventListener, używając if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); }, aby wysłać dane przez AJAX i pokazać komunikat na tej samej stronie. Teraz formularz działa w obu scenariuszach. Z JavaScript wysyła się przez AJAX, a użytkownik zostaje na stronie. Bez JavaScript wysyła się tradycyjnie i następuje przekierowanie. Zaleta jest taka, że formularz działa dla wszystkich, a osoby z JavaScript dostają płynne doświadczenie, podczas gdy pozostałe nadal mogą wysłać formularz. Wada to więcej kodu, bo trzeba utrzymywać obie ścieżki wysyłania.
Obsługa błędów wysyłania formularza
Gdy serwer odrzuci zgłoszenie (walidacja się nie powiodła, błąd bazy danych itp.), masz dwa podejścia. Przy tradycyjnym wysyłaniu serwer ponownie renderuje formularz z komunikatami o błędach i pokazuje je użytkownikowi. Przy AJAX serwer odpowiada kodem błędu (400, 422) i komunikatami, a JavaScript wyświetla błędy na stronie, używając _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Zawsze pokazuj błędy przy polach, które je spowodowały, zamiast chować je w podsumowaniu, żeby użytkownik widział dokładnie, co poszło nie tak i gdzie to poprawić.
Obsługa stanów ładowania
Gdy formularz zostaje wysłany, wyłącz przycisk wysyłania, żeby użytkownik nie kliknął go dwa razy, i pokaż animację ładowania lub komunikat, używając form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; });. Wyłącz przycisk natychmiast, bo jeśli żądanie trwa 5 sekund, użytkownik może kliknąć ponownie, myśląc, że nie zadziałało.
Co zrobić po udanym wysłaniu
Gdy formularz zostanie wysłany pomyślnie, masz kilka opcji. Możesz wyczyścić pola formularza, pokazać podziękowanie, przekierować na stronę z podziękowaniem, wysłać użytkownikowi e-mail, wrócić na poprzednią stronę albo zostawić użytkownika na formularzu i pozwolić mu wysłać go ponownie. Wybierz według celu formularza. Formularz kontaktowy powinien pokazać podziękowanie, formularz rezerwacji powinien przekierować na potwierdzenie rezerwacji, a zapis do newslettera powinien odesłać na stronę, na której użytkownik był wcześniej.
Jak WEMASY obsługuje wysyłanie formularzy
Formularze WEMASY obsługują zarówno tradycyjne wysyłanie, jak i AJAX. Skonfiguruj, co dzieje się po wysłaniu: pokaż komunikat, przekieruj na adres URL albo wyślij powiadomienie e-mail. WEMASY waliduje dane zarówno po stronie klienta, jak i serwera.
Sprawdź opcje wysyłania formularzy w swoim pakiecie WEMASY.