Användaren klickar på skicka. Vad händer sedan? Webbläsaren skickar data till servern. Servern bearbetar dem. Och sedan? Laddas sidan om? Dyker något upp på sidan? Skickas användaren någon annanstans?
Hanteringen av formulärinskick är bron mellan frontend och backend. Gör du fel blir användaren förvirrad. Gör du rätt känns upplevelsen smidig och genomtänkt. Den här artikeln går igenom olika sätt att hantera formulärinskick.
Traditionellt formulärinskick
Vid ett traditionellt inskick skickar webbläsaren formulärdata till servern med hjälp av formulärets attribut action och method.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Skicka</button>
</form>
När användaren klickar på knappen kodar webbläsaren formulärdata och skickar dem till /submit. Servern bearbetar dem och svarar med en ny sida. Webbläsaren laddar sidan. Användaren ser en ny adress och nytt innehåll.
Traditionellt inskick är enkelt, fungerar överallt och fungerar utan JavaScript. Den främsta nackdelen är att sidan laddas om, vilket känns långsamt även när det inte är det, gör att användaren tappar sin plats på sidan och tömmer formulärfälten.
Formulärinskick med omdirigering
När servern har bearbetat ett formulär omdirigerar den oftast användaren till en tacksida eller tillbaka till formuläret.
På servern använder du return redirect('/thank-you') efter bearbetningen. Det skickar ett HTTP 303-svar för omdirigering, så att webbläsaren följer omdirigeringen och laddar sidan /thank-you där användaren ser nytt innehåll på en ny adress. Fördelen är att användaren förstår att formuläret har bearbetats, och en ny sida gör det tydligt att något har hänt. Nackdelen är att sidan laddas om och kräver två anrop till servern (ett för formulärinskicket, ett för målet för omdirigeringen), vilket får upplevelsen att kännas långsammare än nödvändigt.
AJAX-inskick av formulär
AJAX (Asynchronous JavaScript and XML) låter dig skicka formulärdata utan att ladda om sidan med 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('Formuläret skickades'); form.reset(); } });. Webbläsaren skickar formulärdata med _blocked_, servern bearbetar dem och svarar, och JavaScript tar emot svaret och uppdaterar sidan utan omladdning eller omdirigering. Användaren stannar på samma sida men ser en bekräftelse. Fördelen är att det går snabbt, ger en smidig upplevelse, inte laddar om sidan och ger dig full kontroll över vad som händer sedan. Nackdelen är att det kräver JavaScript, och om JavaScript fallerar skickas inte formuläret, historiken uppdateras inte (adressen förblir densamma) och du måste hantera all återkoppling till användaren själv.
Progressiv förbättring med AJAX
Progressiv förbättring betyder att formuläret fungerar utan JavaScript men fungerar bättre med det. Börja med ett traditionellt formulär som fungerar utan JavaScript, där formuläret skickas och sidan omdirigeras till ett tack. Om JavaScript sedan finns tillgängligt fångar du upp submit-händelsen med addEventListener med if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } för att skicka via AJAX i stället och visa ett meddelande på samma sida. Nu fungerar formuläret i båda fallen. Med JavaScript skickas det med AJAX och användaren stannar på sidan. Utan JavaScript skickas det traditionellt och omdirigeras. Fördelen är att formuläret fungerar för alla, och användare med JavaScript får den smidiga upplevelsen medan de utan JavaScript ändå kan använda formuläret. Nackdelen är mer kod, eftersom du måste underhålla båda sätten att skicka.
Hantera fel vid formulärinskick
När servern avvisar ett formulärinskick (valideringen misslyckas, databasfel och så vidare) har du två sätt att gå tillväga. Vid traditionellt inskick återskapar servern formuläret med felmeddelanden och visar dem för användaren. Vid AJAX-inskick svarar servern med en felstatuskod (400, 422) och felmeddelanden, och JavaScript visar felen på sidan med _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Visa alltid felen bredvid de fält som orsakade dem i stället för att gömma dem i en sammanfattning, så att användaren ser exakt vad som gick fel och var det ska rättas.
Hantera laddningslägen
När formuläret skickas ska du inaktivera skickaknappen så att användaren inte klickar två gånger, och visa en laddningssnurra eller ett meddelande med form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Skickar...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Skicka'; });. Inaktivera knappen direkt, för om anropet tar 5 sekunder kan användaren klicka igen i tron att det inte fungerade.
Vad du gör efter ett lyckat inskick
När formuläret har skickats har du flera val. Du kan tömma formulärfälten, visa ett tackmeddelande, omdirigera till en tacksida, skicka ett mejl till användaren, skicka tillbaka användaren till föregående sida eller låta användaren stanna kvar i formuläret och skicka igen. Välj utifrån formulärets syfte. Ett kontaktformulär bör visa ett tackmeddelande, ett bokningsformulär bör omdirigera till bokningsbekräftelsen och en anmälan till nyhetsbrev bör skicka tillbaka användaren till sidan hen var på.
Så hanterar WEMASY formulärinskick
WEMASY-formulär stöder både traditionellt inskick och AJAX. Ställ in vad som händer efter inskicket: visa ett meddelande, omdirigera till en adress eller skicka en avisering via e-post. WEMASY validerar både hos klienten och på servern.
Se alternativen för formulärinskick i din WEMASY-plan.