Zakaj morajo biti vaši obrazci WordPress odzivni na mobilne naprave

Zadnja posodobitev: Zadnja posodobitev 1. avgusta

Več kot polovica vsega prometa na spletnem mestu zdaj prihaja s pametnih telefonov in tablic. Kljub temu so številni kontaktni obrazci WordPressa še vedno videti in se obnašajo, kot da bi bili narejeni za namizni monitor – majhna besedilna polja, postavitve drug ob drugem, ki preplavljajo zaslon, in gumbi za oddajo, ki se jih je težko dotakniti s palcem.

Če vaši obrazci niso odzivni na mobilne naprave , vsak dan izgubljate oddane obrazce. Obiskovalci, ki se težko spopadejo z izpolnjevanjem obrazca na telefonu, vam ne pošljejo e-pošte – odidejo. Ta vodnik pojasnjuje, zakaj so obrazci WordPressa, odzivni na mobilne naprave, pomembni, kaj gre narobe, če niso, in kako ustvariti obrazce, ki delujejo odlično na vseh velikostih zaslona.

Kaj pomeni odzivnost na mobilne naprave za obrazce?

Obrazec, ki se odziva na mobilne naprave, prilagodi svojo postavitev, velikosti polj in interaktivne elemente zaslonu, na katerem je prikazan. Na namiznem monitorju lahko obrazec prikaže dva stolpca drug ob drugem. Na telefonu se ista polja zložijo v en sam stolpec z vnosi polne širine, ki so dovolj veliki, da se jih lahko udobno dotaknete.

Odzivnost na mobilne naprave ne pomeni le krčenja postavitve namizja. Pomeni:

• Preoblikovanje postavitev — večstolpčne zasnove postanejo enostolpčne na ozkih zaslonih
• Cilji dotika so dovolj veliki — gumbe, potrditvena polja in spustne menije je enostavno tapniti s prstom
• Prikažejo se pravilne mobilne tipkovnice — polja za e-pošto sprožijo e-poštno tipkovnico, polja za telefon pa prikažejo številsko tipkovnico
• Besedilo ostane berljivo — za izpolnjevanje polja ni potrebno vodoravno pomikanje ali povečevanje
• Slike in glave se pravilno skalirajo — slike pasic se na majhnih zaslonih ne obrezujejo ali prekrivajo
• Napake pri preverjanju so vidne — sporočila o napakah se prikažejo v vrstici in obrazec se pomakne do polja s težavo

Obrazec, ki je na prenosniku videti dobro, na iPhonu pa se zlomi, ni odziven na mobilne naprave – ne glede na to, kaj vaša tema trdi.

Zakaj so mobilni odzivni obrazci pomembni

Večina obiskovalcev je na mobilnih napravah

Ne glede na to, ali vaš promet prihaja iz iskanja Google, družbenih medijev, plačanih oglasov ali e-poštnih kampanj, velik delež obiskovalcev prihaja prek telefona. Google uporablja indeksiranje, ki je namenjeno predvsem mobilnim napravam, kar pomeni, da za uvrstitev v iskalnikih ocenjuje predvsem mobilno različico vaših strani. Obrazec, ki ne deluje na mobilnih napravah, lahko škoduje tako konverzijam kot tudi SEO.

Uporabniki mobilnih naprav izvajajo različne konverzije

Obiskovalci mobilnih naprav so pogosto v drugačnem načinu razmišljanja – brskajo med vožnjo, odgovarjajo na objavo na družbenih omrežjih ali sledijo priporočilu. Pričakujejo, da bodo obrazec izpolnili v manj kot minuti z minimalnim trenjem. Vsak dodaten dotik, vsako polje, do katerega ne morejo doseči, in vsaka postavitev, ki zahteva vodoravno drsenje, je razlog za opustitev obrazca.

Prvi vtisi se zgodijo na malih zaslonih

