Kodėl jūsų „WordPress“ formos turi būti pritaikytos mobiliesiems įrenginiams

Paskutinį kartą atnaujinta: Paskutinį kartą atnaujinta rugpjūčio 1 d.

Daugiau nei pusė viso svetainės srauto dabar gaunama iš išmaniųjų telefonų ir planšetinių kompiuterių. Vis dėlto daugelis „WordPress“ kontaktinių formų vis dar atrodo ir veikia taip, lyg būtų sukurtos darbalaukio monitoriui – maži teksto laukai, greta esantys maketai, užimantys visą ekraną, ir pateikimo mygtukai, kuriuos sunku paspausti nykščiu.

Jei jūsų formos nėra pritaikytos mobiliesiems įrenginiams , kasdien prarandate pateiktų formų skaičių. Lankytojai, kuriems sunku užpildyti formą telefone, verčiau nerašo jums el. laiško – jie išeina. Šiame vadove paaiškinama, kodėl svarbios mobiliesiems įrenginiams pritaikytos „WordPress“ formos, kas nutinka ne taip, kai jos neatitinka reikalavimų, ir kaip sukurti formas, kurios puikiai veiktų bet kokio dydžio ekrane.

Ką reiškia prisitaikymas prie mobiliųjų įrenginių formų atveju?

Mobiliesiems įrenginiams pritaikyta forma pritaiko savo išdėstymą, laukų dydžius ir interaktyvius elementus prie ekrano, kuriame ji rodoma. Darbalaukio monitoriuje formoje gali būti rodomi du stulpeliai greta. Telefone tie patys laukai sujungiami į vieną stulpelį su viso pločio įvesties laukais, pakankamai dideliais, kad būtų patogu bakstelėti.

Mobiliųjų įrenginių pritaikymas reagavimui – tai ne tik darbalaukio išdėstymo sumažinimas. Tai reiškia:

• Maketų pertvarkymas — siauruose ekranuose daugiaskilčiai dizainai tampa vieno stulpelio dizainais
• Jutiklinis taikinys yra pakankamai didelis — mygtukus, žymimuosius langelius ir išskleidžiamuosius meniu lengva bakstelėti pirštu
• Rodomos teisingos mobiliųjų įrenginių klaviatūros — el. pašto laukuose aktyvuojama el. pašto klaviatūra, telefono laukuose rodoma skaitmeninė klaviatūra
• Tekstas lieka skaitomas — norint užpildyti lauką, nereikia slinkti horizontaliai ar keisti mastelio
• Vaizdai ir antraštės tinkamai keičiasi — reklaminių skydelių vaizdai mažuose ekranuose nekirpami ir neperpildomi
• Patvirtinimo klaidos matomos — klaidos pranešimai rodomi eilutėje, o forma slenka į problemos lauką

Forma, kuri gerai atrodo nešiojamajame kompiuteryje, bet neveikia „iPhone“ telefone, nėra pritaikyta mobiliesiems įrenginiams – nesvarbu, ką teigia jūsų tema.

Kodėl svarbios mobiliesiems pritaikytos formos

Dauguma lankytojų naudojasi mobiliaisiais telefonais

Nesvarbu, ar jūsų srautas gaunamas iš „Google“ paieškos, socialinės žiniasklaidos, mokamų skelbimų ar el. pašto kampanijų, didelė dalis lankytojų atvyksta telefonu. „Google“ naudoja mobiliesiems pritaikytą indeksavimą, o tai reiškia, kad paieškos reitingams nustatyti pirmiausia vertina jūsų puslapių mobiliąją versiją. Mobiliajame įrenginyje neveikianti forma gali pakenkti tiek konversijoms, tiek SEO.

Mobiliųjų įrenginių naudotojai konvertuoja skirtingai

Mobiliųjų įrenginių lankytojai dažnai mąsto kitaip – ​​naršo važiuodami į darbą ir atgal, atsako į socialinio tinklo įrašą arba seka rekomendaciją. Jie tikisi užpildyti formą per mažiau nei minutę su minimalia trintimi. Kiekvienas papildomas bakstelėjimas, kiekvienas laukas, kurio jie negali pasiekti, ir kiekvienas išdėstymas, kuriam reikia horizontalaus slinkimo, yra priežastis atsisakyti formos.

Pirmas įspūdis susidaro mažuose ekranuose

