Mi történik abban az egyetlen másodpercben, miután valaki a beküldésre kattint az űrlapodon? A legtöbben soha nem gondolnak rá. Az űrlapbeküldés láthatatlan a látogatóid számára, de a rendszereid számára minden. Abban a pillanatban, amikor valaki a beküldésre kattint, eseménysor indul, amelyet a legtöbben soha nem látnak. Az adat ellenőrzés, kódolás, továbbítás, fogadás, feldolgozás és tárolás alatt áll.
Ha ebben a másodpercben valami elromlik, tudnod kell, hol. Ez a cikk végigvezet a beküldési folyamat minden lépésén, hogy megértsd, mi történik a kattintás után.
Mi az űrlapbeküldés?
Az űrlapbeküldés az a folyamat, amelynek során összegyűjtjük az adatot, amelyet a látogató az űrlapmezőkbe írt, és elküldjük egy célhelyre feldolgozásra. A beküldés akkor történik, amikor a felhasználó a beküldő gombra kattint (vagy Entert nyom egy szövegmezőben), ami egy HTTP-kérést indít, amely a látogató válaszait a szerveredre vagy egy külső szolgáltatásra viszi.
Az űrlapbeküldési folyamat több lépésből áll: adatgyűjtés, kódolás, továbbítás, ellenőrzés, feldolgozás és válasz. Mindegyik lépésnek sikeresen le kell zajlania ahhoz, hogy a beküldés helyesen működjön.
Hogyan működik az űrlapbeküldés lépésről lépésre?
Amikor a látogató a beküldésre kattint, meghatározott sorrend zajlik le. Ha megérted az egyes lépéseket, könnyebben hárítod el az integrációs problémákat, és helyesen állítod be az automatizálásokat.
1. lépés: A beküldési esemény elindul
Amikor a felhasználó a beküldő gombra kattint, vagy egyes mezőkben Entert nyom, az űrlap beküldési eseményt hoz létre. Ez az esemény jelzi a böngészőnek, hogy gyűjtse össze az űrlap mezőibe írt összes adatot, és készítse elő a továbbításra.
2. lépés: Az űrlapadat összegyűlik
A böngésző beolvassa az űrlap minden mezőjét (szövegbevitel, legördülő menü, jelölőnégyzet, fájlfeltöltés stb.), és kinyeri az értékeket. Minden mező adatát párosítja a name attribútumával, így kulcs-érték párok jönnek létre. Például ha van egy „email” nevű meződ a „jane@example.com” értékkel, a böngésző ezt párként rögzíti.
Ha egy mező üres vagy üresen maradt, az űrlap akkor is összegyűjti (egyes rendszerek figyelmen kívül hagyják az üres mezőket, az űrlap beállításától függően).
3. lépés: Az adat kódolása
Mielőtt az adat az interneten utazhatna, olyan formátumra kell fordítani, amelyet a webszerver megért. Ezt hívják kódolásnak. A két leggyakoribb kódolási formátum:
URL-kódolt (application/x-www-form-urlencoded): A mezőnevek és értékek egyenlőségjelekkel és &-jelekkel vannak összekapcsolva. Például: „name=Jane&email=jane@example.com&phone=555-0123”. Ez az alapértelmezett a legtöbb űrlapnál.
Multipart/form-data: Akkor használatos, ha az űrlapod fájlfeltöltést is tartalmaz. Ez a formátum lehetővé teszi, hogy szöveges és bináris adat (például képek) együtt menjen.
4. lépés: Az adat a szerverre utazik
A kódolt űrlapadatot HTTP-kérésbe csomagolják, és elküldik az űrlap action attribútumában megadott helyre. Ha nincs megadva action, az űrlap ugyanarra az oldalra küld, amelyen az űrlap van.
A HTTP-kérés tartalmazza az általad megadott módszert: GET vagy POST. A GET-kérések láthatók az URL-ben (keresésekhez és szűrőkhöz használják). A POST-kérések a kérés törzsében rejtik az adatot (érzékeny információkhoz, például jelszavakhoz vagy fizetési adatokhoz használják).
Ha az űrlapod HTTPS-en keresztül kerül beküldésre (amit minden modern űrlapnak így kell), az adat a továbbítás alatt titkosítva van. Ez megvédi az információt az elfogástól.
5. lépés: A szerver fogadja és ellenőrzi az adatot
Amikor a szervered megkapja a beküldést, először ellenőrzi, hogy az adat érvényes és biztonságos-e. Az ellenőrzés tartalmazhatja:
Annak megerősítését, hogy a kötelező mezők nem üresek. Annak ellenőrzését, hogy az e-mail-címek valódi e-mail-címnek látszanak. Annak ellenőrzését, hogy a fájlfeltöltések megfelelő típusúak és méretűek. Annak tesztelését, hogy a számok valóban számok, nem szöveg.
A tisztítás az a folyamat, amelyben eltávolítanak az adatból mindent, ami veszélyes lehet (például rosszindulatú szkripteket). Ez megvédi az adatbázisodat és a rendszereidet a támadásoktól.
6. lépés: A szerver feldolgozza az adatot
Az ellenőrzés és a tisztítás után a szerver eldönti, mit tegyen az adattal. Gyakori műveletek:
Tárolás adatbázisban: A beküldést elmentik, hogy később át tudd nézni, vagy más rendszerekbe tudd integrálni.
Automatizálások indítása: A beküldés automatikusan küldhet e-mailes visszaigazolást, frissíthet egy CRM-et, vagy indíthat egy webhookot.
Válasz létrehozása: A szerver létrehoz és visszaküld egy választ a látogató böngészőjének. Ez lehet sikeroldal, átirányítás vagy ugyanazon az oldalon megjelenő visszaigazoló üzenet.
7. lépés: A látogató látja a visszaigazolást
Az utolsó lépés az, amit a látogató megél. Ez lehet:
Ugyanazon az oldalon megjelenő sikerüzenet. Átirányítás egy köszönőoldalra. A postaládájába küldött visszaigazoló e-mail. Egy modális ablak vagy felugró ablak, amely megerősíti, hogy a beküldés átment.
Ez a lépés kulcsfontosságú, mert a látogatóknak tudniuk kell, hogy a beküldésük sikerült. Világos visszajelzés nélkül többször is beküldhetik az űrlapot, azt gondolva, hogy nem ment át.
Mi történik az űrlapadattal a beküldés után?
Amint a beküldés befejeződik, az adat valahová megy. Ha megérted, hová, az elengedhetetlen az űrlapbeküldések hatékony használatához.
Az űrlapadatod egyszerre több helyen tárolható. A legtöbb űrlapszerkesztő alapértelmezetten a saját adatbázisában menti a beküldéseket (ahol a vezérlőpulton megnézheted őket). Ugyanakkor a beküldés továbbítható külső szolgáltatásokra, például e-mail-marketing eszközökre, CRM-rendszerekre vagy egyedi alkalmazásokra, integrációkon és webhookokon keresztül.
A folyamat így néz ki: Űrlapbeküldés → Az űrlapszerkesztő rögzíti az adatot → Az adatot helyben tárolják és az integrációkra továbbítják → Több felületről is elérheted az adatot.
Az űrlapmezők szerepe a beküldésben
Nem minden űrlapmező viselkedik ugyanúgy a beküldéskor. Ha megérted, hogyan működik az egyes típus, olyan űrlapokat tervezhetsz, amelyek a megfelelő adatot gyűjtik.
Szövegbevitel, szövegterület, e-mail mezők: Az értéküket pontosan úgy küldik be, ahogy beírták.
Legördülő menük és választómezők: A kiválasztott lehetőség értékét küldik be, nem a megjelenített szöveget (bár ezek lehetnek ugyanazok).
Jelölőnégyzetek: Csak akkor küldenek értéket, ha ki vannak pipálva. A kipipálatlan négyzetek semmit nem küldenek.
Rádiógombok: Csak a kiválasztott lehetőség értékét küldik be.
Fájlfeltöltések: Magát a fájlt küldik be, nem csak a nevét. A fájl a korábban említett multipart kódolásban van benne.
Rejtett mezők: Az értéküket automatikusan küldik be, anélkül hogy a látogató látná. Hasznosak extra információ továbbítására a látható mezők mellett.
Hibák, amelyek az űrlapbeküldés közben történhetnek
Néha az űrlapok nem sikeresen kerülnek beküldésre. Gyakori problémák:
Hálózati hibák: Ha az internetkapcsolat megszakad a beküldés közben, az adat nem biztos, hogy eléri a szervert. A látogatónak hibaüzenetet kell látnia.
Szerverhibák: Ha a szervered leállt vagy túlterhelt, a beküldést nem lehet feldolgozni. Ez jellemzően 500-as hibát eredményez.
Ellenőrzési hibák: Ha a kötelező mezők üresek, vagy az adat nem felel meg a várt formátumnak, az űrlapot egyáltalán nem szabad beküldeni. A jó űrlaptervezés ezt a küldés előtti ellenőrzéssel megelőzi.
Időtúllépési hibák: Ha a beküldés túl sokáig tart (általában 30 másodpercnél tovább), a böngésző megszakíthatja a kérést.
Rosszul beállított integrációk: Ha az űrlapod külső szolgáltatásnak küld adatot, de a kapcsolat megszakadt, a beküldés sikerülhet az űrlapszerkesztőben, de nem éri el a célt.
Az űrlapbeküldés biztonsági szempontjai
A biztonság a beküldési folyamat minden szakaszában számít. Itt vannak a kritikus pontok:
Mindig használj HTTPS-t: Az űrlapodnak biztonságos (HTTPS) oldalon kell lennie, nem HTTP-n. Ez titkosítja az adatot továbbítás közben.
Mindkét oldalon ellenőrizz: Az ellenőrzésnek a böngészőben (a felhasználói élményért) és a szerveren (a biztonságért) is meg kell történnie. Soha ne bízz csak a kliensoldali ellenőrzésben.
Tisztíts meg minden bevitelt: Távolíts el vagy escape-elj minden karaktert, amely veszélyes lehet tároláskor vagy megjelenítéskor.
Korlátozd a fájlfeltöltéseket: Ha az űrlapod fájlokat fogad, korlátozd a fájltípusokat és méreteket a visszaélés megelőzésére.
Alkalmazz CSRF-védelmet: Az űrlapoknak tartalmazniuk kell CSRF-tokent, hogy megakadályozzák a támadókat abban, hogy csalárd kéréseket küldjenek be a felhasználók nevében.
Tárold biztonságosan az érzékeny adatot: Ha az űrlapod jelszavakat, fizetési adatokat vagy más érzékeny adatot gyűjt, azt az adatot nyugalmi állapotban is titkosítani kell (titkosítva tárolva az adatbázisodban).
Hogyan kezeli a WEMASY az űrlapbeküldéseket?
A WEMASY űrlapeszköze a teljes beküldési folyamatot kezeli helyetted. Amikor egy látogató beküld egy űrlapot a WEMASY weboldaladon, a beküldést automatikusan rögzíti és tárolja a WEMASY-fiókodban. Innen megnézheted a beküldéseket a vezérlőpulton, exportálhatod CSV-ként, vagy integrációkat köthetsz be, hogy az adatot továbbítsák a CRM-edbe, az e-mail-eszközödbe vagy egyedi alkalmazásokba.
A WEMASY kezeli az ellenőrzés, a kódolás, a biztonságos továbbítás és a tárolás minden technikai bonyolultságát. Te az űrlap tervezésére és az adat célhelyének beállítására összpontosíthatsz. Nézd meg, milyen integrációk érhetők el a WEMASY-fiókodban, vagy nézd meg az árazási oldalt, hogy megtudd, mely űrlapfunkciók tartoznak a csomagodhoz.
Gyakran ismételt kérdések
GET-et vagy POST-ot használjak az űrlapomhoz?
Mi történik, ha valaki elveszíti az internetkapcsolatát a beküldés közben?
[/wemasy-accordion]