L'utente clicca su invia. Che cosa succede dopo? Il browser invia i dati al server. Il server li elabora. E poi? La pagina si ricarica? Compare qualcosa nella pagina? L'utente viene reindirizzato da qualche parte?
La gestione dell'invio del modulo è il ponte tra frontend e backend. Se la fai male, l'utente è confuso. Se la fai bene, l'esperienza è fluida e sembra voluta. Questo articolo spiega i diversi modi di gestire l'invio dei moduli.
Invio tradizionale del modulo
In un invio tradizionale, il browser manda i dati del modulo al server usando gli attributi action e method del modulo.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Quando l'utente clicca il pulsante, il browser codifica i dati del modulo e li invia a /submit. Il server li elabora e risponde con una nuova pagina. Il browser carica quella pagina. L'utente vede un nuovo URL e nuovi contenuti.
L'invio tradizionale è semplice, funziona ovunque e funziona senza JavaScript. Lo svantaggio principale è che la pagina si ricarica: sembra lento anche quando non lo è, l'utente perde la posizione di scorrimento e i campi del modulo si svuotano.
Invio del modulo con reindirizzamento
Dopo che il server ha elaborato un modulo, di solito reindirizza l'utente a una pagina di conferma o di nuovo al modulo.
Sul server, dopo aver elaborato il modulo, usa return redirect('/thank-you'), che invia una risposta di reindirizzamento HTTP 303: il browser segue il reindirizzamento e carica la pagina /thank-you, dove l'utente vede nuovi contenuti a un nuovo URL. Il vantaggio è che l'utente capisce che il modulo è stato elaborato e una nuova pagina rende chiaro che è successo qualcosa. Lo svantaggio è che la pagina si ricarica e servono due richieste al server (una per l'invio del modulo, una per la destinazione del reindirizzamento), il che rende l'esperienza più lenta del necessario.
Invio del modulo con AJAX
AJAX (Asynchronous JavaScript and XML) ti permette di inviare i dati del modulo senza ricaricare la pagina, con 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(); } });. Il browser invia i dati del modulo con _blocked_, il server li elabora e risponde, e il JavaScript riceve la risposta e aggiorna la pagina senza ricaricarla né reindirizzare. L'utente resta sulla stessa pagina ma vede una conferma. Il vantaggio è che è veloce, offre un'esperienza fluida, non ricarica la pagina e ti dà pieno controllo su ciò che succede dopo. Lo svantaggio è che richiede JavaScript: se JavaScript non funziona, il modulo non viene inviato, la cronologia non si aggiorna (l'URL resta lo stesso) e devi gestire tu tutti i messaggi per l'utente.
Progressive enhancement con AJAX
Progressive enhancement significa che il modulo funziona senza JavaScript ma funziona meglio con. Parti da un modulo tradizionale che funziona senza JavaScript: il modulo viene inviato e la pagina reindirizza a una pagina di ringraziamento. Poi, se JavaScript è disponibile, intercetta l'evento di invio con addEventListener usando if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } per inviare con AJAX e mostrare un messaggio nella stessa pagina. Ora il modulo funziona in entrambi gli scenari. Con JavaScript viene inviato con AJAX e l'utente resta sulla pagina. Senza JavaScript viene inviato in modo tradizionale e reindirizza. Il vantaggio è che il modulo funziona per tutti: chi ha JavaScript ottiene l'esperienza fluida, e chi non ce l'ha può comunque usare il modulo. Lo svantaggio è più codice, perché devi mantenere entrambi i percorsi di invio.
Gestire gli errori di invio del modulo
Quando il server rifiuta l'invio di un modulo (la validazione fallisce, errore del database e così via), hai due approcci. Con l'invio tradizionale, il server ricostruisce il modulo con i messaggi di errore e li mostra all'utente. Con l'invio AJAX, il server risponde con un codice di stato di errore (400, 422) e con i messaggi di errore, e il JavaScript mostra gli errori nella pagina usando _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Mostra sempre gli errori accanto ai campi che li hanno causati invece di nasconderli in un riepilogo, così l'utente vede esattamente cosa è andato storto e dove correggere.
Gestire gli stati di caricamento
Quando il modulo viene inviato, disattiva il pulsante di invio così l'utente non lo clicca due volte, e mostra un indicatore di caricamento o un messaggio con 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'; });. Disattiva il pulsante subito, perché se la richiesta richiede 5 secondi, l'utente potrebbe cliccare di nuovo pensando che non abbia funzionato.
Cosa fare dopo un invio riuscito
Dopo che il modulo è stato inviato con successo, hai diverse opzioni. Puoi svuotare i campi, mostrare un messaggio di ringraziamento, reindirizzare a una pagina di ringraziamento, inviare all'utente un'email, riportarlo alla pagina precedente, oppure lasciarlo sul modulo e permettergli di inviare di nuovo. Scegli in base allo scopo del modulo. Un modulo di contatto dovrebbe mostrare un messaggio di ringraziamento, un modulo di prenotazione dovrebbe reindirizzare alla conferma della prenotazione e un'iscrizione alla newsletter dovrebbe riportare l'utente alla pagina da cui veniva.
Come WEMASY gestisce l'invio dei moduli
I moduli WEMASY supportano sia l'invio tradizionale sia AJAX. Configura cosa succede dopo l'invio: mostrare un messaggio, reindirizzare a un URL o inviare una notifica email. WEMASY valida sia sul client sia sul server.
Guarda le opzioni di invio dei moduli nel tuo piano WEMASY.