Prečo musia byť vaše formuláre WordPress responzívne pre mobilné zariadenia

Naposledy aktualizované: Posledná aktualizácia 5. augusta

Viac ako polovica všetkej návštevnosti webových stránok teraz pochádza zo smartfónov a tabletov. Napriek tomu mnohé kontaktné formuláre WordPressu stále vyzerajú a správajú sa, akoby boli vytvorené pre monitor stolného počítača – malé textové polia, rozloženia vedľa seba, ktoré presahujú obrazovku, a tlačidlá na odoslanie, na ktoré sa ťažko ťukne palcom.

Ak vaše formuláre nie sú responzívne pre mobilné zariadenia , každý deň prichádzate o odoslané formuláre. Návštevníci, ktorí majú problém vyplniť formulár na telefóne, vám namiesto toho nepošlú e-mail – odídu. Táto príručka vysvetľuje, prečo sú formuláre WordPress responzívne pre mobilné zariadenia dôležité, čo sa pokazí, keď nie sú, a ako vytvoriť formuláre, ktoré fungujú krásne na každej veľkosti obrazovky.

Čo znamená responzívna verzia pre mobilné zariadenia pre formuláre?

Formulár responzívny pre mobilné zariadenia prispôsobuje svoje rozloženie, veľkosti polí a interaktívne prvky obrazovke, na ktorej sa zobrazuje. Na monitore počítača môže formulár zobrazovať dva stĺpce vedľa seba. V telefóne sa tie isté polia stohujú do jedného stĺpca s plnou šírkou vstupov dostatočne veľkých na pohodlné klepnutie.

Responzívnosť na mobilných zariadeniach nie je len o zmenšení rozloženia na ploche. Znamená to:

• Preformátovanie rozložení — viacstĺpcové dizajny sa na úzkych obrazovkách stanú jednostĺpcovými
• Dotykové ciele sú dostatočne veľké — tlačidlá, zaškrtávacie políčka a rozbaľovacie ponuky sa dajú ľahko ťuknúť prstom
• Zobrazujú sa správne mobilné klávesnice — polia e-mailu aktivujú klávesnicu e-mailu, polia telefónu zobrazujú numerickú klávesnicu
• Text zostáva čitateľný — na vyplnenie poľa nie je potrebné horizontálne rolovanie ani približovanie
• Obrázky a hlavičky sa zobrazujú správne — obrázky bannerov sa na malých obrazovkách neorezávajú ani nepretekajú
• Chyby overenia sú viditeľné — chybové hlásenia sa zobrazujú priamo v texte a formulár sa posunie do problémového poľa

Formulár, ktorý vyzerá dobre na notebooku, ale na iPhone sa rozbíja, nie je responzívny pre mobilné zariadenia – bez ohľadu na to, čo vaša téma tvrdí.

Prečo sú formuláre responzívne pre mobilné zariadenia dôležité

Väčšina návštevníkov je na mobilných zariadeniach

Či už vaša návštevnosť pochádza z vyhľadávania Google, sociálnych médií, platených reklám alebo e-mailových kampaní, veľká časť návštevníkov prichádza cez telefón. Google používa indexovanie s prioritou pre mobilné zariadenia, čo znamená, že primárne vyhodnocuje mobilnú verziu vašich stránok z hľadiska umiestnenia vo vyhľadávaní. Formulár, ktorý na mobilnom zariadení zlyhá, môže poškodiť konverzie aj SEO.

Používatelia mobilných zariadení konvertujú inak

Návštevníci na mobilných zariadeniach majú často iný spôsob myslenia – prehliadajú web počas cesty do práce, reagujú na príspevok na sociálnych sieťach alebo sledujú odporúčania. Očakávajú, že formulár vyplnia za menej ako minútu s minimálnym napätím. Každé ďalšie ťuknutie, každé pole, na ktoré sa nedostanú, a každé rozloženie, ktoré vyžaduje horizontálne rolovanie, je dôvodom na opustenie formulára.

Prvé dojmy sa vytvárajú na malých obrazovkách

