Anmälningsformulär finns i många olika former och storlekar. Vissa är ett enda fält, andra är en process med flera steg som sträcker sig över flera skärmar.
Idag tar vi en titt på 20 attraktiva och funktionella formulär för att se om vi kan hitta några användbara idéer som du kan ansöka nästa gång du bygger ett registreringsformulär.
300 pixlar
Flera av de exempel vi ska titta på idag kommer från betaversättningsformulär som den här. Vanligtvis tillhandahåller dessa sidor bara en teaser-grafik och lite eller ingen information om vad webbplatsen faktiskt kommer att bli.
Jag gillar verkligen 3D-knappen och hur den animerar när du klickar på den. Det här är gjort med bilder och Javascript men stilen påminner mig om BonBon Buttons, ett gratis nedladdningsbart CSS3-experiment.
En annan cool sak om den här sidan är att det gör stor nytta av bildsprites. Kolla in källan för att se originalbilden.
TestFlight
Den smidiga och enkla stilen på den här är bara vacker. Jag gillar extra vaddering på varje rad och hur mycket det valda formulärfältet sticker ut från de andra.
Detta är faktiskt en viktig användbarhetsaspekt. Former kan vara smärta för användarna och lägga till lite detaljer som en uppenbar aktuell fältmarkering kan verkligen hjälpa dem att gå igenom processen.
förtjänst
Jag älskar hur den här typen bara flyter i havet. Det finns också mycket riktigt snygg och subtil stilering här. Kolla in den inre skuggan på fälten och hur fältgränserna är mörkare längst upp till vänster än de är längst ner till höger. Det finns också några riktigt bra feedbackfunktioner inbyggda i denna form, vilken betydelse vi kommer att diskutera i ett senare exempel.
CertTime
Modala fönster är alltid coola. De överlägger nuvarande innehåll istället för att ta dig till en annan sida. På något sätt är det bara mindre oroande än att viskas bort till någonstans nytt, vilket känns som ett avbrott.
Genom att dämpa hemsidan grafik och ta fram ett modaltecken registreringsformulär, får du den känslan att processen kommer att bli snabb och smärtfri och att du kommer att återvända till surfar på nolltid.
Idélistorna
Den här är mycket längre än de tidigare formulären och har flera fält att fylla i. Innehållet separeras emellertid i tre hanterbara bitar, vilket hjälper det inte att känna sig som en stor form.
Jag gillar också hur designen verkar känna sig som en tryckt form, du kan enkelt se dig själv skriva i svaren!
Remskiva
Jag har inte för mycket att säga om den här än att jag gillar hur sidan ser ut. Den lilla inmatningsrutan i den inlämnade adressen är en fin touch. Det här fältet kontrollerar automatiskt ditt användarnamn för att se om det redan är taget.
ACosmin.com
Användningen av mönster och textur på denna sida är fantastisk. Att räkna rektanglarna på e-postformuläret är roligt, det finns fältet själv och en gräns på fältet, som omges av ett prickmönster som är omgivet av viss vit padding, då finns det en annan mörkare gräns på den och äntligen en stor låda att hålla allt.
Beskriv det, du skulle tro att resultatet skulle vara upptagen och ful men det kom vår underbara.
Bloom Health
Här gillade jag den vänliga meddelandet på formulärtexten:? Låt oss hålla kontakten.? Alltför ofta skjuter vi rakt på något slätt och tråkigt när några minuters överväganden kan leda oss till ett mycket mer intressant alternativ.
Avanti
Avanti-formuläret handlar om den stora knappen. Det förstorade storleken och djärva färgvalet gör din uppmärksamhet riktigt mot den där du ser ett fint enkelt uttalande som inte är ett riktigt tillvägagångssätt, men anger i stället vad knappen kommer från användarens perspektiv,? Logga in mig? Detta ger ingen tvekan om vad som händer när knappen trycks ned.
Audio Logic
Audio Logic valde att ha en goofy illustrerad karaktär hålla upp sin anmälningsblankett. Det ger en hel del karaktär åt sidan och får dig att le när du ser det; en teknik som är värt att utforska med dina egna karaktärsillustrationer!
Kulinarisk kultur
Jag älskar den visuella förstärkningen som denna webbplats använde för formulärfälten. Dessa typ av enkla ikoner finns i någon av hundra gratis ikonuppsättningar online och lägger mycket till formuläret, du kan nästan fylla i det utan att ens läsa texten!
Vi ser denna typ av ikon-använd ganska ofta i navigering och det är ganska uppfriskande att se någon dra över den till en blankett.
Gowalla
Gowalla-formuläret har ett intressant budskap att undervisa: Enkelt är bra. Här är en webbplats med fantastiskt, ur lådans design, annonsering av en app som är samma sätt, men de valde inte att göra någonting snyggt eller förvirrande på sin anmälningsblankett.
I stället är det bara en vanlig vit låda med fina stora fält. Lägg märke till hur de fastnade de två första fälten på samma linje, men behöll den tätt motiverade anpassningen. Det här är en trevlig platsbesparande teknik som inte bryter din layout.
Buffel
Ibland kan en enorm form vara oerhört avskräckande. Du ser alla dessa fält att fylla och din första instinkt är bara att stänga webbläsarfönstret och få dem att gå iväg.
Som webbplatsen nedan visar kan det ibland hjälpa till att bryta dessa fält upp i flera steg. Du ser bara en liten bit i taget så att du inte blir avskräckt och kan hålla koll på dina framsteg via brödsmulorna högst upp.
Kontain
Här är vad jag hatar: fylla i tjugo blanketter och slå in endast för att upptäcka att jag gjort ett fel någonstans. Då måste jag söka på sidan för småstjärnor som visar var jag gick fel. Det är inte bara jag heller, alla i världen hatar detta! Oavsett om du har tre fält eller femtio, kommer du att göra användarupplevelsen oändligt bättre genom att ge live, intelligent återkoppling per fältbasis.
Vi ser detta i åtgärd på Kontain-formuläret nedan.Jag skrev in ett lösenord som bara var tre bokstäver långt och ett stort tecken öppnade för att berätta att jag gjorde något fel, detsamma händer om du skriver in ett icke-giltigt e-postmeddelande. Nyckeln här är inte bara att ge feedback, utan tydligt synlig och lättförståelig feedback som användaren kan fixa innan du trycker på Submit-knappen.
Zzz
Gowalla har en rolig plats och en tråkig anmälningsblankett, som har sina fördelar. Det finns emellertid ingen obrukbar regel att du inte kan ha lite kul med dina formulär också.
Kolla in formuläret nedan, inte bara grafiken är galen men formfälten själva roteras något för att öka off-kilter looken. Detta skulle definitivt inte vara lämpligt i många professionella situationer, men på en webbplats fylld med flygande får reklam en drink som gör dig sömnig, det fungerar perfekt.
Vimeo
Folket på Vimeo bestämde sig för att ägna en stor sida till en liten form. De fastnade den högst upp till höger och fyllde resten av sidan med en illustrerad ö och några animerade flytande moln.
Liksom det föregående exemplet är det definitivt inte lämpligt för alla situationer men det fungerar bra här och är en ganska rolig implementering av en annars tråkig form.
Tea Round
Den här representerar en intressant bit ut ur lådans tänkande. The? Sign me up? knappen till höger har sträckts vertikalt för att matcha höjden på de två fälten.
Vi är inte vana vid att trycka fyrkantiga knappar på webben, så du måste vara försiktig med att implementera något så här, men jag gillar vad de har gjort här.
13 Creative
När du har en mycket stilad webbplats som följer ett tydligt visuellt tema kan du kasta upp hela temaets integritet genom att kasta in ett formulär med standard styling.
I stället måste du hitta en balans mellan att göra ditt formulärområde skenbart och att matcha det övergripande temat på webbplatsen. Jag tycker att 13 Creative-formuläret nedan är ett perfekt exempel på denna teknik i aktion.
Obama
Obamas blankett använder samma teknik som Avanti-exemplet ovan. Lägg märke till hur mycket den röda knappen står ut på den annars väldigt blå sidan. Den här gången är knapptexten ett tydligt anrop till handling,? Läs mer.? Oavsett om du älskar eller hatar sin politik, är det definitivt fallet att Obama har haft det bästa visuella varumärket av någon amerikansk president hittills, en trend som jag misstänker har satt en standard som kommer att fortsätta för framtida innehavare av positionen.
Få Brewin
Det här sista exemplet har både fördelar och nackdelar. Totalt sett är sidan super attraktiv. Det känns emellertid som mycket innehåll för en mittlinje, vilket är ganska svagt för allt mer än några rader.
Lektionen här är att ibland är de enklaste projekten det svåraste att designa. När det finns massor av innehåll har du mycket att arbeta med och kan bygga starka, tydliga anpassningar. Med lite innehåll men det kommer inte att komma nära att fylla på sidan, måste du ofta kämpa ett tag innan du landar på den idealiska lösningen.
Visa oss ditt!
Var och en av de tjugo anmälningsformulären ovan kan lära dig något om hur du effektivt kan bygga din egen. Lämna en kommentar nedan med en länk till några former som du har byggt. Vilka tekniker använde du för att stärka formuläret både visuellt och funktionellt?