Proč by vaše formuláře ve WordPressu měly být responzivní pro mobilní zařízení

Naposledy aktualizováno: Poslední aktualizace 5. srpna

Více než polovina veškeré návštěvnosti webových stránek nyní pochází z chytrých telefonů a tabletů. Přesto mnoho kontaktních formulářů WordPressu stále vypadá a chová se, jako by byly vytvořeny pro stolní počítač – malá textová pole, rozvržení vedle sebe, která přetékají přes obrazovku, a tlačítka pro odeslání, na která je těžké se dotknout palcem.

Pokud vaše formuláře nejsou responzivní pro mobilní zařízení , každý den přicházíte o odeslané formuláře. Návštěvníci, kteří se potýkají s vyplněním formuláře na telefonu, vám místo toho nepošlou e-mail – odejdou. Tato příručka vysvětluje, proč jsou formuláře WordPress responzivní pro mobilní zařízení důležité, co se může pokazit, když ne, a jak vytvářet formuláře, které fungují krásně na všech velikostech obrazovky.

Co znamená responzivní verze pro mobilní zařízení pro formuláře?

Formulář responzivní pro mobilní zařízení přizpůsobí své rozvržení, velikosti polí a interaktivní prvky obrazovce, na které se zobrazuje. Na monitoru počítače se formulář může zobrazovat ve dvou sloupcích vedle sebe. Na telefonu se stejná pole shlukují do jednoho sloupce s plnou šířkou vstupů dostatečně velkých pro pohodlné klepnutí.

Responzivita na mobilních zařízeních neznamená jen zmenšení rozvržení plochy. Znamená to:

• Přeformátování rozvržení — vícesloupcové designy se na úzkých obrazovkách stanou jednosloupcovými
• Dotykové cíle jsou dostatečně velké — tlačítka, zaškrtávací políčka a rozbalovací nabídky se snadno dotýkají prstem
• Zobrazují se správné mobilní klávesnice — pole pro e-mail aktivují klávesnici pro e-mail, pole pro telefon zobrazují numerickou klávesnici
• Text zůstává čitelný — k vyplnění pole není nutné horizontální posouvání ani zoomování
• Obrázky a záhlaví se správně škálují — bannerové obrázky se na malých obrazovkách neořezávají ani nepřetékají
• Chyby ověření jsou viditelné — chybové zprávy se zobrazují přímo v textu a formulář se posune do problémového pole

Formulář, který na notebooku vypadá dobře, ale na iPhonu se rozbíjí, není responzivní pro mobilní zařízení – bez ohledu na to, co vaše téma tvrdí.

Proč jsou responzivní formuláře pro mobilní zařízení důležité

Většina návštěvníků je na mobilu

Ať už vaše návštěvnost pochází z vyhledávání Google, sociálních médií, placené reklamy nebo e-mailových kampaní, velká část návštěvníků přichází na telefon. Google používá indexování typu „mobile-first“, což znamená, že primárně vyhodnocuje mobilní verzi vašich stránek z hlediska umístění ve vyhledávání. Formulář, který na mobilních zařízeních nefunguje, může poškodit jak konverze, tak SEO.

Mobilní uživatelé konverze probíhají odlišně

Návštěvníci na mobilních zařízeních jsou často v jiném režimu – procházejí web během dojíždění, reagují na příspěvek na sociálních sítích nebo se řídí doporučením. Očekávají, že formulář vyplní za méně než minutu s minimálním třením. Každé další klepnutí, každé pole, na které se nedostanou, a každé rozvržení, které vyžaduje horizontální posouvání, je důvodem k opuštění formuláře.

První dojmy se tvoří na malých obrazovkách

Váš formulář je často posledním krokem v konverzním trychtýři. Kontaktní formulář, žádost o cenovou nabídku, registrace na akci nebo přihlášení k odběru newsletteru jsou místy, kde se zájem stává akcí. Pokud se tento poslední krok na mobilních zařízeních jeví jako nefunkční, vše před ním – vaše vstupní stránka, vaše výdaje na reklamu, váš obsah – ztrácí hodnotu.

Dostupnost a inkluzivita

Responzivita na mobilních zařízeních se prolíná s přístupností. Větší dotykové plochy, čitelný text a logické vrstvení polí pomáhají nejen uživatelům telefonů, ale i návštěvníkům s motorickými obtížemi, starším uživatelům a komukoli, kdo používá tablet v režimu na výšku.

Co se stane, když formuláře nejsou optimalizované pro mobilní zařízení

Neresponzivní formuláře vytvářejí předvídatelné problémy. Zde je to, s čím se návštěvníci setkávají – a proč odcházejí:

• Pole přetékají přes obrazovku — pole s názvy vedle sebe nebo rozvržení se dvěma sloupci přesahují zobrazovací oblast a vynucují horizontální posouvání
• Tlačítka pro odeslání jsou příliš malá — drobná tlačítka se obtížně přesně dotýkají, zejména pro uživatele s většími prsty nebo při hrbolatém dojíždění
• Rozbalovací nabídky a výběr data selhávají — nativní vstupy prohlížeče se na různých zařízeních chovají nekonzistentně; vlastní nástroje pro výběr, které nejsou testovány na mobilních zařízeních, často nefungují správně.
• Nahrávání souborů se tiše nezdaří — oblasti pro nahrávání jsou příliš malé na to, aby se na ně dalo klepnout, nebo rozhraní, která správně neaktivují mobilní nástroj pro výběr souborů
• CAPTCHA je nemožná — Problémy s obrázky reCAPTCHA na obrazovce o velikosti 375 pixelů frustrují uživatele a zvyšují počet opuštění
• Chyby validace jsou neviditelné — chybové zprávy se zobrazují mimo obrazovku nebo v horní části dlouhého formuláře, který uživatel již přešel
• Podpisy nelze kreslit — podpisové podložky, které podporují pouze vstup myší, jsou na dotykových obrazovkách k ničemu

Každý z těchto faktorů ničí konverze. A všem se lze vyhnout pomocí pluginu formulářů, který je od začátku vytvořen pro mobilní zařízení.

Mobilní realita pro weby WordPress

Data jsou napříč odvětvími konzistentní:

• Mobilní zařízení představují více než 50 % globálního webového provozu
• Google řadí stránky na základě jejich mobilní zážitek, ne pro stolní počítače
• Míra opuštění formuláře je výrazně vyšší na mobilních zařízeních když formuláře nejsou optimalizovány pro dotykové ovládání
• Rychlost načítání stránky v mobilních sítích přímo ovlivňuje, zda návštěvníci zůstanou dostatečně dlouho na vyplnění formuláře.

Pro majitele webů na WordPressu to znamená, že design mobilních formulářů není jen příjemnou funkcí, ale základním požadavkem. Každý kontaktní formulář, formulář pro získávání potenciálních zákazníků, registrační formulář a průzkum na vašem webu by měl být před spuštěním otestován a optimalizován pro telefony a tablety.

Na co se zaměřit u pluginu pro responzivní formuláře pro mobilní zařízení

Ne každý plugin pro formuláře ve WordPressu zvládá mobilní zařízení stejně. Než se rozhodnete – nebo než budete předpokládat, že váš současný plugin je v pořádku – zkontrolujte tyto funkce:

1. Vestavěný responzivní CSS — rozvržení by se mělo automaticky přeformátovat, aniž byste museli psát vlastní mediální dotazy
2. Náhled zařízení v nástroji pro tvorbu — před publikováním byste měli mít možnost zobrazit zobrazení na počítači, tabletu a mobilním zařízení
3. Typy polí s dotykovým ovládáním — podpisové podložky, nahrávání souborů a rozbalovací nabídky, které fungují se vstupem prstem
4. Klávesnice vhodné pro mobilní zařízení — pole pro e-mail, telefon a URL by měla aktivovat správnou mobilní klávesnici
5. Záložní jednosloupcový formát — vícesloupcové a řádkové rozvržení by se na úzkých obrazovkách mělo skládat svisle
6. Styl nezávislý na tématu — formulář by měl vypadat správně bez ohledu na CSS vaší WordPress šablony
7. Inline validace s automatickým posouváním — chyby by se měly zobrazovat vedle pole a na mobilním zařízení by se měly posunout do zobrazení
8. Podpora vložených formulářů — pokud formuláře umístíte na externí weby, jejich velikost by se měla automaticky měnit na jakémkoli zařízení

Jak Auto Form Builder zvládá responzivitu na mobilních zařízeních

Auto Form Builder je navržen s ohledem na responzivitu na mobilních zařízeních jako klíčovou funkci – nikoli jako dodatečnou. Zde je návod, jak zajistit, aby vaše formuláře fungovaly na všech zařízeních.

Náhled pro počítače, tablety a mobilní zařízení

Nástroj pro tvorbu formulářů i karta Přizpůsobit obsahují živý náhled na zařízení. Přepínejte mezi zobrazením na počítači , tabletu a mobilním zařízení a podívejte se, jak bude formulář přesně vypadat, ještě před publikováním. Změny stylu – barvy, písma, obrázky záhlaví, design tlačítek, pozadí – se aktualizují v reálném čase ve všech třech zobrazovacích oblastech.

Automatické přeformátování rozvržení

Formuláře Auto Form Builder používají responzivní CSS, které se automaticky přizpůsobuje:

• Dvousloupcové rozvržení sbalit do jednoho sloupce na obrazovkách o velikosti 768px a méně
• Skupiny zaškrtávacích políček a přepínačů ve stylu řádků vertikálně se na mobilním zařízení stohuje místo horizontálního přetékání
• Rozvržení možností ve stylu mřížky přepnout z vícesloupcového na jednosloupcový
• Kontejnery formulářů Používejte proměnlivé šířky se 100% maximální šířkou, aby nikdy nepřesáhly obrazovku

Nemusíte psát vlastní CSS ani instalovat samostatný responzivní doplněk.

Typy polí optimalizovaných pro dotykové ovládání

Každý typ pole v Auto Form Builderu je navržen pro dotykové zadávání:

• Pole pro podpis — návštěvníci podepisují prstem, stylusem nebo myší; podpisová podložka reaguje na dotykové události na telefonech a tabletech
• Nahrání souboru — oblasti pro nahrávání klepnutím, dimenzované pro mobilní interakci, spouštějící nativní výběr souborů v systémech iOS a Android
• Vlastní výběr data a času — rozbalovací výběry, které fungují konzistentně napříč prohlížeči a zařízeními a nahrazují nespolehlivé nativní vstupy
• Vyhledávatelné rozbalovací nabídky — dotykový výběr s inline ověřováním
• Telefonní pole — nakonfigurováno pro aktivaci numerické klávesnice na mobilních zařízeních

Inteligentní záhlaví a změna měřítka obrázků

Formuláře s obrázky záhlaví nebo bannery se automaticky přizpůsobí na malých obrazovkách. Na telefonech se obrázky záhlaví přepnou z režimu obálky do režimu obsahu, takže celý obrázek zůstane viditelný bez oříznutí stran – bude odpovídat nahranému obsahu, nikoli oříznutému fragmentu.

Inline validace s automatickým posouváním

Když návštěvník odešle neplatný formulář na mobilním zařízení, nástroj pro tvorbu formulářů:

• Zobrazuje chybovou zprávu přímo pod neplatným polem
• Vizuálně označuje hřiště, takže je snadno rozpoznatelné
• Automaticky se posune na první neplatné pole a zaostří
• Odstraní chyby, jakmile je návštěvník opraví – žádné opětovné načtení stránky, žádná ztráta dat

Díky tomu se zabrání běžné frustraci na mobilních zařízeních, kdy se při odesílání formuláře zobrazí obecná chyba nahoře a uživatel neví, které pole má opravit.

Styl nezávislý na tématu

Formuláře v Auto Form Builderu mají vlastní CSS s omezeným rozsahem. Jejich rozvržení ani vzhled nejsou závislé na vašem motivu WordPressu. To je důležité na mobilních zařízeních, protože mnoho motivů používá agresivní resetování CSS nebo minimální styling, který narušuje rozvržení formulářů – zejména u motivů jako Hello Elementor. Formuláře v Auto Form Builderu se zobrazují správně bez ohledu na použitý motiv, nástroj pro tvorbu stránek nebo styly hostitelského webu.

Renderování s ohledem na výřez

Vestavěný správce zobrazovacích oblastí detekuje velikost obrazovky, orientaci a typ zařízení za běhu. Aplikuje správné responzivní třídy a vlastní vlastnosti CSS, takže se formuláře přizpůsobí otočení telefonu, změně velikosti prohlížeče nebo zobrazení formuláře na tabletu v režimu na výšku.

Vkládání formulářů, které lze měnit na jakémkoli zařízení

Formuláře vložené na externích webových stránkách – webech jiných výrobců než WordPress, vstupních stránkách, klientských portálech – se automaticky mění velikost tak, aby se vešly do jejich kontejneru, bez nutnosti vnitřního posuvníku. Vložený formulář si zachovává design, který jste vytvořili, a přizpůsobuje se jakékoli obrazovce, na které se hostitelská stránka zobrazuje. Responzivita na mobilních zařízeních se přenáší s vloženým kódem.

Ovládací prvek rozvržení pole názvu

Pole Jméno podporuje překrývající se rozvržení jména a příjmení nebo rozvržení vedle sebe . Překrývající se rozvržení zvolte pro formuláře s prioritou pro mobilní zařízení, kde je prioritou jednosloupcový formát, nebo vedle sebe pro uživatele s převahou počítačů – responzivní CSS zvládne přeformátování v obou směrech.

Nejlepší postupy pro mobilní formuláře WordPressu

I s responzivním pluginem pro formuláře má způsob, jakým formuláře navrhujete, vliv na míru dokončení na mobilních zařízeních. Dodržujte tyto postupy:

