Hvis det er noe som vanligvis er veldig vanlig for alle typer nettsteder, er dette skjemaene. Skjemaene vi bruker for å fylle ut kontaktinformasjonen, skriv inn bankdetaljer, logg inn på et sosialt nettverk eller bare utfør et søk som vi vanligvis gjør daglig i Googles søkemotor.
Så i dag skal vi vise deg det 40 skjemaer i CSS alt fra kontaktskjemaer, kredittkortkasser, pålogginger, enkelt, abonnement eller til og med validering. En serie former med stor eleganse og stil for å gi det spesielle poenget til nettstedet ditt, uavhengig av tema.
Minimalistisk kontaktskjema
Et enkelt kontaktskjema med en stort utvalg av effekter slik som flytende merker eller linjeanimasjoner. Elegant CSS-kode med litt JavaScript. Hvis du leter etter en minimalistisk kontaktskjema dette er perfekt for deg.
Minimalistisk form
Andre minimal form, men bare i CSS å være en enkel og effektiv effekt. Den har ikke de minimalistiske animasjonene fra den forrige, men den gjør det veldig bra med sitt mål.
Vintage kontaktskjema
Vintage kontaktskjema, en veldig elegant design. Responsiv for disse nettstedene å bli sett fra mobil, selv om det ikke inkluderer validering.
Brevkontaktskjema
Dette kontaktskjema har en ganske nysgjerrig animasjon: det dannes et brev. Enkel, men veldig nyttig med rikelig med farger.
Utvidet kontaktskjema
Dette kontaktskjema utvidet Det er bare frontend og har validering med jQuery. Vi klikker på den flytende knappen og skjemaet vises med en levende animasjon. Fremragende.
Kontakt skjema UI
Kontakt skjema UI det er et skjema laget i HTML og CSS. Det skiller seg ut for å være et enkelt kontaktkort at vi kan fylle ut slik at bare tekstfeltet endres når det klikkes.
Betalingskortkasse
Un betalingskortkasse laget i HTML, CSS og JavaScript som er preget av roterende animasjon kredittkortet for øyeblikket vi trykker på feltet CVC eller sikkerhetsnummer.
Kredittkort flat design
Ren CSS for en kassen for kredittkort i flate farger. Fargerikt og veldig enkelt som er i stand til å betegne kvalitet og profesjonalitet.
Kredittkortgrensesnitt
Nok et kredittkort i HTML, CSS og JavaScript som skiller seg ut for hvor bra det er valgte den overordnede designen. Vi glemte animasjoner i denne koden for nettstedet ditt. Last ned den på denne lenken.
Reager kassa
Reager kassa, laget med React.js, preges av sidebildet vi kan tilpasse med tjenestene eller produktene vi selger i vår e-handel.
Kassa betalingskort
Denne kassen skiller seg ut for muligheten for å sette et bilde på kortet. EN enkel og tydelig form laget med CSS3, HTML5 og litt jQuery. Høy kvalitet og forskjellig fra resten av kassene på denne listen. Du kan laste ned her dette betalingskortet til kassen.
Kredittkortbetaling
Dette skjema for betaling med kredittkort er programmert til å øve med JavaScript for DOM-manipulering. Du kan huske i designet den elegante koden til Stripe, den digitale banktjenesten som kommer nærmere PayPal.
Kredittkort
En elegant kasse for kortbetaling forskjellig fra de andre og basert på et kredittkort plassert øverst Så nedenfor har vi hele skjemaet med de forskjellige dataene som klienten må fylle ut for å utføre betalingen i e-handel.
Trinn for trinn skjema
Un trinnvis skjema for registrering gjort i HTML, CSS og JavaScript. Fire trinn for hvert av punktene plassert på venstre side. Godt ferdige animasjoner for en veldig ferdig form. Sterkt anbefalt.
Interaktiv form
Un interaktivt skjema multi-pass laget med HTML, CSS og JavaScript. Det skiller seg ut for overgangsanimasjonen mellom hvert av trinnene. Den har en elegant touch som ikke vil bli ubemerket.
Trinn for trinn skjema
Dette trinnvis skjema skiller seg ut for å være ganske kreativ. Du vil svare på spørsmålene slik at du når som helst kan gå tilbake til dem ved å være visuelt til stede på skjermen hele tiden.
Trinn for trinn
Steg for trinn skjema gjort i HTML, CSS og JavaScript. Det er preget av overgangsanimasjonen mellom hvert trinn.
Flertrinns Jquery-skjema
Hvis du har en veldig lang form, dette er perfekt for forskjellige seksjoner med en veldig slående fremdriftslinje. Basert på jQuery og CSS, skiller det seg ut for design og stor eleganse.
UI-animasjonsskjema
Overgangene til dette UI-animasjonsskjema er basert på Domink Marskusic. Oppmerksomhet på den kreative effekten av den blå boksen når vi klikker på noen av de to påloggings- eller øktfeltene.
Kontoopprettelse / påloggingsskjema
En gimmick pålogging og oppretting av konto som er basert på animasjon hva som skjer mellom disse to seksjonene. Svært aktuell og slående tilstedeværelse som skal gjøres i HTML, JavaScript og CSS.
Slangehøydepunkt
Slangehøydepunkt er en av de mest slående påloggingene til en liste som skiller seg ut for den elegante animasjonen som vises raskt i det øyeblikket vi klikker på ett av de to feltene.
Påloggingsskjerm
Divine dette designet påloggingsskjerm det er også deres animasjoner og hvor kreative det er. Hvis du vil være mest oppdatert når det gjelder webdesign, kan dette skjemaet ikke mangle. Uunnværlig.
Logg inn UI design
Designet med HTML, Sass og jQuery. Logg inn UI design es elegant og tydelig om emnet som ikke mangler subtile animasjoner for å bli en av favorittene på listen.
Innlogging og UI-konto
En spesiell påloggingsdesign og brukergrensesnitt for oppretting av konto for fargene og for presentasjon i ett stort kort de to seksjonene. En annen av de vakreste i utførelsen som vi ikke kan gå glipp av. Laget i HTML, CSS og JavaScript.
Ubehagelige feil
Ubehagelige feil Det er en flott pålogging på grunn av animasjonen av felt med motbydelig.css. Original for å være en morsom, bekymringsløs og veldig annen innlogging. Original uten tvil for nettstedet vårt.
Logg på CSS HTML
En nysgjerrig pålogging av de forskjellige ikonene som viser hvert av feltene for å ta den besøkende dit vi vil. Fargene som er valgt i fargene skiller seg også ut. Den har ingen animasjon. Den er laget i HTML og CSS for å implementere den på nettstedet for en klient eller vår egen.
Modal påloggingsskjema
Dette Modal påloggingsskjema er inspirert av språket til design kjent for Material Design. Vi har sett det i mange applikasjoner på mobile enheter. I denne koden har vi et påloggingspanel og et registreringspanel som er skjult som standard. Registreringspanelet kan aktiveres ved å klikke på den blå kolonnen på høyre side. Den har en flott animasjon for å være en veldig spesiell og slående pålogging.
Skjema flexbox
Vi starter søkeskjemaene med dette skjema basert på flexbox. Det skiller seg ut for den røde fargen på «søk» og for litt mer for et elegant søkefelt for nettstedet ditt.
Animert boks
Med dette animert boks Klikk på forstørrelsesglassikonet og en lyseblå animasjon vises slik at vi bare trenger å skrive inn søket vi skal utføre på nettstedet. Laget med HTML, CSS og JavaScript.
Søkefelt
en stor linje går over skjermen slik at når vi trykker på den, begynner vi å skrive søket. En henteknapp for å definere dette enkelt søkeskjema.
Enkelt søkefelt, klikk på
Enkelt søkefelt, klikk på er basert på et samspill sett i Waze Driver Community-appen kjøretøy. Alle ikoner og bilder er laget med CSS. Det skiller seg ut for de ikonene som lar oss utføre spesifikke søk etter et produkt eller en tjeneste. Slående på grunn av hvor kult det er.
CSS tekstinntastingseffekt
CSS tekstinntastingseffekt inkluderer en serie med animasjoner i tekst og søkeskuff å være en forsiktig søker i form.
Fullskjermsøk
Denne oppføringen fra fullskjermsøk det fungerer med alle typer layout eller posisjon. Krever stiler containerspesifikk og søkeoverleggselement å være plassert i roten. Det er preget av en sprettende animasjon i det øyeblikket vi trykker på søkeknappen.
Søk
Un søkeskjema enkelt det han liker å leke med de forskjellige posisjonene og animasjoner. Vi klikker på søkeknappen og den komplette skuffen vises for å skrive ordene. Veldig oppdatert og sterkt anbefalt for hvor enkelt det er.
Ingen spørsmål
Ingen spørsmål es enkel form med tekstfelt og muligheten til å velge noen svar for brukeren å velge dem. Mye visuelt for å være en av de beste.
Popup-abonnementsskjema
Med dette abonnementsskjema popup, vi klikker på den flytende knappen og den tar oss til form med en veldig morsom tone og et felt der du skal legge inn e-postadressen. Perfekt for e-postmarkedsføring.
Abonnementsboks UI
en abonnementsboks med alarmklokke og litt mer enn flate farger I designet.
CSS abonnementsboks
en smart abonnementsboks for faktum av bruk graderinger for abonnementsknappen akkurat som den lilla fargen på feltet.
Abonnementsboks
en enkel abonnementsboks men med stor effekt av design.
EMOJI-valideringsskjema
I ren CSS dette valideringsskjema for å lage nøkkelen eller passord. Når vi skriver vil emoji måle sikkerhetsnivået til skjemaet. Morsomt og nysgjerrig uten tvil.
Ikke gå glipp av dette liste over 23 animerte piler i CSS.
Utmerket utvalg av eksempler presentert her. Variasjonen og tilpasningen til forskjellige sammenhenger og det beste er at lenken til hver tittel inkluderer demoen og kildekoden, selv om du bør markere den med en knapp «Se demo» fordi det var av nysgjerrighet at jeg oppdaget det i tittelen . Takk for bidraget. Hilsen fra Caracas.
Det hjalp meg mye, takk.