Hvis der er noget, der normalt er meget almindeligt for enhver form for websted, er det formularerne. De formularer, som vi bruger til at udfylde kontaktoplysningerne, indtast bankoplysninger, log ind på et socialt netværk eller udfør en søgning som den, vi normalt laver dagligt i Googles søgemaskine.
Så i dag skal vi vise dig det 40 formularer i CSS lige fra kontaktformularer, kreditkortcheck, logins, enkel, abonnement eller endda validering. En række former for stor elegance og stil, der giver det særlige punkt til dit websted, uanset tema.
Minimalistisk kontaktformular
En simpel kontaktformular med en stort udvalg af effekter såsom flydende mærker eller linjeanimationer. Elegant CSS-kode med lidt JavaScript. Hvis du leder efter en minimalistisk kontaktformular dette er perfekt til dig.
Minimalistisk form
Andet minimal form, dog kun i CSS at være en enkel og højeffektiv form. Det har ikke de minimalistiske animationer fra den foregående, men det klarer sig meget godt med sit mål.
Vintage kontaktformular
Vintage kontaktformular, et meget elegant design. Responsiv for disse websteder ses fra mobil, selvom det ikke inkluderer validering.
Kontaktformular for brev
dette kontakt formular det har en temmelig nysgerrig animation: der dannes et brev. Enkel, men meget nyttig med en masse farver.
Udvidet kontaktformular
dette udvidet kontaktformular Det er kun frontend og har validering med jQuery. Vi klikker på den flydende knap, og formularen vises med en levende animation. Fremragende.
Kontaktformular UI
Kontaktformular UI det er en form lavet i HTML og CSS. Det skiller sig ud for at være et simpelt kontaktkort at vi kan udfylde, så kun tekstfeltet ændres, når der klikkes på det.
Betalingskort
Un betalingskort checkout lavet i HTML, CSS og JavaScript som skelnes ved roterende animation kreditkortet, når vi trykker på feltet CVC eller sikkerhedsnummer.
Kreditkort fladt design
Ren CSS til en kassen til kreditkort i flade farver. Farverigt og meget simpelt, der kan betegne kvalitet og professionalisme.
Brugergrænseflade til kreditkort
Et andet kreditkort i HTML, CSS og JavaScript, der skiller sig ud for, hvor godt det er valgte det overordnede design. Vi har glemt animationer i dette stykke kode til dit websted. Download det på dette link.
Reager kassen
Reager kassen, lavet med React.js, er kendetegnet ved det sidebillede, vi kan tilpasse med de tjenester eller produkter, som vi sælger i vores e-handel.
Checkout betalingskort
Denne kasse skiller sig ud for muligheden for at sætte et billede på kortet. EN enkel og klar form lavet med CSS3, HTML5 og lidt jQuery. Høj kvalitet og forskellig fra resten af kasserne på denne liste. Du kan downloade her denne betalingskortkasse.
Kreditkortbetaling
dette kreditkortformular er programmeret til at øve med JavaScript til DOM-manipulation. Du kan huske i designet den elegante kode for Stripe, den digitale banktjeneste, der kommer tættere på PayPal.
Kreditkort
En elegant kassen for kortbetaling forskellig fra de andre og baseret på et kreditkort placeret øverst så nedenfor har vi hele formularen med de forskellige data, som klienten skal udfylde for at foretage betalingen i e-handel.
Trin for trin form
Un trin for trin form til registrering udført i HTML, CSS og JavaScript. Fire trin for hvert af punkterne placeret på venstre side. Godt færdige animationer til en meget færdig form. Højt anbefalet
Interaktiv form
Un interaktiv form flertrins lavet med HTML, CSS og JavaScript. Det skiller sig ud for overgangsanimationen mellem hvert trin. Det har et elegant touch, der ikke går ubemærket hen.
Trin for trin form
dette trin for trin form skiller sig ud for at være ret kreativ. Du besvarer spørgsmålene så du når som helst kan vende tilbage til dem ved at være visuelt til stede på skærmen hele tiden.
Trin for trin
Trin for trin form udført i HTML, CSS og JavaScript. Det er kendetegnet ved overgangsanimationen mellem hvert trin.
Flertrins Jquery form
Hvis du har en meget lang form, dette er perfekt til forskellige sektioner med en meget slående statuslinje. Baseret på jQuery og CSS skiller det sig ud for sit design og sin store elegance.
UI-animationsformular
Overgangene til dette UI-animationsformular están baseret på Domink Marskusic. Opmærksomhed på den kreative effekt af kassen i blåt, når vi klikker på nogle af de to felter i login eller login.
Konto oprettelse / login formular
En gimmick login og oprettelse af konto som er baseret på animation hvad der sker mellem disse to sektioner. Meget aktuel og slående tilstedeværelse skal udføres i HTML, JavaScript og CSS.
Slangens højdepunkt
Slangens højdepunkt er et af de mest slående login på enhver liste, der skiller sig ud for den elegante animation det dukker hurtigt op det øjeblik vi klikker på et af de to felter.
Login-skærmbillede
Guddommeligt dette design login-skærmbillede det er også deres animationer og hvor kreative det er. Hvis du vil være den mest aktuelle, når det kommer til webdesign, kan denne formular ikke mangle. Uundværlig.
Login UI design
Designet ved hjælp af HTML, Sass og jQuery. Login UI design es elegant og klar om emnet, der ikke mangler subtile animationer for at blive en af favoritterne på listen.
Login og UI-konto oprettelse
En speciel login design og oprettelse af brugergrænseflade til farverne og til præsentation i et stort kort de to sektioner. En anden af de smukkeste i udførelsen, som vi ikke kan gå glip af. Lavet i HTML, CSS og JavaScript.
Ubehagelige fejl
Ubehagelige fejl Det er et godt login på grund af animationen af felter med ubehagelig.css. Original til at være et sjovt, ubekymret og meget andet login. Original uden tvivl for vores hjemmeside.
Log ind CSS HTML
Et nysgerrig login ved de forskellige ikoner der viser hvert af felterne at tage den besøgende, hvor vi vil. De nuancer, der er valgt i farverne, skiller sig også ud. Det har ingen animation. Det er lavet i HTML og CSS for at implementere det på webstedet for en klient eller vores egen.
Modal login formular
dette Modal login formular er inspireret af sproget i design kendt for Material Design. Vi har set det i mange applikationer på mobile enheder. I denne kode har vi et loginpanel og et registreringspanel, der er skjult som standard. Registreringspanelet kan aktiveres ved at klikke på den blå kolonne i højre side. Det har en fantastisk animation for at være et meget specielt og slående login.
form flexbox
Vi starter søgeformularerne med dette formular baseret på flexbox. Det skiller sig ud for den røde farve på «søgningen» og lidt mere for et elegant søgefelt til dit websted.
Animeret boks
Med dette animeret kasse klik på forstørrelsesglasikonet og en lyseblå animation vises så vi kun skal skrive den søgning, som vi skal udføre på hjemmesiden. Lavet med HTML, CSS og JavaScript.
Søgefelt
en stor linje løber over skærmen så når vi trykker på det, begynder vi at skrive søgningen. En afhentningsknap til at definere dette enkel søgeformular.
Simpel søgefelt klik på
Simpel søgefelt klik på er baseret på en interaktion set i Waze Driver Community-appen køretøj. Alle ikoner og billeder er lavet med CSS. Det skiller sig ud for de ikoner, der giver os mulighed for at udføre specifikke søgninger efter et produkt eller en tjeneste. Slående for hvor sejt det er.
CSS-tekstinputeffekt
CSS-tekstinputeffekt inkluderer en række animationer i tekst- og søgeskuffe at være en omhyggelig søger i form.
Fuld skærm søgning
Denne post fra fuld skærm søgning det fungerer med enhver form for layout eller position. Kræver typografier container-specifikt og search-overlay element at være placeret i roden. Det er kendetegnet ved en hoppende animation i det øjeblik, vi trykker på søgeknappen.
søgning
Un søgeform simpelt det han kan godt lide at lege med de forskellige positioner og animationer. Vi klikker på søgeknappen, og den komplette skuffe vises for at skrive ordene. Meget aktuelt og stærkt anbefalet for hvor simpelt det er.
Ingen spørgsmål
Intet spørgsmål es enkel form med tekstfelt og muligheden for at vælge nogle svar, som brugeren kan vælge dem. En hel del visuelt for at være en af de bedste.
Popup abonnementsformular
Med denne popup abonnementsformular, vi klikker på den flydende knap, og det tager os til form med en meget sjov tone og et felt, hvor e-mail-adressen skal indtastes. Perfekt til e-mail marketing.
Abonnementsboks UI
en abonnementsboks med en alarmklokke og lidt mere end flade farver I designet.
CSS abonnementsboks
en smart abonnementsboks for den kendsgerning brug gradienter til abonnementsknappen ligesom feltets lilla nuance.
Abonnementsboks
en enkel abonnementsboks men med stor effekt ved design.
EMOJI-valideringsformular
I ren CSS dette valideringsformular for at oprette nøglen eller adgangskode. Når vi skriver, måler emoji formularens sikkerhedsniveau. Sjovt og nysgerrig uden tvivl.
Gå ikke glip af dette liste over 23 animerede pile i CSS.
Fremragende eksempel på eksempler præsenteret her. Variationen og tilpasningen til forskellige sammenhænge og det bedste er, at linket til hver titel inkluderer demoen og kildekoden, selvom du skal fremhæve den med en knap «Se demo», fordi det var af nysgerrighed, at jeg opdagede det i titlen . Tak for bidraget. Hilsen fra Caracas.
Det hjalp mig meget, tak.