De gebruiker klikt op verzenden. Wat gebeurt er dan? De browser stuurt de gegevens naar de server. De server verwerkt ze. En dan? Wordt de pagina opnieuw geladen? Verschijnt er iets op de pagina? Wordt de gebruiker ergens naartoe gestuurd?
De afhandeling van een formulierinzending is de brug tussen de voorkant en de achterkant. Doe je het verkeerd, dan raakt de gebruiker in de war. Doe je het goed, dan voelt de ervaring soepel en doordacht. Dit artikel behandelt de verschillende manieren om formulierinzendingen af te handelen.
Gewone formulierinzending
Bij een gewone formulierinzending stuurt de browser de formuliergegevens naar de server met de action- en method-attributen van het formulier.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Als de gebruiker op de knop klikt, codeert de browser de formuliergegevens en stuurt ze naar /submit. De server verwerkt ze en antwoordt met een nieuwe pagina. De browser laadt die pagina. De gebruiker ziet een nieuwe URL en nieuwe inhoud.
Een gewone inzending is eenvoudig, werkt overal en werkt zonder JavaScript. Het grootste nadeel is dat de pagina opnieuw wordt geladen. Dat voelt traag, ook als het dat niet is, en de gebruiker verliest zijn scrollpositie en de formuliervelden worden leeggemaakt.
Formulierinzending met doorverwijzing
Nadat de server een formulier heeft verwerkt, verwijst hij de gebruiker meestal door naar een succespagina of terug naar het formulier.
Gebruik op de server na het verwerken van het formulier return redirect('/thank-you'). Dat stuurt een HTTP 303-doorverwijzing, zodat de browser de doorverwijzing volgt en de pagina /thank-you laadt, waar de gebruiker nieuwe inhoud ziet op een nieuwe URL. Het voordeel is dat de gebruiker weet dat het formulier is verwerkt en een nieuwe pagina duidelijk maakt dat er iets is gebeurd. Het nadeel is dat de pagina opnieuw wordt geladen, met twee verzoeken aan de server (een voor de formulierinzending en een voor de bestemming van de doorverwijzing), waardoor de ervaring trager voelt dan nodig is.
AJAX-formulierinzending
Met AJAX (Asynchronous JavaScript and XML) stuur je formuliergegevens zonder de pagina opnieuw te laden, met 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(); } });. De browser stuurt de formuliergegevens met _blocked_, de server verwerkt ze en antwoordt, en het JavaScript ontvangt het antwoord en werkt de pagina bij, zonder opnieuw laden of doorverwijzing. De gebruiker blijft op dezelfde pagina, maar ziet een bevestiging. Het voordeel is dat het snel is, een soepele ervaring geeft, de pagina niet opnieuw laadt en je volledige controle geeft over wat er daarna gebeurt. Het nadeel is dat het JavaScript vereist. Faalt JavaScript, dan wordt het formulier niet verstuurd, wordt de geschiedenis niet bijgewerkt (de URL blijft hetzelfde) en moet je alle feedback aan de gebruiker zelf regelen.
Progressive enhancement met AJAX
Progressive enhancement betekent dat het formulier werkt zonder JavaScript, maar beter werkt mét. Begin met een gewoon formulier dat zonder JavaScript werkt, waarbij het formulier wordt verstuurd en de pagina doorverwijst naar een bedankpagina. Is JavaScript beschikbaar, onderschep dan het submit-event met addEventListener via if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); }, om via AJAX te versturen en een bericht op dezelfde pagina te tonen. Nu werkt het formulier in beide situaties. Met JavaScript wordt het via AJAX verstuurd en blijft de gebruiker op de pagina. Zonder JavaScript wordt het gewoon verstuurd en volgt een doorverwijzing. Het voordeel is dat het formulier voor iedereen werkt: gebruikers met JavaScript krijgen de soepele ervaring en gebruikers zonder JavaScript kunnen het formulier toch gebruiken. Het nadeel is meer code, omdat je beide manieren van versturen moet onderhouden.
Fouten bij het versturen van formulieren afhandelen
Wijst de server een formulierinzending af (validatie mislukt, databasefout en zo meer), dan heb je twee aanpakken. Bij een gewone inzending toont de server het formulier opnieuw met foutmeldingen. Bij een AJAX-inzending antwoordt de server met een foutstatuscode (400, 422) en foutmeldingen, en toont het JavaScript de fouten op de pagina met _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Toon fouten altijd naast de velden die ze veroorzaken en verberg ze niet in een samenvatting, zodat de gebruiker precies ziet wat er misging en waar hij het moet aanpassen.
Laadstatussen afhandelen
Schakel bij het versturen van het formulier de verzendknop uit, zodat de gebruiker er niet twee keer op klikt, en toon een laadicoon of -bericht met 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'; });. Schakel de knop direct uit, want duurt het verzoek 5 seconden, dan klikt de gebruiker misschien opnieuw omdat hij denkt dat het niet werkte.
Wat je doet na een gelukte inzending
Als het formulier is verstuurd, heb je opties. Je kunt de formuliervelden leegmaken, een bedankbericht tonen, doorverwijzen naar een bedankpagina, de gebruiker een e-mail sturen, hem terugsturen naar de vorige pagina, of op het formulier blijven en hem opnieuw laten versturen. Kies op basis van het doel van je formulier. Een contactformulier toont een bedankbericht, een boekingsformulier verwijst door naar de boekingsbevestiging en een aanmelding voor een nieuwsbrief stuurt de gebruiker terug naar de pagina waar hij vandaan kwam.
Zo handelt WEMASY formulierinzendingen af
WEMASY-formulieren ondersteunen zowel gewone inzendingen als AJAX. Stel in wat er na het versturen gebeurt: een bericht tonen, doorverwijzen naar een URL of een e-mailmelding sturen. WEMASY valideert zowel in de browser als op de server.
Bekijk de opties voor het afhandelen van inzendingen in je WEMASY-abonnement.