Vaš obrazec je pogosto zadnji korak v lijaku konverzije. Kontaktni obrazec, zahteva za ponudbo, registracija na dogodek ali prijava na novice so tisti, kjer zanimanje postane dejanje. Če se ta zadnji korak na mobilni napravi zdi pokvarjen, vse pred njim – vaša ciljna stran, vaša poraba za oglaševanje, vaša vsebina – izgubi vrednost.

Dostopnost in inkluzivnost

Odzivnost na mobilne naprave se prekriva z dostopnostjo. Večje ciljne površine na dotik, berljivo besedilo in logično zlaganje polj pomagajo ne le uporabnikom telefonov, temveč tudi obiskovalcem z motoričnimi težavami, starejšim uporabnikom in vsem, ki uporabljajo tablični računalnik v pokončnem načinu.

Kaj se zgodi, ko obrazci niso prijazni do mobilnih naprav

Neodzivni obrazci ustvarjajo predvidljive težave. Tukaj je opisano, kaj doživljajo obiskovalci – in zakaj odidejo:

• Polja presegajo zaslon — polja z imeni eno ob drugem ali dvostolpčne postavitve segajo preko vidnega polja, kar sili k vodoravnemu pomikanju
• Gumbi za oddajo so premajhni — drobne gumbe je težko natančno pritiskati, zlasti za uporabnike z večjimi prsti ali na neravnih vožnjah na delo
• Spustni meniji in izbirniki datumov ne delujejo — izvorni vnosi v brskalniku se med napravami obnašajo nedosledno; izbirniki po meri, ki niso preizkušeni na mobilnih napravah, pogosto ne delujejo pravilno
• Nalaganje datotek tiho ne uspe — nalaganje območij, ki so premajhna za dotik, ali vmesnikov, ki ne sprožijo izbirnika datotek za mobilne naprave pravilno
• CAPTCHA je nemogoča — Izzivi slik reCAPTCHA na zaslonu velikosti 375 slikovnih pik frustrirajo uporabnike in povečujejo število opustitev
• Napake pri preverjanju so nevidne — sporočila o napakah se prikažejo izven zaslona ali na vrhu dolgega obrazca, mimo katerega se je uporabnik že pomaknil
• Podpisov ni mogoče risati — podpisne ploščice, ki podpirajo samo vnos z miško, so na zaslonih na dotik neuporabne

Vsak od teh dejavnikov uničuje konverzije. In vsem se je mogoče izogniti z vtičnikom za obrazce, ki je že od samega začetka zasnovan za mobilne naprave.

Mobilna resničnost za spletna mesta WordPress

Podatki so skladni v vseh panogah:

• Mobilne naprave predstavljajo več kot 50 % svetovnega spletnega prometa
• Google razvršča strani glede na njihovo mobilna izkušnja, ne namizni računalnik
• Stopnje opustitve obrazcev so bistveno višje na mobilnih napravah ko obrazci niso optimizirani za vnos na dotik
• Hitrost nalaganja strani v mobilnih omrežjih neposredno vpliva na to, ali obiskovalci ostanejo dovolj dolgo, da izpolnijo obrazec

Za lastnike spletnih mest WordPress to pomeni, da oblikovanje mobilnih obrazcev ni le prijetna funkcija, temveč je osnovna zahteva. Vsak kontaktni obrazec, obrazec za zajemanje potencialnih strank, obrazec za registracijo in anketa na vašem spletnem mestu je treba pred objavo preizkusiti in optimizirati za telefone in tablične računalnike.

Kaj iskati pri vtičniku za obrazce, ki se odzivajo na mobilne naprave

Vsak vtičnik za obrazce WordPress ne deluje enako dobro z mobilnimi napravami. Preden se odločite – ali preden domnevate, da je vaš trenutni vtičnik v redu – preverite te zmogljivosti:

1. Vgrajen odziven CSS — postavitve bi se morale samodejno preoblikovati, ne da bi morali pisati medijske poizvedbe po meri
2. Predogled naprave v graditelju — pred objavo bi morali imeti možnost ogleda namizne, tablične in mobilne različice
3. Vrste polj, prijazne do dotika — podpisne ploščice, nalaganje datotek in spustni meniji, ki delujejo s prstnim vnosom
4. Tipkovnice, primerne za mobilne naprave — polja za e-pošto, telefon in URL bi morala sprožiti pravilno mobilno tipkovnico
5. Rezervni enostolpčni element — postavitve z več stolpci in vrsticami bi se morale na ozkih zaslonih zlagati navpično
6. Slog, neodvisen od teme — obrazec bi moral izgledati pravilno ne glede na CSS vaše WordPress teme
7. Vgrajeno preverjanje s samodejnim pomikanjem — napake bi se morale prikazati poleg polja in se pomakniti v vidno polje na mobilni napravi
8. Podpora za vdelane obrazce — če obrazce postavite na zunanja spletna mesta, bi se morala njihova velikost samodejno spremeniti v kateri koli napravi

Kako Auto Form Builder obravnava odzivnost mobilnih naprav

Auto Form Builder je zasnovan z odzivnostjo na mobilne naprave kot osnovno funkcijo – ne kot naknadno misel. Takole zagotavlja, da vaši obrazci delujejo v vseh napravah.

Predogled za namizne računalnike, tablične računalnike in mobilne naprave

Tako graditelj obrazcev kot zavihek Prilagodi vključujeta predogled v živo na napravi. Preklapljajte med pogledom za namizne računalnike , tablične računalnike in mobilne naprave , da si pred objavo ogledate, kako bo obrazec videti. Spremembe sloga – barve, pisave, slike glave, oblikovanje gumbov, ozadja – se posodabljajo v realnem času v vseh treh vidnih poljih.

Samodejno preoblikovanje postavitve

Obrazci programa Auto Form Builder uporabljajo odziven CSS, ki se samodejno prilagaja:

• Dvostolpčne postavitve strni v en sam stolpec na zaslonih z ločljivostjo 768 slikovnih pik in manj
• Skupine potrditvenih polj in izbirnikov v slogu vrstic na mobilnih napravah navpično zlagajte namesto vodoravnega prelivanja
• Postavitve možnosti v slogu mreže preklopi iz večstolpčnega v enostolpčni prikaz
• Posode za obrazce Uporabite tekoče širine s 100 % največje širine, da nikoli ne presežejo zaslona

Ni vam treba pisati CSS-ja po meri ali nameščati ločenega odzivnega dodatka.

Vrste polj, optimizirane za dotik

Vsaka vrsta polja v programu Auto Form Builder je zasnovana za vnos na dotik:

• Polje za podpis — obiskovalci podpisujejo s prstom, pisalom ali miško; podpisna ploščica se odziva na dotike na telefonih in tablicah
• Nalaganje datoteke — območja za nalaganje z dotikom, prilagojena mobilni interakciji, ki sprožijo izvorni izbirnik datotek v sistemih iOS in Android
• Izbirniki datuma in časa po meri — izbirniki v spustnem slogu, ki delujejo dosledno v vseh brskalnikih in napravah ter nadomeščajo nezanesljive izvorne vnose
• Iskalni spustni meniji — izbira na dotik z vgrajeno validacijo
• Polja za telefon — konfigurirano za sprožitev številske tipkovnice na mobilnih napravah

Pametno spreminjanje velikosti glave in slike

Obrazci s slikami glave ali pasicami se samodejno prilagodijo na majhnih zaslonih. Na telefonih se slike glave preklopijo iz načina naslovnice v način vsebine, tako da ostane vidna celotna slika brez obrezovanja stranic – ujema se s tem, kar ste naložili, ne z obrezanim delom.

Vgrajeno preverjanje s samodejnim pomikanjem