1. Formuláře na mobilních zařízeních udržujte krátké. Každé další pole zvyšuje míru opuštění. Ptejte se pouze na to, co potřebujete – použijte podmíněnou logiku k zobrazení dalších polí pouze v případě, že jsou relevantní.
2. Používejte rozvržení s jedním sloupcem. Nevynucujte dvousloupcové návrhy, pokud formulář není primárně určen pro zobrazení na počítači. Automatický tvůrce formulářů automaticky skládá sloupce, ale začít s jedním sloupcem je přehlednější.
3. Na mobilu zobrazte tlačítko pro odeslání na celou šířku. Široké, jasně označené tlačítko se snáze klepe a je na úzké obrazovce vizuálně výraznější.
4. Zvolte Cloudflare Turnstile před obrázkem CAPTCHA. Turniket je dotykový a pro většinu skutečných návštěvníků neviditelný – mnohem lepší na mobilních zařízeních než klikání na semafory v malé mřížce.
5. Vyzkoušejte na skutečném telefonu. Režimy náhledu jsou nezbytné, ale nic nenahradí testování na skutečném iPhonu nebo zařízení Android před spuštěním.
6. Umístěte štítky nad pole. Popisky zarovnané nahoru se na úzkých obrazovkách čitelnější než popisky zarovnané vlevo vedle polí.
7. Použijte jasný zástupný text a text nápovědy. Mobilní uživatelé text prolétávají zběžně. Krátké, přímočaré popisky polí a pomocný text snižují zmatek a chyby.
8. Povolit potvrzovací e-maily uživatelů. Návštěvníci mobilních zařízení se při přepnutí aplikace nemusí na obrazovce zobrazit zpráva o úspěšném odeslání. Potvrzovací e-mail je ujistí, že odeslání proběhlo úspěšně.
9. Vyhněte se povinnému nahrávání souborů u formulářů určených primárně pro mobilní zařízení. Pokud je nahrávání nutné, nastavte velkou cílovou plochu pro klepnutí a otestujte ji na iOS i Androidu.
10. Použijte podmíněnou logiku ke zkrácení zážitku. Zobrazit pouze pole relevantní pro odpovědi každého návštěvníka – méně viditelných polí znamená rychlejší vyplňování na mobilních zařízeních.

Jak otestovat formuláře na mobilu

Před zveřejněním jakéhokoli formuláře si projděte tento kontrolní seznam:

Krok 1: Použití vestavěného náhledu zařízení

V nástroji Auto Form Builder otevřete formulář a v nástroji Auto Form Builder nebo na kartě Customize přepněte náhled na mobilní zobrazení . Zkontrolujte, zda se všechna pole správně skládají, zda je tlačítko pro odeslání viditelné bez posouvání a zda se obrázky záhlaví zobrazují plně.

Krok 2: Testování na reálném zařízení

Otevřete stránku s formulářem na iPhonu a telefonu s Androidem. Vyplňte všechna pole, záměrně spusťte chyby ověření, nahrajte soubor a odešlete jej. Ověřte, zda funguje zpráva o úspěchu nebo přesměrování.

Krok 3: Testování na výšku a na šířku

Otočte zařízení a ověřte, zda se formulář přeformátuje bez přerušení. Správce zobrazovacích polí nástroje Auto Form Builder zvládá změny orientace, ale rychlá ruční kontrola odhalí okrajové případy.

Krok 4: Testování vložených formulářů

Pokud používáte kód pro vložení na externím webu, otevřete danou stránku na mobilním zařízení a ověřte, zda se velikost formuláře přizpůsobila a zda všechna pole zůstanou použitelná.

Krok 5: Zkontrolujte rychlost načítání stránky

Pomalu se načítající formuláře v mobilních sítích ztrácejí návštěvníky ještě dříve, než se jim zobrazí první pole. Udržujte stránku formuláře štíhlou a otestujte dobu načítání na omezeném mobilním připojení pomocí nástroje Google PageSpeed ​​Insights nebo nástrojů pro omezení síťového připojení ve vašem prohlížeči.

Často kladené dotazy

Vytvořte formuláře responzivní pro mobilní zařízení ještě dnes

Vaši návštěvníci jsou na svých telefonech. Vaše formuláře by měly být také. Auto Form Builder vám nabízí responzivní rozvržení, pole optimalizovaná pro dotykové ovládání, náhled na zařízení, validaci v textu a vložené kódy, které fungují na všech obrazovkách – to vše zdarma.

Nainstalujte si Auto Form Builder z WordPress.org a použijte mobilní náhled k zobrazení vašeho prvního formuláře na jakémkoli zařízení. Nebo si hned teď vyzkoušejte živou ukázku na svém telefonu.