Přihlašovací / Registrační formulář nápady a krásné příklady

V celém moderním webu vidíme rostoucí počet míst pro vstup uživatelů. Patří mezi ně nákupní vozíky, interaktivní webové hry a jistě registrační formuláře webových stránek. Zdá se, že nejen designéři by se měli zaměřit na návrh stránek, ale stejně tak významnou roli hrají také estetika.

Zvažte, kolik formulářů jste během své internetové historie vyplnili. Existuje mnoho příkladů z fór, zpráv, blogů a mnoho dalších. V tomto článku se podíváme na několik skvělých triků pro navrhování vašich formulářů na stránce.

Je moudré zvážit některé věci z objektivního hlediska. Ačkoli mnoho přihlašovacích a registračních formulářů funguje s jedním typem stránek dobře, neexistuje žádný konečný rozsudek o tom, co je to “nejlepší” řešení. Použijte svůj návrh intuici použít bity a kousky z formulářů, které usilujete směrem.

Zvažte více vstupů

Chcete-li začít věci mimo zvážit malý kontaktní formulář z nadace Six Web Design. Ano, toto není přihlašovací formulář, takže může být trochu mimo téma. Nicméně, jejich design stránky je velmi působivý a ukazuje vám, co může trochu kreativity dosáhnout.

Každé ze vstupních polí vám nabízí prostor pro zadání osobních kontaktních informací - jméno, e-mail, atd. Styly jdou daleko za hranice běžných, nabízí uživateli vstup do typu ručně psané kaligrafie. Tento typ formátování udrží vaše uživatele ve stavu zázraků a dosáhne cíle mnohem vyšších standardů designu.

Budete chtít implementovat podobné styly jako všechny vaše přihlašovací stránky. Rozhodně bych nedoporučoval lepení se stejným stylem vstupního textu a možností / výběru nabídek. Při běhání mozku pro kreativitu zvažte, jak by měl být každý prvek vyložen: dostatek místa mezi vrstvami, velký snadno čitelný text a dokonce i postranní odkazy na jejich přímou e-mailovou linku.

jQuery Pole pro přihlášení

To bylo v minulosti používáno na nespočetných webových stránkách a jistě bude vidět i v nových designech. Dlouho pryč jsou dny, kdy by standardní postupy přivedly uživatele na novou stránku pro každý krok procesu přihlášení. Za normálních okolností by to znamenalo stránku, do které budou vložena vaše data a také nová stránka pro zpracování přihlašovacích údajů.

Pixel2Life nabízí fantastický pohled na nové pole vstupu dat. Z jejich domovské stránky můžete kliknout na odkaz přihlášení a vyvolat dynamické přihlašovací pole poháněné jQuery. Tento formulář obsahuje volání Ajax do externího skriptu PHP, který kontroluje pověření vašich přihlašovacích údajů a po zpracování buď uděluje nebo odepírá přístup.

Chystáte-li se o další krok dál, můžete si všimnout registračního odkazu přímo pod přihlašovacím oknem. To nabízí mnohem hladší uživatelský zážitek pro ty, kteří se chtějí zaregistrovat na webové stránky, ale nemohou najít registrační odkaz.

Pokud uživatel nemá účet, ale chtěl by ho vytvořit, přivede je na registrační stránku bez závad na stránce. Přihlašovací pole by stále bylo životaschopnou volbou pro přístup k vlastnímu účtu, avšak umožnění této možnosti umožní větší návratnost a vyšší objemy nových žadatelů o registraci..

Jednoduché registrace na jednu stránku

Dalším posunujícím se paradigmatem, který vidíme, je nedostatek takových detailů pro nové registrace účtů. To není nutně špatná statistika za předpokladu, že uživatelé rostou netrpělivě k vyplňování údajů. Čísla skutečně navrhují webové stránky s kratší registrační stránky sbírat těžší seznamy nových uživatelů denně.

Sikbox nabízí návštěvníkům lehkou možnost vytvořit si vlastní vyhledávací pole pro webové stránky. Jediným požadavkem je vlastní doména, která poskytuje výsledky vyhledávání. Vstupní pole jsou velká, text je velmi snadno čitelný a existují absolutně žádné reklamy rozptýlit uživatele od úkolu vytvořit svůj vyhledávací formulář!

Teď to není nejlepší forma, která se má vytvořit, když vytváříte vlastní registrační stránku pro fórum nebo blogový archiv. Ty budou podle standardního rozlišení vyžadovat alespoň určitý typ kombinace e-mailová adresa / uživatelské jméno spolu s heslem. Některé nové webové aplikace budou generovat dynamická hesla pro uživatele, aby byl proces registrace rychlejší.

Samozřejmě, tento kompromis zde chybí kontrola na konci uživatele a generuje si vlastní heslo, na které je mnoho lidí zvyklé.

Vybudovat efektní efekty

Jedním z největších zážitků z registrace, který jsem kdy měl, bylo vytvoření mého prvního účtu Tumblr. Domovská stránka jejich stránek nabízí přihlašovací a registrační formulář umístěný přímo pod sebou s novými efekty CSS3 zvýraznění / fade.

Tento systematický přístup je podobný pro oblast přihlášení jQuery Pixel2Life. Rozdíl oproti Tumblr je v tom, že síť nemůže nabídnout žádný obsah těm, kteří nemají blog (kromě prohlížení jiných účtů). Skutečným přínosem tumblr je vytváření vlastního blogu a sledování dalších - takže vaším hlavním cílem na titulní stránce je vytvořit účet nebo se přihlásit.

Tam jsou některé chyby s tímto systémem. Nejvíce pozoruhodně uvnitř IE6 / IE7 nepodporuje tyto nové CSS vlastnosti. Na domovské stránce se také používá systém pro přidávání prvků štítku do vstupních hodnot formuláře - v zásadě potlačení “výchozí” znaky používané pro schránky s e-mailem / heslem.

Tyto štítky se odráží v moderních prohlížečích, jako je Chrome / Firefox. Ale žádné takové štěstí se zastaralými prohlížeči, které, jak si dokážete představit, je docela otravné a snaží se znovu přečíst svůj vlastní vstup!

20+ Příklady krásného designu formuláře

Níže je uvedena rychlá galerie některých fantastických návrhových formulářů. Ty byly vybrány z celého webu a zahrnují četné formy webových aplikací. Pokud máte návrhy pro jiné stránky, neváhejte je sdílet v sekci Komentáře níže!

Snoggle News