Käyttäjä klikkaa lähetä. Mitä tapahtuu seuraavaksi? Selain lähettää tiedot palvelimelle. Palvelin käsittelee ne. Entä sitten? Latautuuko sivu uudelleen? Ilmestyykö sivulle jotain? Ohjataanko käyttäjä jonnekin?
Lomakelähetysten käsittely on silta käyttöliittymän ja taustajärjestelmän välillä. Jos teet sen väärin, käyttäjä hämmentyy. Jos teet sen oikein, kokemus tuntuu sujuvalta ja harkitulta. Tässä artikkelissa käydään läpi eri tavat käsitellä lomakelähetyksiä.
Perinteinen lomakelähetys
Perinteisessä lomakelähetyksessä selain lähettää lomaketiedot palvelimelle käyttäen lomakkeen action- ja method-attribuutteja.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Kun käyttäjä klikkaa painiketta, selain koodaa lomaketiedot ja lähettää ne osoitteeseen /submit. Palvelin käsittelee ne ja vastaa uudella sivulla. Selain lataa sivun. Käyttäjä näkee uuden URL-osoitteen ja uutta sisältöä.
Perinteinen lähetys on yksinkertainen, toimii kaikkialla ja toimii ilman JavaScriptiä. Pääasiallinen haitta on, että sivu latautuu uudelleen, mikä tuntuu hitaalta vaikka ei olisikaan, ja käyttäjä menettää vierityskohtansa ja lomakekentät tyhjenevät.
Lomakelähetys uudelleenohjauksilla
Kun palvelin on käsitellyt lomakkeen, se ohjaa käyttäjän yleensä onnistumissivulle tai takaisin lomakkeelle.
Palvelimella lomakkeen käsittelyn jälkeen käytetään return redirect('/thank-you'), joka lähettää HTTP 303 -uudelleenohjausvastauksen, jolloin selain seuraa ohjausta ja lataa /thank-you-sivun, jossa käyttäjä näkee uutta sisältöä uudessa URL-osoitteessa. Etuna on, että käyttäjä tietää lomakkeen käsitellyn ja uusi sivu tekee selväksi, että jotain tapahtui. Haittana on, että sivu latautuu uudelleen ja tarvitaan kaksi pyyntöä palvelimelle (yksi lomakelähetykselle, toinen uudelleenohjauksen kohteelle), mikä saa kokemuksen tuntumaan tarpeettoman hitaalta.
AJAX-lomakelähetys
AJAXilla (Asynchronous JavaScript and XML) voit lähettää lomaketiedot lataamatta sivua uudelleen käyttämällä koodia 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(); } });. Selain lähettää lomaketiedot fetchillä, palvelin käsittelee ne ja vastaa, ja JavaScript vastaanottaa vastauksen ja päivittää sivun ilman uudelleenlatausta tai uudelleenohjausta. Käyttäjä pysyy samalla sivulla, mutta näkee vahvistuksen. Etuna on, että se on nopea, antaa sujuvan kokemuksen, sivua ei ladata uudelleen ja saat täyden hallinnan siitä, mitä seuraavaksi tapahtuu. Haittana on, että se vaatii JavaScriptin, ja jos JavaScript epäonnistuu, lomaketta ei lähetetä, selainhistoriaa ei päivitetä (URL pysyy samana) ja sinun pitää hoitaa kaikki käyttäjälle näytettävä palaute itse.
Progressiivinen parannus AJAXilla
Progressiivinen parannus tarkoittaa, että lomake toimii ilman JavaScriptiä mutta toimii paremmin sen kanssa. Aloita perinteisestä lomakkeesta, joka toimii ilman JavaScriptiä: lomake lähetetään ja sivu ohjautuu kiitossivulle. Sitten, jos JavaScript on käytettävissä, sieppaa submit-tapahtuma addEventListenerilla koodilla if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); }, jotta lähetys tehdään AJAXilla ja viesti näytetään samalla sivulla. Nyt lomake toimii molemmissa tilanteissa. JavaScriptin kanssa se lähetetään AJAXilla ja käyttäjä pysyy sivulla. Ilman JavaScriptiä se lähetetään perinteisesti ja ohjataan edelleen. Etuna on, että lomake toimii kaikille, ja JavaScriptiä käyttävät saavat sujuvan kokemuksen, kun taas ilman sitä olevilla lomake silti toimii. Haittana on enemmän koodia, koska sinun pitää ylläpitää molempia lähetyspolkuja.
Lomakelähetyksen virheiden käsittely
Kun palvelin hylkää lomakelähetyksen (tarkistus epäonnistuu, tietokantavirhe ja niin edelleen), sinulla on kaksi lähestymistapaa. Perinteisessä lähetyksessä palvelin piirtää lomakkeen uudelleen virheilmoitusten kanssa ja näyttää ne käyttäjälle. AJAX-lähetyksessä palvelin vastaa virhetilakoodilla (400, 422) ja virheilmoituksilla, ja JavaScript näyttää virheet sivulla koodilla _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Näytä virheet aina niiden aiheuttaneiden kenttien vieressä sen sijaan, että piilottaisit ne yhteenvetoon, jotta käyttäjä näkee tarkasti, mikä meni pieleen ja mistä korjata.
Lataustilojen käsittely
Kun lomake lähetetään, poista lähetyspainike käytöstä, jotta käyttäjä ei klikkaa sitä kahdesti, ja näytä latausindikaattori tai viesti koodilla 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'; });. Poista painike käytöstä heti, koska jos pyyntö kestää 5 sekuntia, käyttäjä voi klikata uudelleen luullen, ettei se toiminut.
Mitä tehdä onnistuneen lähetyksen jälkeen
Kun lomake on lähetetty onnistuneesti, sinulla on vaihtoehtoja. Voit tyhjentää lomakekentät, näyttää kiitosviestin, ohjata kiitossivulle, lähettää käyttäjälle sähköpostin, palauttaa hänet edelliselle sivulle tai jättää hänet lomakkeelle, jotta hän voi lähettää uudelleen. Valitse lomakkeesi tarkoituksen mukaan. Yhteydenottolomakkeen pitäisi näyttää kiitosviesti, varauslomakkeen pitäisi ohjata varausvahvistukseen ja uutiskirjeen tilauksen pitäisi palauttaa käyttäjä sivulle, jolla hän oli.
Miten WEMASY hoitaa lomakelähetyksen
WEMASYn lomakkeet tukevat sekä perinteistä lähetystä että AJAXia. Määritä, mitä lähetyksen jälkeen tapahtuu: näytä viesti, ohjaa URL-osoitteeseen tai lähetä sähköposti-ilmoitus. WEMASY tarkistaa tiedot sekä selaimessa että palvelimella.
Katso lomakelähetyksen vaihtoehdot WEMASY-tilauksestasi.