Váš formulár je často posledným krokom v konverznom lieviku. Kontaktný formulár, žiadosť o cenovú ponuku, registrácia na udalosť alebo prihlásenie sa na odber noviniek sú miesta, kde sa záujem stáva akciou. Ak sa tento posledný krok na mobile zdá nefunkčný, všetko pred ním – vaša vstupná stránka, vaše výdavky na reklamu, váš obsah – stráca na hodnote.

Dostupnosť a inkluzivita

Responzívnosť mobilných zariadení sa prekrýva s prístupnosťou. Väčšie dotykové plochy, čitateľný text a logické skladanie polí pomáhajú nielen používateľom telefónov, ale aj návštevníkom s motorickými ťažkosťami, starším používateľom a každému, kto používa tablet v režime na výšku.

Čo sa stane, keď formuláre nie sú optimalizované pre mobilné zariadenia

Neresponzívne formuláre vytvárajú predvídateľné problémy. Tu je to, čo návštevníci zažívajú – a prečo odchádzajú:

• Polia presahujú obrazovku — polia s názvami vedľa seba alebo dvojstĺpcové rozloženia presahujú výrez, čo núti horizontálne rolovanie
• Tlačidlá na odoslanie sú príliš malé — malé tlačidlá sa ťažko presne stláčajú, najmä pre používateľov s väčšími prstami alebo pri hrboľatom dochádzaní
• Rozbaľovacie ponuky a výber dátumu sú prerušené — natívne vstupy prehliadača sa správajú nekonzistentne na rôznych zariadeniach; vlastné výbery, ktoré nie sú testované na mobilných zariadeniach, často nefungujú správne
• Nahrávanie súborov zlyhalo bez povšimnutia — oblasti nahrávania sú príliš malé na klepnutie alebo rozhrania, ktoré správne nespúšťajú výber mobilných súborov
• CAPTCHA je nemožná — Problémy s obrázkami reCAPTCHA na obrazovke s rozlíšením 375 pixelov frustrujú používateľov a zvyšujú počet opustení
• Chyby overenia sú neviditeľné — chybové hlásenia sa zobrazujú mimo obrazovky alebo v hornej časti dlhého formulára, ktorý používateľ už prešiel
• Podpisy nie je možné kresliť — podpisové podložky, ktoré podporujú iba vstup myšou, sú na dotykových obrazovkách zbytočné

Každý z nich ničí konverzie. A všetkým sa dá vyhnúť pomocou pluginu formulárov vytvoreného pre mobilné zariadenia od začiatku.

Mobilná realita pre WordPress stránky

Údaje sú konzistentné vo všetkých odvetviach:

• Mobilné zariadenia predstavujú viac ako 50 % globálnej webovej prevádzky
• Google hodnotí stránky na základe ich mobilný zážitok, nie počítač
• Miera opustenia formulára je výrazne vyššie na mobilných zariadeniach keď formuláre nie sú optimalizované pre dotykový vstup
• Rýchlosť načítania stránky v mobilných sieťach priamo ovplyvňuje, či návštevníci zostanú dostatočne dlho na vyplnenie formulára.

Pre majiteľov stránok WordPress to znamená, že dizajn mobilných formulárov nie je len príjemnou funkciou – je to základná požiadavka. Každý kontaktný formulár, formulár na získavanie potenciálnych zákazníkov, registračný formulár a prieskum na vašej stránke by mal byť pred zverejnením otestovaný a optimalizovaný pre telefóny a tablety.

Na čo sa zamerať pri výbere pluginu pre formuláre responzívneho pre mobilné zariadenia

Nie každý plugin pre formuláre vo WordPresse zvláda mobilné zariadenia rovnako. Predtým, ako sa rozhodnete – alebo predtým, ako budete predpokladať, že váš aktuálny plugin je v poriadku – skontrolujte tieto možnosti:

1. Vstavané responzívne CSS — rozloženia by sa mali automaticky preformátovať bez nutnosti písania vlastných mediálnych dotazov
2. Náhľad zariadenia v nástroji na tvorbu — pred publikovaním by ste mali mať možnosť zobraziť zobrazenia na počítači, tablete a mobile
3. Typy polí s dotykovým ovládaním — podpisové podložky, nahrávanie súborov a rozbaľovacie ponuky, ktoré fungujú so vstupom prstom
4. Klávesnice vhodné pre mobilné zariadenia — polia pre e-mail, telefón a URL by mali spúšťať správnu mobilnú klávesnicu
5. Záložný odkaz s jedným stĺpcom — viacstĺpcové a riadkové rozloženia by sa mali na úzkych obrazovkách zobrazovať vertikálne
6. Štýl nezávislý od témy — formulár by mal vyzerať správne bez ohľadu na CSS vašej WordPress témy
7. Inline overovanie s automatickým posúvaním — chyby by sa mali zobraziť vedľa poľa a mali by sa posunúť do zobrazenia na mobilnom zariadení
8. Podpora vstavaných formulárov — ak umiestnite formuláre na externé stránky, ich veľkosť by sa mala automaticky meniť na akomkoľvek zariadení

Ako Auto Form Builder rieši responzívnosť mobilných zariadení

Auto Form Builder je vytvorený s ohľadom na responzívnosť na mobilných zariadeniach ako základnú funkciu – nie ako dodatočnú myšlienku. Tu je návod, ako zabezpečí, aby vaše formuláre fungovali na každom zariadení.

Ukážka pre počítače, tablety a mobilné zariadenia

Nástroj na tvorbu formulárov aj karta Prispôsobiť obsahujú živý náhľad na zariadení. Prepínajte medzi zobrazením na počítači , tablete a mobilnom zariadení , aby ste si pred publikovaním presne pozreli, ako bude váš formulár vyzerať. Zmeny štýlu – farby, písma, obrázky hlavičiek, dizajn tlačidiel, pozadia – sa aktualizujú v reálnom čase vo všetkých troch zobrazovacích oblastiach.

Automatické preformátovanie rozloženia

Formuláre Auto Form Builder používajú responzívny CSS, ktorý sa automaticky prispôsobuje:

• Dvojstĺpcové rozloženia zbaliť do jedného stĺpca na obrazovkách s rozlíšením 768px a menej
• Skupiny zaškrtávacích políčok a prepínačov v štýle riadka vertikálne stohovanie na mobile namiesto horizontálneho pretečenia
• Rozloženia možností v štýle mriežky prepnúť z viacerých stĺpcov na jeden stĺpec
• Kontajnery na formuláre používajte fluidné šírky so 100 % maximálnou šírkou, aby nikdy nepresiahli obrazovku

Nemusíte písať vlastné CSS ani inštalovať samostatný responzívny doplnok.

Typy polí optimalizovaných pre dotykové ovládanie

Každý typ poľa v Auto Form Builder je navrhnutý pre dotykový vstup:

• Pole pre podpis — návštevníci podpisujú prstom, stylusom alebo myšou; podpisová podložka reaguje na dotyky na telefónoch a tabletoch
• Nahranie súboru — oblasti nahrávania klepnutím s rozmermi pre mobilnú interakciu, ktoré spúšťajú natívny výber súborov v systémoch iOS a Android
• Vlastné výbery dátumu a času — rozbaľovacie výberové menu, ktoré fungujú konzistentne vo všetkých prehliadačoch a zariadeniach a nahrádzajú nespoľahlivé natívne vstupy
• Vyhľadávateľné rozbaľovacie ponuky — dotykový výber s overením v texte
• Polia telefónu — nakonfigurované na spustenie numerickej klávesnice na mobilných zariadeniach

Inteligentná hlavička a zmena mierky obrázka

Formuláre s obrázkami hlavičiek alebo bannermi sa automaticky prispôsobia na malých obrazovkách. V telefónoch sa obrázky hlavičiek prepnú z režimu obálky do režimu obsahu, takže celý obrázok zostane viditeľný bez orezania strán – zhoduje sa s tým, čo ste nahrali, nie s orezaným fragmentom.

