Mobil űrlapmezők beállítása: autocomplete, inputmode és mezőtípus a gyorsabb kitöltésért

Scheo · 2026-10-29 · olvasási idő ~10 perc · Szerző: Schmidt Péter

Egy ajánlatkérő vagy pénztár űrlap telefonon akkor megy gyorsan, ha minden mező a megfelelő billentyűzetet hozza fel, és a böngésző fel tudja ajánlani a már elmentett nevet, címet és telefonszámot. Ehhez négy HTML-attribútumot kell rendesen beállítani (type, inputmode, autocomplete, enterkeyhint). Egyikhez sem kell fejlesztési projekt, a legtöbb WordPress-űrlapnál pár kattintás vagy egy rövid kódrészlet elég. A cikkben végig jelöljük, mi hivatalosan igazolt (szabvány, böngészőgyártói vagy bővítménydokumentáció), mi saját tapasztalat (amit oldalak átnézésekor rendszeresen látunk), és mi szakmai feltételezés.

Miért lassú egy rosszul beállított űrlap telefonon?

Azért, mert a látogatónak minden mezőnél kézzel kell billentyűzetet váltania és mindent begépelnie, pedig a telefonja a nevét, a címét és a számát jó eséllyel már tárolja. Egy öt-hat mezős ajánlatkérőnél ez több tucat felesleges érintést jelent.

Hivatalosan igazolt. A HTML szabvány (WHATWG HTML Living Standard) rögzíti, hogy az autocomplete értéke alapján a böngésző automatikusan kitöltheti a mezőt, az inputmode pedig jelzi, milyen virtuális billentyűzet illik hozzá. A Google web.dev oldalán megjelent űrlap-útmutatók kifejezetten ajánlják mindkettőt a mobilos kitöltés gyorsítására.

Saját tapasztalat. Magyar KKV-oldalak átnézésekor gyakran találunk olyan űrlapot, ahol a telefonszám sima szöveges mező, az irányítószámnál betűs billentyűzet jön fel, az automatikus kitöltés pedig nincs beállítva, vagy ki van kapcsolva (autocomplete="off"). Ez többnyire a bővítmény alapbeállításából jön, tudatosan senki nem döntött így.

Mit csinál pontosan a type, az inputmode, az autocomplete és az enterkeyhint?

A type megmondja, milyen adat kerül a mezőbe, az inputmode kiválasztja a billentyűzetet, az autocomplete irányítja az automatikus kitöltést, az enterkeyhint pedig beállítja az Enter gomb feliratát.

type

A type="email" mezőnél a telefon @ jeles billentyűzetet ad, és a böngésző formai ellenőrzést is végez. A type="tel" számbillentyűzetet hoz fel, formátumot viszont nem ellenőriz, mert a telefonszámok országonként eltérnek. A type="number" mennyiségekre való, például darabszámra vagy létszámra. Telefonszámra, irányítószámra és adószámra ne használd, mert elhagyhatja a vezető nullát, egyes böngészőkben görgetésre megváltozik az érték, és a léptető nyilak is zavarnak. Ezt az MDN dokumentációja is kiemeli (hivatalos).

inputmode

Az inputmode csak a billentyűzetet módosítja, az adat típusát nem. A leggyakoribb értékei a numeric (csak számok), a decimal (számok tizedesjellel), a tel, az email és az url. Akkor hasznos igazán, ha a mező type="text" marad, például irányítószámnál vagy kuponkódnál.

autocomplete

Az autocomplete értéke egy szabványos kulcsszó, amiből a böngésző tudja, hogy a mezőbe vezetéknév, teljes cím vagy e-mail-cím kerül. Jó kulcsszónál a billentyűzet fölött megjelenik a mentett adat, és egy érintéssel kitölthető az egész blokk. A teljes lista a HTML szabvány „Autofill” fejezetében olvasható.

enterkeyhint

Az enterkeyhint a mobil billentyűzet Enter gombjának feliratát vagy ikonját állítja be (next, done, send, go, search). Hivatalosan igazolt, hogy ez csak a feliratot változtatja meg. Ha azt szeretnéd, hogy a „Tovább” tényleg a következő mezőre ugorjon, azt a böngésző vagy egy rövid JavaScript intézi. Android Chrome-ban sok űrlapnál magától is a következő mezőre lép, iOS-en a billentyűzet feletti nyilakkal lehet lépkedni (saját tapasztalat, böngészőverziónként eltérhet).

Melyik mezőhöz milyen beállítás illik?