Ko obiskovalec odda neveljaven obrazec na mobilni napravi, orodje za samodejno ustvarjanje obrazcev:

• Prikaže sporočilo o napaki v vrstici neposredno pod neveljavnim poljem
• Vizualno označuje polje, tako da ga je enostavno opaziti
• Samodejno se pomakne do prvega neveljavnega polja in ga nastavi v fokus
• Odpravlja napake, ko jih obiskovalec popravi – brez ponovnega nalaganja strani, brez izgubljenih podatkov

S tem se izognemo pogostim mobilnim frustracijam, kot so oddaja obrazca, prikaz generične napake na vrhu in nepoznavanje polja, ki ga je treba popraviti.

Tematsko neodvisno oblikovanje

Obrazci Auto Form Builder imajo svoj CSS z omejenim obsegom. Njihova postavitev ali videz niso odvisni od vaše teme WordPress. To je pomembno na mobilnih napravah, saj številne teme uporabljajo agresivne ponastavitve CSS-ja ali minimalno oblikovanje, ki poruši postavitve obrazcev – zlasti pri temah, kot je Hello Elementor. Obrazci Auto Form Builder se pravilno prikažejo ne glede na temo, graditelj strani ali sloge spletnega mesta gostitelja.

Upodabljanje glede na vidno polje

Vgrajeni upravitelj vidnih območij med izvajanjem zazna velikost zaslona, ​​orientacijo in vrsto naprave. Uporabi pravilne odzivne razrede in lastnosti CSS po meri, tako da se obrazci prilagodijo, ko obiskovalec zavrti telefon, spremeni velikost brskalnika ali si obrazec ogleda na tabličnem računalniku v pokončnem načinu.

Vdelava obrazcev, ki spreminjajo velikost v kateri koli napravi

Obrazci, vdelani na zunanjih spletnih mestih – spletnih mestih, ki niso WordPress, ciljnih straneh, portalih strank – se samodejno spremenijo v velikost, da se prilegajo svojemu vsebniku brez notranjega drsnega traku. Vdelani obrazec ohrani obliko, ki ste jo ustvarili, in se prilagodi vsakemu zaslonu, na katerem si ogledujete gostiteljsko stran. Odzivnost na mobilne naprave se prenaša s kodo za vdelavo.

Kontrolnik postavitve imena polja

Polje za ime podpira naloženo ali vzporedno postavitev imena in priimka. Izberite naloženo postavitev za obrazce, ki so usmerjeni najprej na mobilne naprave, kjer je prednost en sam stolpec, ali vzporedno za občinstvo, ki uporablja predvsem namizne računalnike – odzivni CSS poskrbi za prerazporeditev v obe smeri.

Najboljše prakse za WordPress obrazce, prijazne mobilnim napravam

Tudi z odzivnim vtičnikom za obrazce način oblikovanja vpliva na stopnje izpolnjevanja na mobilnih napravah. Upoštevajte te postopke:

1. Na mobilnih napravah naj bodo obrazci kratki. Vsako dodatno polje poveča stopnjo opustitve. Vprašajte le tisto, kar potrebujete – uporabite pogojno logiko, da dodatna polja prikažete le, kadar so pomembna.
2. Uporabite postavitve z enim stolpcem. Izogibajte se vsiljevanju dvostolpčnih zasnov, razen če je obrazec namenjen predvsem namiznemu računalniku. Samodejni graditelj obrazcev samodejno zlaga stolpce, vendar je začetek z enim stolpcem bolj pregleden.
3. Na mobilnih napravah naj bo gumb za oddajo polne širine. Širok, jasno označen gumb je lažje dotikati in je na ozkem zaslonu vizualno bolj viden.
4. Izberite Cloudflare Turnstile namesto slikovne CAPTCHA. Vrtljiva križišča so prijazna do dotika in nevidna večini obiskovalcev – veliko boljša na mobilnih napravah kot klikanje na semaforje v majhni mreži.
5. Preizkusite na pravem telefonu. Predogledni načini so bistveni, vendar nič ne nadomesti testiranja na dejanski napravi iPhone ali Android pred objavo.
6. Nalepke postavite nad polja. Zgoraj poravnane oznake so na ozkih zaslonih lažje berljive kot levo poravnane oznake ob poljih.
7. Uporabite jasno besedilo nadomestnega besedila in besedilo pomoči. Uporabniki mobilnih naprav bežno preletijo z očmi. Kratke, neposredne oznake polj in pomožno besedilo zmanjšujejo zmedo in napake.
8. Omogoči potrditvena e-poštna sporočila uporabnikov. Obiskovalci mobilnih naprav morda ne bodo videli sporočila o uspehu na zaslonu, če zamenjajo aplikacijo. Potrditveno e-poštno sporočilo jih pomiri, da je bila oddaja uspešno opravljena.
9. Izogibajte se obveznemu nalaganju datotek na obrazcih, ki so na voljo predvsem za mobilne naprave. Če so nalaganja potrebna, povečajte ciljno območje za dotik in preizkusite v sistemih iOS in Android.
10. Za skrajšanje izkušnje uporabite pogojno logiko. Prikažite samo polja, ki so pomembna za odgovore posameznega obiskovalca – manj vidnih polj pomeni hitrejše mobilno izpolnjevanje.

Kako preizkusiti obrazce na mobilnih napravah

Preden objavite kateri koli obrazec, preglejte ta kontrolni seznam:

1. korak: Uporabite vgrajeni predogled naprave

V orodju za samodejno ustvarjanje obrazcev odprite obrazec in v orodju za ustvarjanje obrazcev ali na zavihku Prilagodi preklopite predogled na mobilni pogled . Preverite, ali so vsa polja pravilno zložena, ali je gumb za oddajo viden brez pomikanja in ali so slike glave prikazane v celoti.

2. korak: Preizkusite na pravi napravi

Odprite stran z obrazcem na iPhonu in telefonu Android. Izpolnite vsa polja, namerno sprožite napake pri preverjanju, naložite datoteko in jo pošljite. Preverite, ali sporočilo o uspehu ali preusmeritev deluje.

3. korak: Preizkusite v pokončnem in ležečem načinu

Zavrtite napravo in preverite, ali se obrazec preoblikuje brez prekinitev. Upravitelj vidnega polja programa Auto Form Builder obravnava spremembe orientacije, vendar hitro ročno preverjanje zazna robne primere.

4. korak: Preizkusite vdelane obrazce

Če kodo za vdelavo uporabljate na zunanjem spletnem mestu, odprite to stran v mobilni napravi in ​​preverite, ali se velikost obrazca prilagodi in ali so vsa polja še vedno uporabna.

5. korak: Preverite hitrost strani

Počasno nalaganje obrazcev v mobilnih omrežjih izgublja obiskovalce, še preden vidijo prvo polje. Ohranite stran obrazca vitko in preizkusite čas nalaganja na omejeni mobilni povezavi z uporabo Google PageSpeed ​​Insights ali orodij za omejevanje omrežja v brskalniku.

Pogosto zastavljena vprašanja

Zgradite obrazce, odzivne na mobilne naprave, še danes

Vaši obiskovalci so na svojih telefonih. Tudi vaši obrazci bi morali biti. Auto Form Builder vam ponuja odzivne postavitve, polja, optimizirana za dotik, predogled naprave, preverjanje v vrstici in vdelane kode, ki delujejo na vseh zaslonih – vse vključeno brezplačno.

Namestite Auto Form Builder z WordPress.org in uporabite predogled za mobilne naprave, da si ogledate svoj prvi obrazec na vsaki napravi. Ali pa preizkusite predstavitev v živo na svojem telefonu takoj.