A felhasználó rákattint a küldésre. Mi történik ezután? A böngésző elküldi az adatot a szervernek. A szerver feldolgozza. Aztán? Újratöltődik az oldal? Megjelenik valami az oldalon? Átirányítják a felhasználót valahová?
Az űrlapbeküldés kezelése a frontend és a backend közötti híd. Ha rosszul csinálod, a felhasználó összezavarodik. Ha jól, az élmény gördülékeny és átgondolt. Ez a cikk az űrlapbeküldések kezelésének különböző módjait mutatja be.
Hagyományos űrlapbeküldés
A hagyományos űrlapbeküldésnél a böngésző az űrlap action és method attribútumai alapján küldi el az űrlapadatot a szervernek.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Amikor a felhasználó rákattint a gombra, a böngésző kódolja az űrlapadatot, és elküldi a /submit címre. A szerver feldolgozza, és új oldallal válaszol. A böngésző betölti az oldalt. A felhasználó új URL-t és új tartalmat lát.
A hagyományos beküldés egyszerű, mindenhol működik, és JavaScript nélkül is. A fő hátránya, hogy az oldal újratöltődik, ami lassúnak érződik, még ha nem is az, és a felhasználó elveszíti a görgetési pozícióját, az űrlapmezők pedig kiürülnek.
Űrlapbeküldés átirányítással
Az űrlap feldolgozása után a szerver általában átirányítja a felhasználót egy sikeroldalra vagy vissza az űrlaphoz.
A szerveren az űrlap feldolgozása után használd a return redirect('/thank-you') utasítást, amely HTTP 303 átirányítási választ küld, így a böngésző követi az átirányítást, és betölti a /thank-you oldalt, ahol a felhasználó új tartalmat lát új URL-en. Az előny, hogy a felhasználó tudja, hogy az űrlapot feldolgozták, és az új oldal egyértelművé teszi, hogy történt valami. A hátrány, hogy az oldal újratöltődik, két kérést igényel a szerverhez (egyet az űrlapbeküldéshez, egyet az átirányítás céljához), ami a szükségesnél lassabbnak érződik.
AJAX űrlapbeküldés
Az AJAX (Asynchronous JavaScript and XML) lehetővé teszi, hogy az oldal újratöltése nélkül küldd el az űrlapadatot a 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(); } }); kóddal. A böngésző a _blocked_ segítségével elküldi az űrlapadatot, a szerver feldolgozza és válaszol, a JavaScript pedig megkapja a választ, és frissíti az oldalt újratöltés vagy átirányítás nélkül. A felhasználó ugyanazon az oldalon marad, de visszaigazolást lát. Az előny, hogy gyors, gördülékeny élményt nyújt, nincs oldalújratöltés, és teljes kontrollt ad arról, mi történjen ezután. A hátrány, hogy JavaScriptet igényel, és ha a JavaScript elromlik, az űrlap nem küldődik be, az előzmények nem frissülnek (az URL ugyanaz marad), és a visszajelzést a felhasználónak neked kell kezelned.
Progresszív fejlesztés AJAX-szal
A progresszív fejlesztés azt jelenti, hogy az űrlap JavaScript nélkül is működik, de JavaScripttel jobban. Kezdd egy hagyományos űrlappal, amely JavaScript nélkül működik: az űrlap beküldődik, és az oldal átirányít egy köszönő oldalra. Aztán ha a JavaScript elérhető, fogd el a submit eseményt az addEventListener segítségével az if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } kóddal, hogy AJAX-szal küldd el, és ugyanazon az oldalon jeleníts meg üzenetet. Így az űrlap mindkét helyzetben működik. JavaScripttel AJAX-szal küldődik be, és a felhasználó az oldalon marad. JavaScript nélkül hagyományosan küldődik be, és átirányít. Az előny, hogy az űrlap mindenkinek működik: a JavaScriptes felhasználók a gördülékeny élményt kapják, akiknek nincs, azoknak is működik az űrlap. A hátrány a több kód, mert mindkét beküldési utat karbantartanod kell.
Az űrlapbeküldési hibák kezelése
Amikor a szerver elutasít egy űrlapbeküldést (az ellenőrzés meghiúsul, adatbázishiba és így tovább), két megközelítésed van. Hagyományos beküldésnél a szerver újrarendereli az űrlapot a hibaüzenetekkel, és megjeleníti őket a felhasználónak. AJAX beküldésnél a szerver hibakóddal (400, 422) és hibaüzenetekkel válaszol, a JavaScript pedig megjeleníti a hibákat az oldalon a _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); }); kóddal. Mindig a hibát okozó mezők mellett mutasd a hibákat, ne egy összefoglalóban rejtsd el, hogy a felhasználó pontosan lássa, mi ment félre, és hol kell javítania.
A betöltési állapotok kezelése
Amikor az űrlap beküldődik, tiltsd le a küldés gombot, hogy a felhasználó ne kattintson rá kétszer, és jeleníts meg betöltési jelzőt vagy üzenetet a 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'; }); kóddal. Azonnal tiltsd le a gombot, mert ha a kérés 5 másodpercig tart, a felhasználó újra rákattinthat, azt gondolva, hogy nem működött.
Mit tegyél a sikeres beküldés után
Az űrlap sikeres beküldése után többféle lehetőséged van. Kiürítheted az űrlapmezőket, megjeleníthetsz köszönő üzenetet, átirányíthatsz egy köszönő oldalra, e-mailt küldhetsz a felhasználónak, visszaviheted az előző oldalra, vagy az űrlapon hagyhatod, és engedheted, hogy újra beküldjön. Az űrlap céljától függően válassz. A kapcsolati űrlap mutasson köszönő üzenetet, a foglalási űrlap irányítson a foglalás visszaigazolására, a hírlevél-feliratkozás pedig vigye vissza őket arra az oldalra, ahol voltak.
Hogyan kezeli a WEMASY az űrlapbeküldést
A WEMASY űrlapjai a hagyományos beküldést és az AJAX-ot is támogatják. Beállíthatod, mi történjen a beküldés után: üzenet megjelenítése, átirányítás egy URL-re, vagy e-mail értesítés küldése. A WEMASY az ügyfél és a szerver oldalán is ellenőriz.
Az űrlapbeküldési lehetőségeket a WEMASY csomagodban találod.