Brugeren klikker på send. Hvad sker der så? Browseren sender dataene til serveren. Serveren behandler dem. Og hvad så? Genindlæses siden? Dukker der noget op på siden? Bliver brugeren sendt et andet sted hen?
Håndtering af indsendelser er broen mellem frontend og backend. Gør du det forkert, bliver brugeren forvirret. Gør du det rigtigt, føles oplevelsen glat og tænkt igennem. Denne artikel gennemgår de forskellige måder at håndtere formularindsendelser på.
Almindelig formularindsendelse
Ved en almindelig indsendelse sender browseren formulardataene til serveren via formularens action- og method-egenskaber.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Når brugeren klikker på knappen, koder browseren formulardataene og sender dem til /submit. Serveren behandler dem og svarer med en ny side. Browseren indlæser den side. Brugeren ser en ny URL og nyt indhold.
Almindelig indsendelse er enkel, virker overalt og virker uden JavaScript. Den største ulempe er, at siden genindlæses. Det føles langsomt, selv om det ikke er det, og brugeren mister sin placering på siden, og felterne i formularen bliver tømt.
Formularindsendelse med omdirigering
Når serveren har behandlet en formular, sender den som regel brugeren videre til en side med succes eller tilbage til formularen.
På serveren bruger du efter behandlingen af formularen return redirect('/thank-you'). Det sender et HTTP 303-svar om omdirigering, så browseren følger omdirigeringen og indlæser siden /thank-you, hvor brugeren ser nyt indhold på en ny URL. Fordelen er, at brugeren ved, at formularen er behandlet, og en ny side gør det tydeligt, at der er sket noget. Ulempen er, at siden genindlæses og kræver to forespørgsler til serveren (én til indsendelsen og én til målet for omdirigeringen), så oplevelsen føles langsommere end nødvendigt.
Formularindsendelse med AJAX
AJAX (Asynchronous JavaScript and XML) lader dig sende formulardata uden at genindlæse siden 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('Form submitted successfully'); form.reset(); } });. Browseren sender formulardataene med _blocked_, serveren behandler dem og svarer, og JavaScript modtager svaret og opdaterer siden uden genindlæsning eller omdirigering. Brugeren bliver på den samme side, men ser en bekræftelse. Fordelen er, at det er hurtigt, giver en glat oplevelse, ingen genindlæsning og fuld kontrol over, hvad der sker bagefter. Ulempen er, at det kræver JavaScript, og hvis JavaScript fejler, bliver formularen ikke sendt, historikken bliver ikke opdateret (URL'en er den samme), og du selv skal tage dig af al feedback til brugeren.
Progressiv forbedring med AJAX
Progressiv forbedring betyder, at formularen virker uden JavaScript, men virker bedre med det. Start med en almindelig formular, der virker uden JavaScript, hvor formularen sendes, og siden omdirigerer til en tak. Hvis JavaScript så er til stede, fanger du submit-hændelsen med addEventListener ved at bruge if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } til at sende via AJAX i stedet og vise en besked på samme side. Nu virker formularen i begge tilfælde. Med JavaScript sendes den med AJAX, og brugeren bliver på siden. Uden JavaScript sendes den på den almindelige måde og omdirigerer. Fordelen er, at formularen virker for alle, og brugere med JavaScript får den glatte oplevelse, mens dem uden stadig kan bruge formularen. Ulempen er mere kode, fordi du skal vedligeholde begge veje.
Fejl ved formularindsendelser
Når serveren afviser en formularindsendelse (kontrollen fejler, fejl i databasen og så videre), har du to fremgangsmåder. Ved almindelig indsendelse tegner serveren formularen igen med fejlmeddelelser og viser dem til brugeren. Ved AJAX svarer serveren med en fejlkode (400, 422) og fejlmeddelelser, og JavaScript viser fejlene på siden med _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Vis altid fejl ved siden af de felter, der forårsagede dem, og ikke gemt i et resumé, så brugeren kan se præcis, hvad der gik galt, og hvor det skal rettes.
Håndtering af indlæsning
Når formularen sendes, skal du gøre knappen inaktiv, så brugeren ikke klikker to gange, og vise en indlæsningsindikator eller en besked med 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'; });. Gør knappen inaktiv med det samme, for hvis forespørgslen tager 5 sekunder, klikker brugeren måske igen, fordi det ser ud, som om det ikke virkede.
Hvad du gør efter en vellykket indsendelse
Når formularen er sendt, har du flere muligheder. Du kan tømme formularens felter, vise en tak, sende brugeren til en takkeside, sende en e-mail, sende brugeren tilbage til den forrige side eller lade dem blive på formularen og sende igen. Vælg efter formularens formål. En kontaktformular bør vise en tak, en bookingformular bør sende videre til bookingbekræftelsen, og en tilmelding til nyhedsbrev bør sende dem tilbage til den side, de var på.
Sådan håndterer WEMASY formularindsendelser
WEMASYs formularer understøtter både almindelig indsendelse og AJAX. Vælg, hvad der sker efter indsendelsen: vis en besked, send videre til en URL eller send en besked på e-mail. WEMASY kontrollerer både i browseren og på serveren.
Se mulighederne for formularindsendelse i din WEMASY-plan.