Jūsų forma dažnai yra paskutinis konversijos piltuvo žingsnis. Kontaktinė forma, kainos pasiūlymo užklausa, registracija į renginį arba naujienlaiškio prenumerata yra vieta, kur susidomėjimas tampa veiksmu. Jei šis paskutinis žingsnis mobiliajame įrenginyje neveikia, viskas prieš jį – jūsų nukreipimo puslapis, išlaidos reklamai, jūsų turinys – praranda vertę.

Prieinamumas ir įtraukumas

Mobiliųjų įrenginių reagavimas į ekraną sutampa su prieinamumu. Didesni lietimui jautrūs elementai, lengvai įskaitomas tekstas ir logiškas laukų išdėstymas padeda ne tik telefono naudotojams, bet ir lankytojams, turintiems motorikos sutrikimų, vyresnio amžiaus naudotojams ir visiems, naudojantiems planšetinį kompiuterį portreto režimu.

Kas nutinka, kai formos nėra pritaikytos mobiliesiems įrenginiams

Nereaguojančios formos sukuria nuspėjamų problemų. Štai ką patiria lankytojai ir kodėl jie išeina:

• Laukai perpildo ekraną — greta esantys pavadinimų laukai arba dviejų stulpelių išdėstymai tęsiasi už peržiūros srities ribų, todėl reikia slinkti horizontaliai
• Pateikimo mygtukai per maži — Mažyčius mygtukus sunku tiksliai paspausti, ypač vartotojams su dideliais pirštais arba važiuojant nelygiu keliu
• Išskleidžiamieji meniu ir datos parinkikliai neveikia — Natyviosios naršyklės įvesties duomenys skirtinguose įrenginiuose veikia nevienodai; tinkinti rinkikliai, kurie nėra išbandyti mobiliuosiuose įrenginiuose, dažnai sugenda
• Failų įkėlimas nepavyksta tyliai — įkėlimo sritys per mažos, kad būtų galima paliesti, arba sąsajos, kurios netinkamai suaktyvina mobilųjį failų rinkiklį
• CAPTCHA neįmanoma – „reCAPTCHA“ vaizdų iššūkiai 375 pikselių ekrane erzina vartotojus ir padidina atsisakymo riziką
• Patvirtinimo klaidos nematomos — klaidų pranešimai rodomi ne ekrane arba ilgos formos, kurią vartotojas jau praėjo, viršuje
• Parašų negalima piešti — parašo klaviatūros, kurios palaiko tik pelės įvestį, jutikliniuose ekranuose yra nenaudingos

Kiekvienas iš jų yra konversijų žudikas. Ir visų jų galima išvengti naudojant nuo pat pradžių mobiliesiems įrenginiams sukurtą formų įskiepį.

Mobilioji realybė „WordPress“ svetainėms

Duomenys yra vienodi visuose pramonės sektoriuose:

• Mobiliųjų įrenginių sąskaita daugiau nei 50 % pasaulinio interneto srauto
• „Google“ reitinguoja puslapius pagal jų mobiliojo ryšio patirtis, ne darbalaukio
• Formos atsisakymo rodikliai yra žymiai didesnis mobiliuosiuose įrenginiuose kai formos nėra optimizuotos lietimui
• Puslapio įkėlimo greitis mobiliuosiuose tinkluose tiesiogiai veikia tai, ar lankytojai užsibūna pakankamai ilgai, kad užpildytų formą.

„WordPress“ svetainių savininkams tai reiškia, kad mobiliųjų įrenginių formų dizainas nėra būtina funkcija – tai esminis reikalavimas. Kiekviena kontaktinė forma, potencialių klientų paieškos forma, registracijos forma ir apklausa jūsų svetainėje turėtų būti išbandyta ir optimizuota telefonams ir planšetiniams kompiuteriams prieš jas paskelbiant.

Į ką atkreipti dėmesį renkantis mobiliesiems pritaikytą formos papildinį

Ne kiekvienas „WordPress“ formų įskiepis vienodai veikia mobiliuosiuose įrenginiuose. Prieš pasirinkdami – arba prieš manydami, kad dabartinis įskiepis tinka – patikrinkite šias funkcijas:

1. Integruotas reaguojantis CSS — maketai turėtų automatiškai keisti išdėstymą, jums nerašant pasirinktinių medijos užklausų
2. Įrenginio peržiūra kūrimo priemonėje – prieš publikuodami turėtumėte galėti matyti darbalaukio, planšetinio kompiuterio ir mobiliojo telefono rodinius
3. Jutikliniams lietimams pritaikytų laukų tipai — parašo bloknotai, failų įkėlimai ir išskleidžiamieji meniu, veikiantys su pirštų įvedimu
4. Mobiliesiems įrenginiams pritaikytos klaviatūros — el. pašto, telefono ir URL laukai turėtų suaktyvinti tinkamą mobiliąją klaviatūrą
5. Vieno stulpelio atsarginis variantas — kelių stulpelių ir eilučių išdėstymai siauruose ekranuose turėtų būti vertikaliai sukrauti
6. Nuo temos nepriklausomas stilius — forma turėtų atrodyti teisingai, nepriklausomai nuo jūsų „WordPress“ temos CSS
7. Įterptinis patvirtinimas su automatiniu slinkimu — klaidos turėtų atsirasti šalia lauko ir slinkti į matomumą mobiliajame įrenginyje
8. Įterptųjų formų palaikymas — jei formas patalpinate išorinėse svetainėse, jų dydis turėtų automatiškai pasikeisti bet kuriame įrenginyje

Kaip automatinis formų kūrimo įrankis tvarko reagavimą į mobiliuosius įrenginius

„Auto Form Builder“ sukurta taip, kad prisitaikymas prie mobiliųjų įrenginių būtų pagrindinė funkcija, o ne antraeilis dalykas. Štai kaip ji užtikrina, kad jūsų formos veiktų kiekviename įrenginyje.

Stalinių, planšetinių ir mobiliųjų įrenginių peržiūra

Ir formų kūrimo priemonėje, ir skirtuke „Tinkinti“ yra tiesioginė įrenginio peržiūra. Prieš publikuodami formą, galite perjungti darbalaukio , planšetinio kompiuterio ir mobiliojo įrenginio rodinius, kad tiksliai pamatytumėte, kaip ji atrodys. Stiliaus pakeitimai – spalvos, šriftai, antraštės paveikslėliai, mygtukų dizainas, fonai – atnaujinami realiuoju laiku visose trijose peržiūros srityse.

Automatinis maketo pertvarkymas

„Auto Form Builder“ formose naudojamas reaguojantis CSS, kuris automatiškai prisitaiko:

• Dviejų stulpelių maketai sutraukti į vieną stulpelį ekranuose, kurių skiriamoji geba yra 768 pikseliai ir mažesnė
• Eilutės stiliaus žymimasis langelis ir radijo grupės mobiliajame įrenginyje sukrauti vertikaliai, o ne perpildyti horizontaliai
• Tinklelio stiliaus parinkčių išdėstymai perjungti iš kelių stulpelių į vieną stulpelį
• Formų konteineriai naudokite sklandžius pločius su 100 % maksimaliu pločiu, kad jie niekada neviršytų ekrano dydžio

Jums nereikia rašyti pasirinktinio CSS ar diegti atskiro reaguojančio papildinio.

Prisilietimui optimizuoti laukų tipai

Kiekvienas lauko tipas automatinėje formų kūrimo priemonėje yra skirtas lietimui:

• Parašo laukas — lankytojai pasirašo pirštu, rašikliu arba pele; parašo klaviatūra reaguoja į lietimo veiksmus telefonuose ir planšetiniuose kompiuteriuose
• Failo ikelimas — įkėlimo sritys, pritaikytos mobiliajai sąveikai, paliečiant, aktyvuoja vidinį failų rinkiklį „iOS“ ir „Android“ sistemose
• Pasirinktiniai datos ir laiko rinkikliai — išskleidžiamojo meniu stiliaus rinkikliai, kurie nuosekliai veikia visose naršyklėse ir įrenginiuose, pakeisdami nepatikimus vietinius įvesties duomenis
• Ieškomi išskleidžiamieji meniu — lietimui draugiškas pasirinkimas su patvirtinimu eilutėje
• Telefono laukai — sukonfigūruota taip, kad mobiliuosiuose įrenginiuose būtų aktyvuota skaitmeninė klaviatūra

Išmanioji antraštė ir vaizdo mastelio keitimas

Formos su antraščių paveikslėliais arba reklamjuostėmis automatiškai prisitaiko prie mažų ekranų. Telefonuose antraščių paveikslėliai perjungiami iš viršelio į talpinimo režimą, kad visas vaizdas liktų matomas neapkirpus šonų – atitiktų tai, ką įkėlėte, o ne apkarpytą fragmentą.

