Dacă există ceva care este de obicei foarte comun pentru orice tip de site web, acestea sunt formularele. Formularele pe care le folosim pentru a completa informațiile de contact, introduceți datele bancare, conectați-vă la o rețea socială sau pur și simplu efectuați o căutare precum cea pe care o facem de obicei zilnic în motorul de căutare Google.
Așa că astăzi vă vom arăta 40 de formulare în CSS variind de la formulare de contact, checkout carduri de credit, conectări, simplu, abonament sau chiar validare. O serie de forme de mare eleganță și stil pentru a oferi acel punct special site-ului dvs. web, indiferent de temă.
Formular de contact minimalist
Un simplu formular de contact cu un mare varietate de efecte precum semnele plutitoare sau animațiile de linie. Cod CSS elegant, cu un pic de JavaScript. Dacă sunteți în căutarea unui formular de contact minimalist acest lucru este perfect pentru tine.
Formă minimalistă
Alte formă minimă, deși numai în CSS să fie un formă simplă și cu efect ridicat. Nu are animațiile minimaliste ale celei anterioare, dar își îndeplinește foarte bine obiectivul.
Formular de contact vintage
Formular de contact vintage, un design foarte elegant. Respectiv pentru aceste site-uri web pentru a fi văzut de pe mobil, deși nu include validarea.
Formular de contact scrisoare
acest formularul de contact Are o animație destul de curioasă: se formează o scrisoare. Simplu, dar foarte util cu multă culoare.
Formular de contact extins
acest formular de contact extins Este doar front end și are validare cu jQuery. Facem clic pe butonul plutitor și formularul va apărea cu o animație vibrantă. Remarcabil.
Formular de contact UI
Formular de contact UI este un formular realizat în HTML și CSS. Se remarcă prin faptul că este un simplu card de contact pe care îl putem completa astfel încât doar câmpul de text să se schimbe atunci când este făcut clic.
Plata cu cardul de plată
Un achitarea cardului de plată realizat în HTML, CSS și JavaScript care se distinge prin animație rotativă cardul de credit în momentul în care apăsăm pe câmpul CVC sau numărul de securitate.
Design plat pentru card de credit
CSS pur pentru un checkout pentru carduri de credit în culori plate. Colorat și foarte simplu, capabil să denotă calitate și profesionalism.
UI card de credit
Un alt card de credit în HTML, CSS și JavaScript care se remarcă prin cât de bun este a ales designul general. Am uitat de animațiile din această bucată de cod pentru site-ul dvs. web. Descărcați-l de la acest link.
Reacționează la checkout
Reacționează la checkout, realizat cu React.js, se distinge prin imaginea laterală pe care o putem personaliza cu serviciile sau produsele pe care le vindem în eCommerce-ul nostru.
Checkout card de plată
Această plată se remarcă prin posibilitatea de a pune o imagine pe card. A formă simplă și clară realizată cu CSS3, HTML5 și un pic de jQuery. De înaltă calitate și diferit de restul comenzilor din această listă. Poti descarca aici acest card de plată pentru checkout.
Plată cu cardul de credit
acest formular pentru plata cu cardul de credit este programat să practice cu JavaScript pentru manipularea DOM. S-ar putea să vă amintiți în design codul elegant al Stripe, serviciul bancar digital care se apropie de PayPal.
Card de credit
Un elegant checkout pentru plata cu cardul diferit de celelalte și bazat pe un card de credit situat în partea de sus Deci, mai jos avem întregul formular cu datele diferite pe care clientul trebuie să le completeze pentru a efectua plata în eCommerce.
Formular pas cu pas
Un formă pas cu pas pentru înregistrare făcută în HTML, CSS și JavaScript. Patru pași pentru fiecare dintre puncte situat pe partea stângă. Animații bine terminate pentru o formă foarte finisată. Foarte recomandat.
Formă interactivă
Un formă interactivă multi-pass realizat cu HTML, CSS și JavaScript. Se remarcă prin animația de tranziție între fiecare dintre pași. Are o notă elegantă care nu va trece neobservată.
Formular pas cu pas
acest formă pas cu pas se remarcă prin faptul că este destul de creativ. Veți răspunde la întrebări astfel încât să vă puteți întoarce la ele în orice moment, fiind prezent vizual pe ecran tot timpul.
Pas cu pas
Formular pas cu pas realizat în HTML, CSS și JavaScript. Se caracterizează prin animația de tranziție între fiecare dintre pași.
Formular Jquery în mai mulți pași
Dacă aveți un forma foarte lungă, acest lucru este perfect pentru diferite secțiuni cu o bară de progres foarte izbitoare. Bazat pe jQuery și CSS, se remarcă prin design și prin eleganța sa mare.
Formular de animație UI
Tranzițiile acestui lucru Formular de animație UI están bazat pe Domink Marskusic. Atenție la efectul creativ al casetei albastre atunci când facem clic pe unele dintre cele două câmpuri de conectare.
Formular de creare / autentificare cont
Un truc autentificare și crearea contului care se bazează pe animație ce se întâmplă între acele două secțiuni. Prezență foarte actuală și izbitoare de făcut în HTML, JavaScript și CSS.
Șarpe Highlight
Șarpe Highlight este una dintre cele mai izbitoare date de conectare din orice listă care se remarcă prin animația elegantă care apare rapid în momentul în care facem clic pe unul dintre cele două câmpuri.
Ecran de autentificare
Divin acest design ecran de autentificare la fel și ale lor animațiile și cât de creativ este. Dacă doriți să fiți cel mai actual în ceea ce privește designul web, acest formular nu poate lipsi. Indispensabil.
Conectare design UI
Proiectat folosind HTML, Sass și jQuery. Conectare design UI es elegant și clar pe subiectul căruia nu îi lipsesc animațiile subtile pentru a deveni un alt favorit de pe listă.
Conectare și creare cont UI
Un special interfață de utilizare pentru crearea contului și crearea contului pentru culori și pentru prezentare o carte mare cele două secțiuni. Una dintre cele mai frumoase din execuție pe care nu o putem rata. Realizat în HTML, CSS și JavaScript.
Erori neplăcute
Erori neplăcute Este o conectare excelentă datorită animației de câmpuri cu obnoxious.css. Original pentru a fi un login distractiv, fără griji și foarte diferit. Original fără îndoială pentru site-ul nostru.
Autentificare CSS HTML
Un login curios de diferite icoane care arată fiecare dintre câmpuri pentru a duce vizitatorul oriunde dorim. Se remarcă și nuanțele alese în culori. Nu are nicio animație. Este realizat în HTML și CSS pentru a-l implementa pe site-ul web pentru un client sau al nostru.
Formular de conectare modal
acest Formular de conectare modal este inspirat din limbajul design cunoscut pentru Material Design. Am văzut-o în multe aplicații de pe dispozitive mobile. În acest cod avem un panou de conectare și un panou de înregistrare care este ascuns în mod implicit. Panoul de înregistrare poate fi activat făcând clic pe coloana albastră din partea dreaptă. Are o animație excelentă pentru a fi o autentificare foarte specială și izbitoare.
Formați flexbox
Începem formularele de căutare cu aceasta formă bazat pe flexbox. Se remarcă prin culoarea roșie a „căutării” și pentru puțin mai mult pentru un câmp de căutare elegant pentru site-ul dvs. web.
Cutie animată
Cu acest cutie animată faceți clic pe pictograma lupă și va apărea o animație albastru strălucitor astfel încât nu trebuie decât să tastați căutarea pe care urmează să o efectuăm pe site. Realizat cu HTML, CSS și JavaScript.
Câmpul de căutare
o linia mare rulează pe ecran astfel încât atunci când o apăsăm să începem să tastăm căutarea. Un buton de preluare pentru a defini acest lucru formular simplu de căutare.
Faceți clic pe câmpul de căutare simplă
Faceți clic pe câmpul de căutare simplă se bazează pe o interacțiune văzută în aplicația comunitară Waze Driver vehicul. Toate pictogramele și imaginile sunt realizate cu CSS. Se remarcă prin acele pictograme care ne permit să efectuăm căutări specifice pentru un produs sau serviciu. Izbitor din cauza cât de tare este.
Efect de introducere a textului CSS
Efect de introducere a textului CSS include o serie de animații în sertar de text și căutare a fi un căutător atent în formă.
Căutare pe ecran complet
Această intrare de la căutare pe ecran complet funcționează cu orice tip de aspect sau poziție. Necesită stiluri element specific containerului și căutare-suprapunere să fie localizat în rădăcină. Se caracterizează printr-o animație care sări în momentul în care apăsăm butonul de căutare.
Căutați
Un formular de căutare simplu că îi place să se joace cu diferitele poziții și animații. Facem clic pe butonul de căutare și apare sertarul complet pentru a tasta cuvintele. Foarte actual și foarte recomandat pentru cât de simplu este.
Fără întrebări
Nicio intrebare es formular simplu cu câmp text și opțiunea de a selecta câteva răspunsuri pentru ca utilizatorul să le selecteze. Vizual pentru a fi unul dintre cei mai buni.
Formular de abonare pop-up
Cu acest formular de abonament popup, facem clic pe butonul plutitor și ne va duce la forma cu un ton foarte amuzant și un câmp unde să introduceți e-mailul. Perfect pentru marketing prin e-mail.
UI casetă de abonament
o caseta de abonament cu un clopot de alarmă și puțin mai mult decât culorile plate În design.
Caseta de abonament CSS
o caseta de abonament inteligent pentru faptul de folosiți gradienți pentru butonul de abonare la fel ca nuanța purpurie a câmpului.
Caseta de abonament
o casetă de abonament simplă dar de mare efect prin design.
Formular de validare EMOJI
În pur CSS aceasta formular de validare pentru a crea cheia sau parola. Pe măsură ce scriem, emoji-ul va măsura nivelul de securitate al formularului. Amuzant și curios, fără îndoială.
Nu ratați acest lucru lista celor 23 de săgeți animate din CSS.
Eșantion excelent de exemple prezentate aici. Varietatea și adaptarea la diferite contexte și cel mai bun lucru este că link-ul fiecărui titlu include demo-ul și codul sursă, deși ar trebui să-l evidențiați cu un buton «See demo», deoarece din curiozitate l-am descoperit în titlu. Vă mulțumim pentru contribuție. Salutări din Caracas.
M-a ajutat foarte mult, multumesc.