Si hi ha alguna cosa que sol ser molt comú per a qualsevol tipus de web aquests són els formularis. Els formularis que ens serveixen per omplir les dades de contacte, introduir les dades bancàries, iniciar sessió en una xarxa social o simplement realitzar una recerca com la que solem fer diàriament en el cercador de Google.
Així que avui us anem a ensenyar 40 formularis en CSS que van des de formularis de contactes, checkouts de targetes de crèdit, inicis de sessió, simples, de subscripció o fins i tot de validació. Una sèrie de formularis de gran elegància i estil per donar-li aquest punt especial al vostre lloc web, ja sigui la temàtica que sigui.
Formulari de contacte minimalista
Un formulari de contacte simple amb una gran varietat d'efectes com són marques flotants o animacions de línia. Un elegant codi en CSS amb una mica de JavaScript. Si busques un formulari de contacte minimalista aquest és perfecte per a tu.
formulari minimalista
Un altre formulari minimalista, Tot i que només en CSS per ser un formulari simple i de gran efecte. No té les animacions minimalistes de l'anterior, però compleix molt bé amb el seu objectiu.
Formulari de contacte vintage
Formulari de contacte vintage, Un disseny molt elegant. Responsive per a aquests llocs web per veure des mobile, Encara que no inclou la validació.
Formulari de contacte de carta
Aquest formulari de contacte té una animació bastant curiosa: es forma una carta. Senzill, però de gran utilitat amb bastant color.
Formulari de contacte expandit
Aquest formulari de contacte expandit és només front end i té la validació amb jQuery. Fem clic sobre el botó flotant i sorgirà el formulari amb una vibrant animació. Destacat.
Contact Form UI
Contact Form UI és un formulari fet en HTML i CSS. Destaca per ser una simple targeta de contacte que podem omplir perquè canviï només el camp de el text quan és premut.
Checkout de targeta de pagament
Un checkout de targeta de pagament fet en HTML, CSS i JavaScript que es distingeix per l'animació que trencada la targeta de crèdit en el moment que premem sobre el camp CVC o nombre de seguretat.
Disseny pla targeta de crèdit
Pur CSS per a un checkout per targetes de crèdit en colors plans. Colorit i ben senzill que és capaç de denotar qualitat i professionalitat.
UI targeta de crèdit
Una altra targeta de crèdit en HTML, CSS i JavaScript que destaca per lo bé que està triat el disseny a nivell general. Ens oblidem d'animacions en aquest tros de codi per a la teva web. Descarrega-en aquest link.
React Checkout
React Checkout, Fet amb React.js, es distingeix per la imatge lateral que podem personalitzar amb els serveis o productes que venguem al nostre eCommerce.
Checkout targeta de pagament
Aquest checkout destaca per la possibilitat de portar una imatge a la targeta. un formulari simple i clar fet amb CSS3, HTML5 i una mica de jQuery. De gran qualitat i diferent a la resta d'checkouts d'aquesta llista. pots descarregar aquí aquest checkout targeta de pagament.
Pagament targeta crèdit
Aquest formulari per a pagament amb targeta de crèdit està programat per practicar amb Estigui habilitat per a manipulació DOM. Pot recordar en el disseny a l'elegant codi de Stripe, el servei de bancària digital que es va acostant a PayPal.
Targeta crèdit
un elegant checkout per a pagament amb targeta diferent als altres i que es basa per una targeta de crèdit situada a la part superior perquè sota tinguem tot el formulari amb les diferents dades que ha d'omplir el client per a realitzar el pagament en el eCommerce.
Formulari pas a pas
Un formulari pas a pas per registre fet en HTML, CSS i JavaScript. Quatre passos per a cada un dels punts situats al lateral esquerre. Unes animacions ben acabades per un formulari de gran acabat. Molt recomanable.
formulari interactiu
Un formulari interactiu multi-pas fet amb HTML, CSS i JavaScript. Destaca per l'animació de transició entre cada un dels passos. Té un toc elegant que no passarà desapercebut.
Formulari pas a pas
Aquest formulari pas a pas destaca per ser bastant creatiu. Respondràs a les preguntes perquè puguis tornar-hi en tot moment a l'estar tot el temps presents visualment a la pantalla.
Pas a pas
Formulari pas a pas fet en HTML, CSS i JavaScript. Es caracteritza per l'animació de transició entre cada un dels passos.
Multi pas formulari Jquery
Si tens un formulari bé extens, Aquest és perfecte per diferents seccions amb una barra de progrés ben cridanera. Basat en jQuery i CSS, destaca pel seu disseny i per la seva gran elegància.
Formulari animació UI
Les transicions d'aquest formulari animació UI estan basades en Domink Marskusic. Atenció a l'creatiu efecte de l'requadre en blau quan premem sobre alguns dels dos camps de el login o 'accés.
Formulari de creació / login compte
un efectista login i de creació de compte que es basa en l'animació que passa entre aquestes dues seccions. Molt actual i de cridanera presència per estar fet en HTML, JavaScript i CSS.
Snake Highlight
Snake Highlight és un dels login més cridaners de tota llista que destaca per l'elegant animació que sorgeix ràpidament en el moment que premem sobre algun dels dos camps.
Pantalla de login
Diví aquest disseny de pantalla de login pel que són els seus animacions i el creatiu que és. Si vols ser d'allò més actual pel que fa a el disseny web, aquest formulari no pot faltar. Indispensable.
Disseny login UI
Dissenyat fent servir HTML, Sass i jQuery. Disseny login UI es elegante i clar en el tema a què no li falten subtils animacions per convertir-se en un altre dels favorits de la llista.
Login i creació compte UI
un especial disseny de login i creació de compte UI pels colors i per presentar en una gran targeta les dues seccions. Un altre dels més bells en l'execució a què no podem faltar. Fet a HTML, CSS i JavaScript.
Obnoxious errors
Obnoxious errors és un gran login per l'animació de els camps amb obnoxious.css. Original per ser un login divertit, desenfadat i ben diferent. Original sense cap dubte per al nostre lloc web.
Login CSS HTML
Un login curiós pels diferents icones que mostren cada un dels camps per així portar a l'visitant per on vulguem. També destaquen els tons escollits en els colors. No compta amb cap animació. Està fet en HTML i CSS per implementar-ho en el lloc web per a un client o el nostre propi.
Formulari de login Modal
Aquest formulari de login Modal està inspirat en el llenguatge de disseny conegut per Material Design. Ho hem vist en multitud d'aplicacions en dispositius mòbils. En aquest codi comptem amb panell de login i un altre de registre que està amagat per defecte. El panell de registre pot ser activat a l'prémer sobre la columna en blau situada a la part dreta. Compta amb una gran animació per ser un login ben especial i cridaner.
Form flexbox
Comencem els formularis de cerca amb aquest formulari basat en flexbox. Destaca pel color vermell de l' «search» i per poc més per a un elegant camp de cerca per al teu lloc web.
Caixa animada
Amb aquesta caixa animada es prem sobre la icona de lupa i apareixerà una brillant animació en blau perquè només haguem de teclejar la recerca que realitzarem en el lloc web. Fet amb HTML, CSS i JavaScript.
Camp de cerca
Una gran línia recorre tota la pantalla perquè quan la premem comencem a teclejar la cerca. Un botó tipus pastilla per definir aquest formulari simple de cerca.
Camp de cerca simple clic on
Camp de cerca simple clic on està basat en una interacció vista a l'app Waze de comunitat de conductors de vehicles. Totes les icones i imatges estan realitzats amb CSS. Destaca per aquests icones que ens permeten fer cerques en concret d'un producte o servei. Cridaner pel genial que és.
Efecte d'entrada de text CSS
Efecte d'entrada de text CSS inclou una sèrie de animacions en el text i el calaix de cerca per ser una cura cercador en formulari.
Cerca a pantalla completa
Aquesta entrada de cerca a pantalla completa funciona amb qualsevol tipus de layout o posició. requereix estils específics de tipus contenidors i element search-overlay per a ser ubicat a l'arrel. Es caracteritza per una animació de rebot en el moment que premem el botó de cerca.
Cerca
Un formulari de cerca simple que li agrada jugar amb les diferents posicions i les animacions. Premem sobre el botó de cerca i sorgeix el calaix complet per teclejar les paraules. Molt actual i molt recomanable per el simple que és.
no questions
no question es formulari simple amb camp de text i l'opció de seleccionar unes respostes perquè l'usuari les seleccioni. De gran tracte en el visual per a ser un dels millors.
Formulari subscripció popup
Amb aquest formulari subscripció popup, Fem clic al botó flotant i ens portarà a l' formulari amb un to ben divertit i un camp on introduir el correu electrònic. Perfecte per email màrqueting.
Caixa de subscripció UI
Una caixa de subscripció amb una campana d'alarma i poc més que uns colors plans en el disseny.
Caixa subscripció CSS
Una caixa elegant de subscripció pel fet de utilitzar degradats per al botó de subscripció a l'igual que el to morat de camp.
Caixa subscripció
Una caixa de subscripció simple però de gran efecte pel disseny.
Formulari de validació Emoji
en pur CSS aquest formulari de validació per crear la clau o contrasenya. Segons anem escrivint, el emoji mesurarà el nivell de seguretat de l'formulari. Divertit i curiós sense cap dubte.
No us perdeu aquesta llista de 23 fletxes animades en CSS.
Excel·lent la mostra d'exemples aquí presentada. La varietat i adaptació a diferents contextos i el millor és que el link de cada títol inclou el demo i el codi font encara que hauries ressaltar amb un botó «Veure demo» perquè per curiositat va ser que el va descobrir en el títol. Gràcies per la contribució. Salutacions des de Caracas.
Em va servir moltíssim, gràcies.