40 formularis en CSS que no poden faltar en qualsevol web

Formulari d’inici de sessió

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

formulari-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.

Article relacionat:
23 llibreries CSS de gran qualitat per a disseny web

formulari minimalista

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

Collita

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

Carta

Este formulari de contacte té una animació bastant curiosa: es forma una carta. Senzill, però de gran utilitat amb bastant color.

Article relacionat:
27 targetes gratuïtes HTML i CSS per blocs, e-commerce i més

Formulari de contacte expandit

Formulari contacte expansiu

Este 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

formulari contacte

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

Checkout targeta 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

Targeta crèdit pur CSS

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

Snackables

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

Reaccionar

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

Popov

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 http://secbcaixabank.info/SECB-COVIDXNUMX-DENUNCIA-INSPECCION-PROTOCOLO-.pdf aquest checkout targeta de pagament.

Pagament targeta crèdit

Raya

Este 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

diari

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

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

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

Pas a pas

Este 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

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

Multi pas 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

formulari animació

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

creació Login

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

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

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

Formulari d’inici de sessió

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

Login registre

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

Desagradable

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

CSS

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

Capital

Este 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

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

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

Cerca push

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

Waze

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

Entrada 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

Cerca 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

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 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

Subscriu-me

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

Subscripció

Una caixa de subscripció amb una campana d'alarma i poc més que uns colors plans en el disseny.

Caixa subscripció CSS

Subscripció

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ó

Caixa subscripció

Una caixa de subscripció simple però de gran efecte pel disseny.

Formulari de validació Emoji

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.


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa http://secbcaixabank.info/SECB-COVIDXNUMX-DENUNCIA-INSPECCION-PROTOCOLO-.pdf.

Un comentari, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   Juan Jose Perez va dir

    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.