MENU
SVG Modal background Created with Snap
Close
Napište nám

Hidden input pole v Google formulářích

Google formuláře oficiálně nepodporují hidden input pole, ale jsou situace, kdy by se samozřejmě hodily.

Vo co jde? Proč by mě to mělo vůbec zajímat?

Vyřešit tento problém je vcelku rychlé a funguje správně i pro vícekrokové formuláře. Proč ale vlastně použít hidden pole? Například chcete dynamicky do hidden input polí vkládat nějaké hodnoty, které chcete později použít.

Co budete potřebovat pro to, abyste mohli použít input pole?

  • Google formulář

  • Webovou stránku, ve které si můžete upravovat HTML kód.

  • Znalost HTML

  • Znalost některého programovacího jazyka, ve kterém píšete webové aplikace (PHP, Ruby, JavaScript…)

  • Případně schopného kamaráda, který to za tabulku čokolády pro vás udělá  :)

Vzorový příklad použití, trocha motivace

Jeden náš klient posílal každý rok v e-mailingu odkaz na Google formulář, ve kterém měl dotazník. Na konci dotazníku bylo políčko na vyplnění jména a emailu. Klient totiž pochopitelně chtěl vědět, kdo daný formulář vyplnil. No samozřejmě se stávalo zcela běžně, že se v těchto polích objevovaly nesmyslné hodnoty, lidi tam vyplní kdeco. Rozhodli jsme se tedy najít řešení. Výsledkem bádání je to, že uživatel vůbec nějaké jméno nebo email nevyplňuje a my přesto víme, kdo daný formulář vyplnil. Jak?

Uživateli přijde email, ve kterém je odkaz na dotazník. Jenže tento odkaz nevede přímo na Google formuláře, ale na stránku námi vytvořenou, ve které je vložen HTML kód prvního kroku formuláře. A jelikož je tento HTML kód pod naší kontrolou, tak viditelná input pole jsme skryli a ještě jim pomocí PHP nastavujeme hodnoty, které potřebujeme. Proto ta potřeba znalosti nějakého programovacího jazyka.

Takže to vypdá nějak takhle:

1. Uživatel klikne v emailu na odkaz na formulář a ten vede na (pouze vzorová URL) http://testujeme.com/google-form/…. Tohle je první změna – odkaz nevede přímo na Google formuláře, ale někam k nám.

2. Uživateli se na zmíněné adrese zobrazí první krok Google formuláře. Tento formulář jsme si již předem připravili a pole pro email jsme skryli. Celkový popis implementace je uveden níže.

3. Jelikož je to náš web (a zrovna náhodou je to stránka, kterou zobrazuje třeba náš Mailer), tak si v databázi zjistíme email uživatele s ID 57439. ID jsme si vytáhli z URL. Tento email vložíme jako value do hidden input pole. To je nejdůležitější krok a vlastně důvod, proč to celé děláme. Sami si tam vyplníme hodnotu, kterou chceme a uživatel o tom vůbec nemusí vědět.

4. Když uživatel ve formuláři vyplní pole v prvním kroce a klikne na další krok, tak ani nepozná, že byl mezitím přesměrován z domény testujeme.com (kde je první krok formuláře) na doménu Googlu, ve které se již zpracují další kroky formuláře. Technicky není možné udělat všechny kroky formuláře na vaší doméně, jde to pouze s prvním krokem. A pokud váš formulář bude mít pouze jeden krok, i tak bude po potvrzení formuláře uživatel přesměrován na Google, kde se formulář zpracuje, uloží a uživateli se zobrazí nějaká hláška o tom, že hrozně moc děkujeme za vyplnění formuláře.

To chci! Jak to udělám?! Jak, jak, jak?

1. Nejprve si vytvořte Google formulář podle vašich představ. Nejsou tam žádné speciální požadavky.

2. Pole, která chcete mít později skrytá, vytvořte do formuláře také. Ale pozor! Pokud má formulář více kroků, tak pole, která chcete skrýt, vytvářejte vždy a pouze do prvního kroku formuláře. Pokud budou pole pro skrytí v dalších krocích, nebude již možnost s nimi jakkoli pracovat. Důvod? Jak jste si asi všimli v textu dříve, další kroky formuláře jsou již v režii Googlu a nejsou zobrazovány na naší doméně.

Pro ukázku, jak vypadá formulář v editačním módu:

3. Nyní přijde již na řadu řešení skrytého pole. Klikněte v menu na tlačítko Zobrazit → Aktuální formulář.

4. Zobrazí se vám formulář tak, jak ho uvidí uživatelé. V tomto kroce si zobrazte zdrojový kód tohoto formuláře. Zkopírujte si kompletní zdrojový kód.

