10 fragmente de cod pentru a crea forme frumoase

Fiecare site web are de obicei nevoie de un anumit tip de formular, fie că este o pagină de plată sau o simplă pagină de contact.

Este esențial să vă asigurați că formularele dvs. funcționează, astfel încât gradul de utilizare este numărul 1. Dar estetica este, de asemenea, importantă, deoarece modelele de încredere sunt întotdeauna mai captivante.

Dacă sunteți blocat pentru idei de design, această colecție ar putea ajuta. Este o colecție de 10 modele de formulare cu cod sursă gratuit. Veți găsi multe scheme de culori diferite, stiluri de câmpuri de intrare, stiluri tipografice și multe altele.

În plus, toate acestea sunt găzduite gratuit, astfel încât să puteți copia și juca arouns cu codul după bunul plac.

1. Design material

Toată lumea știe despre limbajul de design al materialelor Google despre ascensiunea sa la faimă în ultimii câțiva ani. Conceptele de design material au fost orientate către aplicațiile Android, dar s-au răspândit rapid pe web.

Dacă vă place stilul minimalist al interfeței de utilizare a materialelor Google, consultați acest formular de material creat de Jon Uhlmann.

Se rulează pe Sass și Pug pentru preprocesare CSS/HTML. Este, de asemenea, o formă destul de ușoară, iar elementele de design ale materialelor ar trebui să fie la fel în toate browserele.

Cu adevărat o inspirație pentru toți designerii de materiale de acolo.

2. Sub mare

Faceți o excursie în ocean cu acest formular de contact unic, construit cu un stil acvatic.

Întregul fundal al paginii folosește un model care se repetă pentru a crea valurile apei oceanului. Dar micuții pești animați sunt o cu totul altă poveste care se afișează dintr-o imagine de fundal.

În plus, ori de câte ori selectați un câmp de introducere, o caracatiță prietenoasă apare pentru o salutare. Ce ciudat!

3. Formular Bootstrap 3

Stilurile Bootstrap implicite sunt destul de plictisitoare și chiar au fost obișnuite până la moarte în acest moment. Ori de câte ori văd un site Bootstrap cu aceleași stiluri generice, îmi pot imagina doar că designerul a fost prea leneș pentru a personaliza sau prea concentrat pe experiență pentru a-i păsa.

Acest formular BS3 face lucrurile corect, construind deasupra cadrului Bootstrap. Folosește câteva restilări ale câmpurilor de introducere și butonul de trimitere pentru a crea un formular Bootstrap adorabil, despre care nu ai ști niciodată că este Bootstrap.

Dacă rulați un aspect BS3, vă gândiți cu siguranță să vă reluați formularele astfel. De asemenea, puteți încerca să utilizați un cadru terță parte construit pe Bootstrap pentru un design mai personalizat.

4. Contact elegant

Cu pictograme Font Awesome și un stil de bază receptiv, acest formular de contact este cu adevărat unic.

Recomand întotdeauna adăugarea de pictograme în formulare, în special pentru modele mai mari. Cu mai multe câmpuri, aveți mai multă ezitare, iar utilizatorii vor doar să zboare prin formulare fără probleme.

Aceste pictograme simple adaugă un indiciu la fiecare câmp, astfel încât este ușor să spuneți dintr-o privire ce fel de informații sunt necesare.

Și dacă căutați ceva unic, încercați să adăugați un alt font de pictogramă în amestec.

5. Autentificare minuscul

Uneori lucrurile mici sunt cu adevărat cele mai bune lucruri. Și această interfață de utilizare a formularului o dovedește prin crearea unui formular de conectare super minificat, care este foarte impresionant.

Tipografia este uriașă cu designul formularelor și prefer adesea fonturi mai mici pe câmpurile de conectare. Depinde cu adevărat de site-ul web și de cât de bine se îmbină textul mai mic în aspect.

Dar acest formular are, de asemenea, un mic grafic al pasului de progres atârnat pe partea laterală, care explică procesul formularului. Desigur, cu doar două câmpuri, acest lucru pare o prostie, dar pentru formularele de înregistrare mai mari, această bară de progres se va dovedi neprețuită pentru experiența utilizatorului.

6. Combinație de autentificare și înscriere

Dacă doriți să reduceți timpul de conectare, puteți încerca să combinați formularul de conectare și formularul de înregistrare împreună pe o singură pagină. Este mult mai ușor decât ați putea crede și puteți vedea o demonstrație dulce în acest pe .

De fiecare dată când faceți clic pe linkurile de conectare/înregistrare din lateral, veți găsi o animație personalizată frumoasă care rotește formularele în vizualizare. Totul este alimentat prin jQuery, dar animațiile ar putea funcționa și prin CSS.

Dar observ o eroare în acest aspect în care partea de jos a formularului „ascuns” este încă vizibilă după comutare. Puteți rezolva acest lucru cu proprietatea de vizibilitate CSS sau mutând poziția puțin mai mult în afara limitelor.

7. Contact pe tablă

Iată un stil de formă cu adevărat unic, care cu siguranță sare de pe pagină. Acest formular de contact cu tablă folosește un gradient de fundal pentru a crea efectul luminii care sări de pe tablă.

În plus, chenarul de lemn ajută la vânzarea asta ca o afacere reală.

Creatorul Greg Sweet folosește chiar și un font web personalizat care arată exact ca scrisul uman tipic. Acesta este perfect pentru a adăuga acea atingere finală pe formular, astfel încât să simți cu adevărat că te-ai întors la școală.

8. Încheierea cardului de credit

Am văzut o mulțime de formulare de casă, dar acest design de Fabio Ottaviani este poate cel mai bun pe care l-am dat vreodată.

Folosește JavaScript pentru a gestiona validarea câmpului de intrare, dar cardul de credit este tot CSS. Se anime pe baza numerelor pe care le introduceți în formular și chiar se rotește în spate atunci când introduceți numărul CVV al cărții de credit.

9. Înregistrare personalizată

Pentru un formular de înscriere CSS pur, acest fragment ia cu adevărat biscuitul. Se simte destul de simplu să te odihnești într-un singur recipient cu o mică umbră.

Dar câmpurile de intrare sunt puternic personalizate, inclusiv spațiul necesar pentru a adăuga acele pictograme la fiecare.

Ori de câte ori evidențiați un câmp, chenarul devine un verde mușchi. Veți observa că și pictograma își schimbă culorile! Chiar și meniurile selectate pentru cardurile de credit au propriile lor stiluri personalizate.

Acesta este un efect destul de complex de realizat doar în CSS, dar dezvoltatorul Jose Carneiro a făcut-o să se întâmple.

10. Etichete plutitoare

Etichetele plutitoare personalizate sunt unele dintre tendințele mele preferate în designul formelor. Întotdeauna ajută la îmbunătățirea gradului de utilizare și oferă o explicație clară a domeniului chiar și după ce l-ați completat.

Aruncă o privire la acest formular de etichetă plutitor care rulează pe CSS3 și Compass.

Creatorul Anton Simanov folosește jQuery pentru etichete, dar totul este codat personalizat fără niciun plugin. Ca să nu mai vorbim de soluția sa funcționează pentru toate stilurile tipice de introducere, inclusiv zonele de text și meniurile de selectare.

Indiferent de stilul de formă pe care îl alegeți, sper cu siguranță că această galerie vă poate oferi câteva idei și fragmente pentru a merge mai departe.

Cu cât studiezi mai mult modelele de design, cu atât va trebui să construiești mai multe idei pentru propriile proiecte. Și CodePen este un site grozav pentru a aduna aceste idei.