Egy magyar ajánlatkérő vagy pénztár űrlapnál az alábbi mezőnkénti beállításokból érdemes kiindulni. Az értékek a HTML szabvány kulcsszavai, a magyar sajátosságokat (vezetéknév elöl, négyjegyű irányítószám, kötőjeles adószám) külön jelöltük.

• Vezetéknév → type="text", autocomplete="family-name", enterkeyhint="next". A magyar sorrendben ez áll elöl, a kulcsszó a sorrendtől függetlenül működik.
• Keresztnév → autocomplete="given-name".
• Teljes név egy mezőben → autocomplete="name". Ha nincs ok a bontásra, ez a gyorsabb megoldás.
• E-mail → type="email", autocomplete="email".
• Telefonszám → type="tel", autocomplete="tel". A +36 előtagot ne kényszerítsd külön mezőbe, mert a mentett szám jellemzően előtaggal együtt érkezik (szakmai feltételezés, a tárolt formátumtól függ).
• Cégnév → autocomplete="organization".
• Irányítószám → type="text", inputmode="numeric", autocomplete="postal-code", maxlength="4".
• Település → autocomplete="address-level2".
• Utca, házszám → autocomplete="address-line1", az emelet és ajtó külön sorára address-line2.
• Ország → autocomplete="country" vagy country-name.
• Adószám → type="text", inputmode="numeric". Szabványos autocomplete kulcsszó nincs rá. Az iOS számbillentyűzetén nincs kötőjel, ezért fogadd el kötőjel nélkül is, és a szerveren formázd (saját tapasztalat).
• Darabszám, létszám → type="number" vagy inputmode="numeric", min értékkel.
• Kért időpont → type="date", így a telefon saját naptárválasztója jön fel.
• Kártyaszám → inputmode="numeric", autocomplete="cc-number", a lejárathoz cc-exp, a kártyán szereplő névhez cc-name. Beágyazott fizetési oldalnál ezt a fizetési szolgáltató kezeli.
• SMS-ben kapott kód → inputmode="numeric", autocomplete="one-time-code", így iOS-en a beérkezett kód megjelenik a billentyűzet fölött.
• Üzenet (szövegdoboz) → textarea. Itt az Enter sortörést jelent, ezért enterkeyhint nem kell rá.
• Utolsó mező a küldés előtt → enterkeyhint="send" vagy done.

Hogyan néz ki egy jól beállított ajánlatkérő űrlap kódban?

Egy négy mezős ajánlatkérő alapja néhány sor HTML, amit bármelyik fejlesztő vagy bővítmény elő tud állítani. A lényeg az attribútumokban van, a megjelenés a sablon dolga.

<input name="nev" type="text" autocomplete="name" enterkeyhint="next">

<input name="email" type="email" autocomplete="email" enterkeyhint="next">

<input name="telefon" type="tel" autocomplete="tel" enterkeyhint="next">

<input name="irsz" type="text" inputmode="numeric" autocomplete="postal-code" maxlength="4" enterkeyhint="done">

Minden mezőhöz tartozzon látható label is, és a mezők egy valódi form elemen belül legyenek. Ha az autocomplete hiányzik, a böngésző a címkéből és a name értékéből próbálja kitalálni a mező tartalmát, ami magyar címkéknél gyakran félremegy (szakmai feltételezés, böngészőnként eltér).

Hogyan ellenőrizheted a saját telefonodon néhány perc alatt?

Nyisd meg az űrlapot iPhone-on Safariban és egy androidos telefonon Chrome-ban, érintsd meg egymás után a mezőket, és figyeld a billentyűzetet, a felajánlott adatokat és az Enter gomb feliratát. Öt-tíz perc az egész, és a hibák nagy része már így kiderül.

1. Nézd meg, van-e a telefonon mentett név, cím és telefonszám (iPhone-on a Névjegyekben a saját kártyád és a Safari automatikus kitöltése, Androidon a Google automatikus kitöltés). Enélkül nincs mit felajánlani.
2. Érintsd meg a név mezőt. Jó beállításnál a billentyűzet fölött megjelenik a neved vagy egy automatikus kitöltési javaslat.
3. Lépj a telefonszámra. Itt számbillentyűzetnek kell feljönnie.
4. Az irányítószámnál szintén számbillentyűzetet kell látnod, léptető nyilak nélkül.
5. Az e-mail mezőnél a @ jel legyen közvetlenül a billentyűzeten, és az első betű ne váltson nagybetűre.
6. Figyeld az Enter gomb feliratát mezőnként. Közben „Tovább” vagy nyíl jelenjen meg, a végén „Kész” vagy „Küldés”.
7. Fogadd el egyszer az automatikus kitöltést, és nézd meg, minden adat a helyére került-e. Tipikus hiba, hogy a település az utca mezőbe kerül, vagy a teljes név a vezetéknév mezőbe.
8. Küldd be az űrlapot, és ellenőrizd, hogy a beérkezett levélben vagy rendelésben minden adat olvasható.