Įterptinis patvirtinimas su automatiniu slinkimu

Kai lankytojas mobiliajame įrenginyje pateikia neteisingą formą, automatinė formų kūrimo priemonė:

• Rodo eilutėje esantį klaidos pranešimą tiesiai po netinkamu lauku
• Vizualiai žymi lauką, kad jį būtų lengva pastebėti
• Automatiškai slenka iki pirmo neteisingo lauko ir jį sufokusuoja
• Išvalo klaidas, kai lankytojas jas ištaiso – nereikia iš naujo įkelti puslapio, neprarandami duomenys

Tai padeda išvengti įprasto mobiliųjų įrenginių nusivylimo, kai reikia pateikti formą, viršuje matyti bendrą klaidą ir nežinoti, kurį lauką taisyti.

Nuo temos nepriklausomas stilius

„Auto Form Builder“ formos turi savo CSS kodą. Jų išdėstymas ar išvaizda nepriklauso nuo jūsų „WordPress“ temos. Tai svarbu mobiliuosiuose įrenginiuose, nes daugelis temų taiko agresyvius CSS nustatymus iš naujo arba minimalų stilių, kuris sutrikdo formų išdėstymą, ypač tokiose temose kaip „Hello Elementor“. „Auto Form Builder“ formos rodomos teisingai, nepriklausomai nuo temos, puslapių kūrimo priemonės ar prieglobos svetainės stilių.

Vaizdo srities suvokimas

Integruotas peržiūros srities tvarkyklė vykdymo metu aptinka ekrano dydį, orientaciją ir įrenginio tipą. Ji pritaiko tinkamas adaptyvias klases ir CSS pasirinktines ypatybes, kad formos prisitaikytų, kai lankytojas pasuka savo telefoną, pakeičia naršyklės dydį arba peržiūri formą planšetiniame kompiuteryje portreto režimu.

Įterpkite formas, kurių dydis keičiamas bet kuriame įrenginyje

Išorinėse svetainėse – ne „WordPress“ svetainėse, nukreipimo puslapiuose, klientų portaluose – įterptos formos automatiškai pakeičia dydį, kad tilptų į jų konteinerį, be vidinės slinkties juostos. Įterptoji forma išlaiko jūsų sukurtą dizainą ir prisitaiko prie bet kokio ekrano, kuriame peržiūrimas pagrindinis puslapis. Mobiliųjų įrenginių pritaikymas perkeliamas kartu su įterpimo kodu.

Pavadinimo lauko išdėstymo valdiklis

Vardo laukas palaiko sudėtinį arba greta esantį vardo ir pavardės išdėstymą. Rinkitės sudėtinį išdėstymą mobiliesiems įrenginiams skirtoms formoms, kuriose prioritetas teikiamas vieno stulpelio srautui, arba greta esantį išdėstymą auditorijai, kuri daugiausia naudojasi staliniais kompiuteriais – reaguojantis CSS tvarko išdėstymo keitimą bet kuriuo atveju.

Geriausia mobiliesiems pritaikytų „WordPress“ formų praktika

Net ir naudojant prisitaikantį formų įskiepį, jūsų formų dizainas turi įtakos mobiliųjų įrenginių užpildymo rodikliams. Laikykitės šių praktikų:

1. Mobiliuosiuose įrenginiuose formas rašykite trumpai. Kiekvienas papildomas laukas padidina atsisakymo skaičių. Klauskite tik to, ko jums reikia – naudokite sąlyginę logiką, kad papildomi laukai būtų rodomi tik tada, kai tai aktualu.
2. Naudokite vieno stulpelio išdėstymus. Venkite priverstinio dviejų stulpelių dizaino, nebent forma pirmiausia skirta darbalaukio versijai. Automatinė formų kūrimo priemonė automatiškai sudeda stulpelius, tačiau pradėti nuo vieno stulpelio yra aiškiau.
3. Mobiliajame įrenginyje pateikimo mygtuką nustatykite į viso pločio. Platų, aiškiai pažymėtą mygtuką lengviau paliesti ir jis vizualiai labiau pastebimas siaurame ekrane.
4. Vietoj paveikslėlio CAPTCHA pasirinkite „Cloudflare“ turniketą. Turniketas yra lietimui jautrus ir nematomas daugumai tikrų lankytojų – daug geriau mobiliuosiuose įrenginiuose nei spustelėti šviesoforus mažame tinklelyje.
5. Testas tikrame telefone. Peržiūros režimai yra būtini, tačiau niekas nepakeičia testavimo tikrame „iPhone“ ar „Android“ įrenginyje prieš paleidimą.
6. Virš laukų uždėkite etiketes. Viršuje lygiuotas etiketes lengviau skaityti siauruose ekranuose nei kairėje lygiuotas etiketes šalia laukų.
7. Naudokite aiškų vietos rezervavimo tekstą ir pagalbos tekstą. Mobiliųjų įrenginių naudotojai peržiūri informaciją peržvelgdami ją akimis. Trumpi, aiškūs laukų pavadinimai ir pagalbinis tekstas sumažina painiavą ir klaidų atsiradimą.
8. Įgalinti naudotojų patvirtinimo el. laiškus. Mobiliųjų įrenginių lankytojai gali nematyti ekrane sėkmės pranešimo, jei perjungia programėlę. Patvirtinimo el. laiške jiems patikinama, kad pateikimas sėkmingas.
9. Venkite privalomų failų įkėlimų mobiliosioms įrenginiams skirtose formose. Jei įkėlimai būtini, padarykite lietimo taikinį didelį ir išbandykite tiek „iOS“, tiek „Android“ sistemose.
10. Norėdami sutrumpinti patirtį, naudokite sąlyginę logiką. Rodyti tik tuos laukus, kurie yra susiję su kiekvieno lankytojo atsakymais – kuo mažiau matomų laukų, tuo greitesnis atsakymų pildymas mobiliuoju telefonu.

Kaip išbandyti savo formas mobiliajame telefone

Prieš publikuodami bet kokią formą, peržiūrėkite šį kontrolinį sąrašą:

1 veiksmas: naudokite integruotą įrenginio peržiūrą

Automatinėje formų kūrimo priemonėje atidarykite formą ir kūrimo priemonėje arba skirtuke „Tinkinti“ perjunkite peržiūros režimą į mobilųjį rodinį . Patikrinkite, ar visi laukai tinkamai sudėti, pateikimo mygtukas matomas neslenkant ir ar antraštės vaizdai rodomi visiškai.

2 veiksmas: išbandykite tikrame įrenginyje

Atidarykite puslapį su savo forma „iPhone“ ir „Android“ telefonuose. Užpildykite visus laukus, tyčia suaktyvinkite patvirtinimo klaidas, įkelkite failą ir pateikite. Patvirtinkite sėkmės pranešimą arba peradresavimą.

3 veiksmas: išbandykite portreto ir kraštovaizdžio režimu

Pasukite įrenginį ir patvirtinkite formos pertvarkymą nepertraukiant jos. „Auto Form Builder“ peržiūros srities tvarkyklė tvarko orientacijos pakeitimus, tačiau greita rankinė patikra nustato kraštutinius atvejus.

4 veiksmas: išbandykite įterptąsias formas

Jei įterpimo kodą naudojate išorinėje svetainėje, atidarykite tą puslapį mobiliajame įrenginyje ir patvirtinkite, kad formos dydis pakeičiamas, kad jis tilptų, ir visi laukai lieka tinkami naudoti.

5 veiksmas: patikrinkite puslapio greitį

Lėtai įkeliamos formos mobiliuosiuose tinkluose praranda lankytojus dar prieš jiems pamatant pirmąjį lauką. Išlaikykite formos puslapį kuo lankstesnį ir patikrinkite įkėlimo laiką riboto mobiliojo ryšio režimu naudodami „Google PageSpeed ​​Insights“ arba naršyklės tinklo ribojimo įrankius.

Dažnai užduodami klausimai

Kurkite mobiliesiems pritaikytas formas jau šiandien

Jūsų lankytojai naudojasi telefonais. Jūsų formos taip pat turėtų jais naudotis. „Auto Form Builder“ siūlo pritaikomus maketus, lietimui optimizuotus laukus, įrenginio peržiūrą, tiesioginį patvirtinimą ir įterpimo kodus, kurie veikia kiekviename ekrane – visa tai nemokamai.

Įdiekite „Auto Form Builder“ iš „WordPress.org“ ir naudokite mobiliąją peržiūrą, kad pamatytumėte savo pirmąją formą kiekviename įrenginyje. Arba išbandykite tiesioginę demonstraciją savo telefone jau dabar.