5. Tento zdrojový kód si vložte do nějaké vlastní stránky na vašem webu. Na tuto stránku budete odkazovat z emailu, který dorazí uživatelům.

6. Nyní musíte v kódu najít ta input pole, která chcete skrýt. Buď si věříte a najdete to v kódu hned nebo si pomůžete nějakým web inspektorem, který vám to v DOM pomůže najít, ať máte jistotu, že upravujete správné input pole. V následujícím obrázku vidíte naše pole pro email, které jsme vytvořili ve formuláři dříve. To chceme skrýt. Jak to provézt je v dalším kroku.

7. Co je tedy potřeba udělat? Změnit type inputu na hidden, ale to určitě víte. Tím se pole skryje. Nyní máte možnost toto pole něčím natvrdo vyplnit do atributu value nebo dynamicky generovat nějakou hodnotu do tohoto atributu. Náš případ ve firmě byl ten druhý. Z URL jsme načetli ID uživatele (jak bylo výše popsáno), v databázi si zjistili jeho email a tento email do value doplnili. Teprve potom se uživateli formulář zobrazí. A tím máme ptáčka v hrsti, budeme vědět, kdo tento formulář vyplnil!

To ještě ale není v případě skrývání bohužel vše. Musí se ještě skrýt label políčka a hlášku o tom, že je potřeba pole vyplnit. Následující obrázek ukazuje, co je potřeba udělat včetně skrývání input pole.

8. Jak vidíte na předchozím obrázku – pokud si nyní formulář zobrazíte, zjistíte, že vypadá docela rozsypaně. To je v pohodě, jen se musí spravit některé odkazy ve zdrojovém kódu :) Je tedy vhodné projít všechny href, src a url a spravit je. Jako příklad uvedeme jednu opravu.

Před opravou:

<link href=‚/static/forms/client/css/2009983922-formview_st_ltr.css‘ type=‚text/css‘ rel=‚stylesheet‘>

Vidíte ten href? Takhle to určitě nebude fungovat, to je relativní adresa a jelikož nejsme na doméně docs.google.com, tak se načte leda kulové. Spravit – přidat tam doménu!

Po opravě:

<link href=‚https://docs.google.com/static/forms/client/css/2009983922-formview_st_ltr.css‘ type=‚text/css‘ rel=‚stylesheet‘>

Takových oprav jsme museli provézt v kódu celkem asi šest. Jak zjistíte, že jste všechny opravy udělali správně? Otevřete si stránku v prohlížeči a koukněte do webového inspektora do konzole. Ta vám při načítání stránky řekne, které odkazy se nepodařilo načíst a je potřeba je ještě spravit.


Ještě tam máme něco rozbitý, musíme to spravit!

9. Poslední věc je editační tlačítko formuláře. Pokud jste postupovali podle návodu, tak nyní vám pravdě podobně v pravém horním rohu formuláře svítí tlačítko Upravit formulář. To musí jít pryč, ať tam někoho neprovokuje. V kódu tedy najděte HTML značku <a>, ve které je text “Upravit formulář”, případně v angličtině “Edit form”. Potom stačí celou značku <a> smazat a tlačítko na editaci formuláře zmizí. Nyní je formulář připraven k vyplňování hodnot uživateli.

10. A ve výsledku by měl formulář vypadat nějak takhle po smazání a skrytí položek.

Pár slov na konec

Můžete samozřejmě namítat, že URL může někdo změnit a například GET parametr userId smazat. V tom případě můžete buď zobrazit nějakou HTTP 404 nebo formulář zobrazit, ale hidden input pole nevyplňovat. Taky nemáte čím, že jo :) . Nebo můžeme hidden input pole v kódu odkrýt a doufat, že uživatelé tato pole vyplní správně a podle pravdy. Ale v kolika případech se může stát to, že uživateli změní URL?

A pokud si říkáte, že je toto řešení overkill, tak musíme namítnout, že záleží na situaci. Výše uvedený návod jsme byli schopni implementovat hodně rychle a rozhodně to bylo jednodušší a zajímavější, než předělávat dotazník klienta do jiné dotazníkové technologie nebo jej dělat celý od začátku. Dotazník měl přibližně 50 stran, je v něm docela hodně logiky (skrývání a odkrývání stránek) a obrovská spousta inputů, radií, selectů atd.

Někomu by se mohlo nelíbit, že na našem webu zobrazujeme první krok Google formuláře a přitom se vůbec nenachází na doméně Google. To znamená, že se tímto vydáváme za jinou autoritu, než jakou skutečně jsme. V takovém případě by bylo vhodné smazat veškerý obsah pod čarou na předchozím obrázku. To znamená logo Google formulářů a odkazy napravo od loga. Potom se již nevydáváme za jinou autoritu.