Ha a kódot is látni szeretnéd, asztali Chrome-ban a jobb klikk és a Vizsgálat menüpont megmutatja a mezők attribútumait. A telefonon futó oldal USB-kábellel is vizsgálható, Androidnál a Chrome chrome://inspect oldalán, iPhone-nál a Mac Safari Fejlesztés menüjén keresztül. A Chrome fejlesztői eszközeiben külön Autofill panel is van, ami megmutatja, melyik mezőt minek ismerte fel a böngésző (hivatalos, a Chrome DevTools dokumentációja leírja).

Hol állítható be mindez a népszerű WordPress-űrlapbővítményekben?

A WooCommerce pénztára alapból jól áll, a Gravity Forms a felületén engedi a beállítást, a többi bővítménynél vagy a mezőtípus kiválasztása elég, vagy egy rövid kódrészlet kell. A bővítmények gyakran frissülnek, ezért a pontos menüpontot mindig a saját verziódban nézd meg.

• WooCommerce (klasszikus és blokkos pénztár). A számlázási és szállítási mezők gyárilag megkapják az autocomplete értékeket (hivatalos, a WooCommerce meződefinícióiban látható). Ha egy bővítménnyel vagy témával átalakítottad a pénztár mezőit, nézd meg újra, mert a testreszabás gyakran elhagyja ezeket. Klasszikus pénztárnál a woocommerce_checkout_fields szűrővel mezőnként beállíthatók.
• Gravity Forms. A 2.5-ös verzió óta a mező Advanced (Speciális) fülén bekapcsolható az automatikus kitöltés, és megadható az autocomplete érték. A Név és a Cím összetett mezők részmezőihez külön érték tartozhat (hivatalos, a Gravity Forms dokumentációja szerint).
• Contact Form 7. A mezőtípust az űrlapcímke választja ki ([email], [tel], [number], [date]), tehát a billentyűzet akkor lesz jó, ha telefonszámra nem [text] címkét használsz. Az újabb verziókban a címkében autocomplete opció is megadható, például [text your-name autocomplete:name]. Ezt a saját verziódban próbáld ki (szakmai feltételezés, verziófüggő).
• WPForms. Az Email és a Phone mezőtípus a megfelelő billentyűzetet hozza. Az autocomplete értékek mezőnkénti kézi megadására a felületen nem találtunk általános beállítást, ezt a fejlesztői szűrőkkel vagy egy kis JavaScripttel lehet pótolni (saját tapasztalat, verziótól függ).
• Elementor Pro űrlap. A mező típusánál válaszd a Tel, Email, Number vagy Date típust. Az autocomplete és az enterkeyhint megadására nincs külön mező, ezeket egy rövid, a mező azonosítójára épülő szkript adja hozzá (saját tapasztalat).
• Fluent Forms, Formidable és a többiek. Ugyanaz a logika érvényes. Először a mezőtípust nézd meg, utána keress a mező haladó beállításai között egyedi attribútum (custom attribute) lehetőséget.

Ha a bővítmény nem engedi az attribútumot, egy ilyen JavaScript-sor pótolja. A lábléc szkriptjei közé vagy egy kódrészlet-bővítménybe teheted.

document.querySelector('#form-field-telefon')?.setAttribute('autocomplete', 'tel');

Szakmai feltételezés. A szkripttel utólag hozzáadott attribútumot a böngészők a legtöbb esetben ugyanúgy figyelembe veszik, mint a HTML-ben szereplőt, mert az automatikus kitöltésről a mező megérintésekor döntenek. Ettől függetlenül a fenti telefonos teszttel mindig ellenőrizd.

Milyen hibák rontják el a jól beállított mezőket?

A leggyakoribb hibák a kikapcsolt automatikus kitöltés, a számmezőként beállított telefonszám és a túl szigorú formátum-ellenőrzés, ami visszadobja a mentett, szóközös telefonszámot.