Inline overovanie s automatickým posúvaním

Keď návštevník odošle neplatný formulár na mobile, nástroj na tvorbu formulárov:

• Zobrazuje chybové hlásenie priamo pod neplatným poľom
• Vizuálne označuje ihrisko, takže je ľahko spozorovateľné
• Automaticky sa posunie na prvé neplatné pole a zameria sa naň
• Odstraňuje chyby hneď, ako ich návštevník opraví – žiadne opätovné načítanie stránky, žiadne stratené údaje

Vďaka tomu sa predíde bežnej frustrácii na mobilných zariadeniach, keď sa pri odosielaní formulára zobrazí všeobecná chyba v hornej časti a človek nevie, ktoré pole má opraviť.

Štýl nezávislý od témy

Formuláre Auto Form Builder majú vlastný CSS s obmedzeným rozsahom. Ich rozloženie ani vzhľad nie sú závislé od vašej WordPress témy. To je dôležité na mobilných zariadeniach, pretože mnohé témy používajú agresívne resety CSS alebo minimálny štýl, ktorý narúša rozloženie formulárov – najmä na témach ako Hello Elementor. Formuláre Auto Form Builder sa zobrazujú správne bez ohľadu na tému, nástroj na tvorbu stránok alebo štýly hostiteľskej stránky.

Vykresľovanie s ohľadom na výrez

Vstavaný správca výrezov rozpoznáva veľkosť obrazovky, orientáciu a typ zariadenia za behu. Aplikuje správne responzívne triedy a vlastné vlastnosti CSS, takže formuláre sa prispôsobia, keď návštevník otočí telefón, zmení veľkosť prehliadača alebo si formulár zobrazí na tablete v režime na výšku.

Vložte formuláre, ktoré menia veľkosť na akomkoľvek zariadení

Formuláre vložené na externých webových stránkach – stránkach iných výrobcov ako WordPress, vstupných stránkach, klientskych portáloch – sa automaticky menia vo veľkosti tak, aby sa zmestili do kontajnera bez vnútorného posúvača. Vložený formulár si zachováva dizajn, ktorý ste vytvorili, a prispôsobuje sa akejkoľvek obrazovke, na ktorej sa hostiteľská stránka zobrazuje. Responzívnosť na mobilných zariadeniach sa prenáša s vloženým kódom.

Ovládací prvok rozloženia poľa s názvom

Pole Meno podporuje skladané alebo vedľa seba zobrazenie krstného mena a priezviska. Skladané rozloženie vyberte pre formuláre s prioritou pre mobilné zariadenia, kde je prioritou jeden stĺpec, alebo vedľa seba pre publikum s prevahou počítačov – responzívny CSS zvládne zmenu rozloženia v oboch smeroch.

Najlepšie postupy pre formuláre WordPress optimalizované pre mobilné zariadenia

Aj s responzívnym pluginom pre formuláre má spôsob, akým ich navrhujete, vplyv na mieru dokončenia na mobilných zariadeniach. Dodržujte tieto postupy:

1. Formuláre na mobile udržujte krátke. Každé ďalšie pole zvyšuje mieru opustenia. Pýtajte sa iba na to, čo potrebujete – použite podmienenú logiku na zobrazenie ďalších polí iba v prípade, že sú relevantné.
2. Používajte rozloženie s jedným stĺpcom. Nevynucujte dvojstĺpcové návrhy, pokiaľ formulár nie je primárne určený pre zobrazenie na počítači. Automatický nástroj na tvorbu formulárov automaticky ukladá stĺpce, ale začiatok s jedným stĺpcom je prehľadnejší.
3. Na mobile zobrazte tlačidlo odoslania na celú šírku. Široké, jasne označené tlačidlo sa ľahšie ťukne a je vizuálne výraznejšie na úzkej obrazovke.
4. Zvoľte Cloudflare Turnstile namiesto obrázkového CAPTCHA. Turniket je dotykový a pre väčšinu skutočných návštevníkov neviditeľný – oveľa lepší na mobile ako klikanie na semafory v malej mriežke.
5. Vyskúšajte na skutočnom telefóne. Režimy ukážky sú nevyhnutné, ale nič nenahradí testovanie na skutočnom iPhone alebo zariadení so systémom Android pred spustením.
6. Umiestnite štítky nad polia. Štítky zarovnané nahor sa na úzkych obrazovkách čítajú ľahšie ako štítky zarovnané doľava vedľa polí.
7. Použite jasný zástupný text a text pomoci. Mobilní používatelia prezerajú text. Krátke, priamočiare popisky polí a pomocný text znižujú zmätok a chyby.
8. Povoliť potvrdzovacie e-maily pre používateľov. Návštevníci mobilných zariadení nemusia vidieť správu o úspechu na obrazovke, ak prepnú aplikáciu. Potvrdzovací e-mail ich uistí, že odoslanie prebehlo úspešne.
9. Vyhnite sa povinnému nahrávaniu súborov vo formulároch určených predovšetkým pre mobilné zariadenia. Ak je potrebné nahrávanie, zväčšite cieľovú plochu a otestujte ju v systémoch iOS aj Android.
10. Na skrátenie zážitku použite podmienenú logiku. Zobraziť iba polia relevantné pre odpovede každého návštevníka – menej viditeľných polí znamená rýchlejšie dokončenie na mobilných zariadeniach.

Ako otestovať formuláre na mobile

Pred publikovaním akéhokoľvek formulára si prečítajte tento kontrolný zoznam:

Krok 1: Použite vstavaný náhľad zariadenia

V nástroji Auto Form Builder otvorte formulár a v nástroji Auto Form Builder alebo na karte Prispôsobiť prepnite ukážku na mobilné zobrazenie . Skontrolujte, či sú všetky polia správne usporiadané, či je tlačidlo na odoslanie viditeľné bez posúvania a či sa obrázky hlavičky zobrazujú naplno.

Krok 2: Testovanie na skutočnom zariadení

Otvorte stránku s formulárom na iPhone a telefóne so systémom Android. Vyplňte všetky polia, zámerne spustite chyby overenia, nahrajte súbor a odošlite ho. Overte, či funguje správa o úspechu alebo presmerovanie.

Krok 3: Testovanie na výšku a na šírku

Otočte zariadenie a skontrolujte, či sa formulár preformátuje bez prerušenia. Správca zobrazovacích oblastí v automatickom tvorcovi formulárov spracováva zmeny orientácie, ale rýchla manuálna kontrola zachytí okrajové prípady.

Krok 4: Testovanie vložených formulárov

Ak použijete kód na vloženie na externej stránke, otvorte túto stránku v mobile a skontrolujte, či sa veľkosť formulára zmení a či všetky polia zostanú použiteľné.

Krok 5: Skontrolujte rýchlosť načítavania stránky

Pomaly sa načítavajúce formuláre v mobilných sieťach strácajú návštevníkov ešte predtým, ako uvidia prvé pole. Udržujte stránku formulára štíhlu a otestujte čas načítania na obmedzenom mobilnom pripojení pomocou nástroja Google PageSpeed ​​Insights alebo nástrojov na obmedzenie sieťového pripojenia vo vašom prehliadači.

Často kladené otázky

Vytvorte si formuláre responzívne pre mobilné zariadenia ešte dnes

Vaši návštevníci sú na svojich telefónoch. Vaše formuláre by mali byť tiež. Auto Form Builder vám poskytuje responzívne rozloženia, polia optimalizované pre dotykové ovládanie, náhľad zariadenia, overovanie v texte a vložené kódy, ktoré fungujú na každej obrazovke – to všetko je zahrnuté zadarmo.

Nainštalujte si Auto Form Builder z WordPress.org a použite mobilnú ukážku na zobrazenie vášho prvého formulára na každom zariadení. Alebo si vyskúšajte živú ukážku na svojom telefóne hneď teraz.