Uživatel klikne na odeslat. Co se stane potom? Prohlížeč pošle data na server. Server je zpracuje. A co dál? Načte se stránka znovu? Objeví se něco na stránce? Přesměruje se uživatel někam jinam?
Zpracování odeslání formuláře je most mezi frontendem a backendem. Uděláte-li to špatně, uživatel je zmatený. Uděláte-li to dobře, zážitek působí plynule a promyšleně. Tento článek popisuje různé způsoby, jak odeslání formuláře zpracovat.
Klasické odeslání formuláře
Při klasickém odeslání formuláře prohlížeč pošle data formuláře na server podle atributů action a method formuláře.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Když uživatel klikne na tlačítko, prohlížeč data formuláře zakóduje a pošle na /submit. Server je zpracuje a odpoví novou stránkou. Prohlížeč ji načte. Uživatel vidí novou adresu URL a nový obsah.
Klasické odeslání je jednoduché, funguje všude a funguje i bez JavaScriptu. Hlavní nevýhodou je, že se stránka znovu načte, což působí pomalu, i když pomalé není, uživatel přijde o pozici posunu na stránce a pole formuláře se vymažou.
Odeslání formuláře s přesměrováním
Po zpracování formuláře server obvykle uživatele přesměruje na stránku s potvrzením nebo zpět na formulář.
Na serveru po zpracování formuláře použijte return redirect('/thank-you'), což pošle odpověď s přesměrováním HTTP 303, takže prohlížeč přesměrování následuje a načte stránku /thank-you, kde uživatel vidí nový obsah na nové adrese URL. Výhodou je, že uživatel ví, že se formulář zpracoval, a nová stránka jasně ukazuje, že se něco stalo. Nevýhodou je, že se stránka znovu načte a jsou potřeba dva požadavky na server (jeden pro odeslání formuláře, jeden pro cíl přesměrování), takže zážitek působí pomaleji, než je nutné.
Odeslání formuláře přes AJAX
AJAX (Asynchronous JavaScript and XML) umožňuje poslat data formuláře bez opětovného načtení stránky pomocí 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(); } });. Prohlížeč pošle data formuláře pomocí _blocked_, server je zpracuje a odpoví a JavaScript odpověď přijme a stránku aktualizuje, bez opětovného načtení nebo přesměrování. Uživatel zůstane na stejné stránce, ale uvidí potvrzení. Výhodou je, že je to rychlé, zážitek je plynulý, stránka se nenačítá znovu a máte plnou kontrolu nad tím, co se stane dál. Nevýhodou je, že to vyžaduje JavaScript, a pokud JavaScript selže, formulář se neodešle, historie se neaktualizuje (adresa URL zůstane stejná) a veškerou zpětnou vazbu uživateli musíte řešit sami.
Progresivní vylepšování s AJAXem
Progresivní vylepšování znamená, že formulář funguje bez JavaScriptu, ale s ním funguje lépe. Začněte klasickým formulářem, který funguje bez JavaScriptu: formulář se odešle a stránka přesměruje na poděkování. Pak, pokud je JavaScript k dispozici, zachyťte událost odeslání pomocí addEventListener s if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); }, odešlete přes AJAX a zobrazte zprávu na stejné stránce. Teď formulář funguje v obou případech. S JavaScriptem se odešle přes AJAX a uživatel zůstane na stránce. Bez JavaScriptu se odešle klasicky a přesměruje. Výhodou je, že formulář funguje pro všechny, a uživatelé s JavaScriptem mají plynulý zážitek, zatímco ti bez něj formulář stále odešlou. Nevýhodou je víc kódu, protože musíte udržovat obě cesty odeslání.
Zpracování chyb při odeslání formuláře
Když server odeslání formuláře odmítne (neprojde ověření, chyba databáze a podobně), máte dva přístupy. U klasického odeslání server formulář znovu vykreslí s chybovými zprávami a zobrazí je uživateli. U odeslání přes AJAX server odpoví chybovým stavovým kódem (400, 422) a chybovými zprávami a JavaScript chyby zobrazí na stránce pomocí _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Chyby vždy ukazujte u polí, která je způsobila, a neschovávejte je do souhrnu, aby uživatel přesně viděl, co se pokazilo a kde to opravit.
Zpracování stavu načítání
Při odeslání formuláře zakažte tlačítko odeslat, aby na něj uživatel neklikl dvakrát, a zobrazte načítací kolečko nebo zprávu pomocí 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'; });. Tlačítko zakažte okamžitě, protože pokud požadavek trvá 5 sekund, uživatel může kliknout znovu v domnění, že to nefungovalo.
Co udělat po úspěšném odeslání
Po úspěšném odeslání formuláře máte několik možností. Můžete vymazat pole formuláře, zobrazit poděkování, přesměrovat na stránku s poděkováním, poslat uživateli e-mail, vrátit ho na předchozí stránku, nebo ho nechat na formuláři a umožnit mu odeslat znovu. Vyberte podle účelu formuláře. Kontaktní formulář by měl zobrazit poděkování, rezervační formulář by měl přesměrovat na potvrzení rezervace a přihlášení k newsletteru by mělo uživatele vrátit na stránku, na které byl.
Jak WEMASY zpracovává odeslání formulářů
Formuláře WEMASY podporují klasické odeslání i AJAX. Nastavíte, co se po odeslání stane: zobrazit zprávu, přesměrovat na adresu URL nebo poslat e-mailové upozornění. WEMASY ověřuje data na straně klienta i serveru.
Možnosti odeslání formulářů najdete ve svém tarifu WEMASY.