• autocomplete="off" az egész űrlapon, mert valaki egyszer spam ellen bekapcsolta. A spamrobotokat ez jó eséllyel nem állítja meg, a látogatót viszont lassítja (szakmai feltételezés).
• Telefonszám type="number" mezőben, ahová a + jel és a szóköz nem írható be.
• Olyan mintaellenőrzés (pattern), ami csak a 06301234567 alakot engedi, a mentett +36 30 123 4567 alakot nem. Engedd meg a szóközt, a kötőjelet és a + jelet, és a szerveren tisztítsd meg az értéket.
• Rejtett vagy dupla mezők, amelyeket a böngésző kitölt. Ilyenkor a látogató nem látja, hová került az adata.
• Kitöltés után azonnal megjelenő hibaüzenetek, mert az ellenőrzés a gépelésre figyel, az automatikus kitöltés eseményére pedig nem.

Hogyan méred, hogy tényleg gyorsabb lett-e a kitöltés?

Mérd mezőnként, hol hagyják abba a kitöltést, és mennyi idő telik el az első mező megérintésétől a sikeres beküldésig. Csak a mobilos látogatókat nézd, és a változtatás előtt és után is legalább két-négy hét adatát vesd össze.

A GA4 bővített mérése küld form_start és form_submit eseményt (hivatalos), mezőszintű adatot viszont nem ad, és egyes űrlapbővítményeknél a beküldést sem érzékeli megbízhatóan (saját tapasztalat). Mezőszintű méréshez Google Tag Managerben érdemes saját eseményeket beállítani.

1. field_focus esemény, amikor valaki megérint egy mezőt, paraméterként a mező nevével (például telefon).
2. field_complete esemény, amikor elhagyja a mezőt, és az nem üres.
3. form_submit_success esemény a sikeres beküldés után, a köszönőüzenet vagy köszönőoldal alapján, paraméterként az első megérintés óta eltelt másodpercekkel.
4. Egy tölcsér-felfedezés a GA4-ben, amelynek lépései az egyes mezők field_complete eseményei, a végén a sikeres beküldéssel. A legnagyobb esés mutatja, melyik mezővel van gond.

A mezők tartalmát soha ne küldd el a mérőrendszernek, csak a mező nevét. A név, a telefonszám és az e-mail-cím személyes adat, aminek az analitikába küldését a Google Analytics szabályai is tiltják (hivatalos).

Ha az is érdekel, mennyien használják az automatikus kitöltést, beküldéskor lekérdezheted a mezők :autofill állapotát (mezo.matches(':autofill')), és az arányt egy paraméterben elküldheted. Szakmai feltételezés, hogy ez a modern böngészőkben jó közelítést ad. Az állapot csak a látogató első kézi módosításáig marad meg, ezért a később javított mezők kieshetnek belőle.

Az eredményt óvatosan értelmezd. A beküldési arányt a forgalom összetétele, a szezon és a hirdetések is mozgatják, ezért a mezőszintű elhagyás és a kitöltési idő változása többet mond, mint a teljes konverziószám. A mezők rendbetétele jó eséllyel gyorsítja a kitöltést, konkrét konverziónövekedést viszont nem garantál.

Mi hivatalos, mi tapasztalat és mi feltételezés ebben a témában?

• Hivatalosan igazolt. Az attribútumok működése és értékkészlete (WHATWG HTML szabvány, MDN), a type="number" korlátai, az, hogy az enterkeyhint csak feliratot ad, a WooCommerce pénztár gyári autocomplete értékei, a Gravity Forms beállítása, valamint a GA4 bővített mérésének űrlapeseményei.
• Saját tapasztalat. A magyar oldalakon gyakori alapbeállítási hibák, a bővítmények közti gyakorlati különbségek, a kötőjel hiánya az iOS számbillentyűzetén és a GA4 beküldés-érzékelésének bizonytalansága egyes bővítményeknél.
• Szakmai feltételezés. A szkripttel hozzáadott attribútumok egyenértékűsége, az :autofill alapú mérés pontossága, a telefonszám-előtag kezelése, és hogy a gyorsabb kitöltés mennyit mozdít a beküldési arányon egy adott oldalon.

Források és további olvasnivalók

• WHATWG HTML Living Standard, „Autofill” és „Input modalities” fejezetek
• MDN Web Docs, az autocomplete, inputmode és enterkeyhint attribútumok leírása
• web.dev (Google), Sign-up form best practices és Payment and address form best practices
• Chrome DevTools dokumentáció, Autofill panel
• WooCommerce fejlesztői dokumentáció, a pénztármezők testreszabása
• Gravity Forms dokumentáció, autocomplete beállítás
• Google Analytics súgó, bővített mérés és a személyazonosításra alkalmas adatokra vonatkozó szabály