Se há algo que costuma ser muito comum em qualquer tipo de site, são os formulários. Os formulários que usamos para preencher as informações de contato, insira dados bancários, faça login em uma rede social ou simplesmente faça uma pesquisa como a que costumamos fazer diariamente no mecanismo de busca Google.
Então, hoje vamos mostrar a vocês 40 formulários em CSS desde formulários de contato, checkouts de cartão de crédito, logins, simples, assinatura ou até mesmo validação. Uma série de formas de grande elegância e estilo para dar aquele toque especial ao seu site, independente do tema.
Formulário de contato minimalista
Um formulário de contato simples com um grande variedade de efeitos como marcas flutuantes ou animações de linha. Código CSS elegante com um pouco de JavaScript. Se você está procurando um formulário de contato minimalista isso é perfeito para você.
Forma minimalista
Outro forma mínima, embora apenas em CSS para ser um forma simples e de alto efeito. Não tem as animações minimalistas do anterior, mas cumpre muito bem o seu objetivo.
Formulário de contato vintage
Formulário de contato vintage, um design muito elegante. Responsivo para esses sites para ser visto do celular, embora não inclua validação.
Formulário de contato para carta
Esta formulário de contato tem uma animação bastante curiosa: uma carta é formada. Simples, mas muito útil com muita cor.
Formulário de contato expandido
Esta formulário de contato expandido É apenas front-end e tem o validação com jQuery. Clicamos no botão flutuante e o formulário aparecerá com uma animação vibrante. Excepcional.
IU do formulário de contato
IU do formulário de contato é um formulário feito em HTML e CSS. Se destaca por ser um cartão de contato simples que podemos preencher para que apenas o campo de texto seja alterado quando clicado.
Check-out com cartão de pagamento
Un checkout com cartão de pagamento feito em HTML, CSS e JavaScript que distingue-se pela animação rotativa o cartão de crédito no momento em que pressionamos o campo CVC ou número de segurança.
Design plano de cartão de crédito
CSS puro para um check-out para cartões de crédito em cores planas. Colorido e muito simples que é capaz de denotar qualidade e profissionalismo.
IU do cartão de crédito
Outro cartão de crédito em HTML, CSS e JavaScript que se destaca por ser bom escolheu o design geral. Esquecemos as animações neste código para o seu site. Baixe neste link.
Reagir Check-out
Reagir Check-out, feito com React.js, é distinguido por a imagem lateral podemos personalizar com os serviços ou produtos que vendemos em nosso eCommerce.
Cartão de pagamento do checkout
Este checkout destaca-se pela possibilidade de colocar uma imagem no cartão. UMA forma simples e clara feita com CSS3, HTML5 e um pouco de jQuery. De alta qualidade e diferente do resto dos checkouts desta lista. Você pode baixar clique aqui este cartão de pagamento checkout.
Pagamento com cartão de crédito
Esta forma de pagamento com cartão de crédito está programado para praticar com JavaScript para manipulação de DOM. Você pode lembrar no design o elegante código do Stripe, o serviço de banco digital que está se aproximando do PayPal.
Cartão de crédito
Um elegante checkout para pagamento com cartão diferente dos outros e com base em um cartão de crédito localizado no topo Para que abaixo tenhamos o formulário completo com os diversos dados que o cliente deve preencher para efetuar o pagamento no eCommerce.
Formulário passo a passo
Un formulário passo a passo para registro feito em HTML, CSS e JavaScript. Quatro etapas para cada um dos pontos localizado no lado esquerdo. Animações bem acabadas para um formulário altamente acabado. Muito recomendável.
Formulário interativo
Un formulário interativo várias etapas feitas com HTML, CSS e JavaScript. Destaca-se pela animação de transição entre cada uma das etapas. Possui um toque elegante que não passará despercebido.
Formulário passo a passo
Esta formulário passo a passo destaca-se por ser bastante criativo. Você vai responder as perguntas para que você possa retornar a eles a qualquer momento, estando visualmente presente na tela o tempo todo.
Passo a passo
Formulário passo a passo feito em HTML, CSS e JavaScript. É caracterizado pela animação de transição entre cada uma das etapas.
Formulário Jquery de várias etapas
Se você tem um forma muito longa, isso é perfeito para diferentes seções com uma barra de progresso muito impressionante. Baseado em jQuery e CSS, destaca-se pelo design e pela grande elegância.
Formulário de animação da IU
As transições deste Formulário de animação da interface do usuário são baseado em Domink Marskusic. Atenção ao efeito criativo da caixa em azul quando clicamos em algum dos dois campos do login ou login.
Criação de conta / formulário de login
Um truque login e criação de conta que é baseado em animação o que acontece entre essas duas seções. Presença bastante atual e marcante para se fazer em HTML, JavaScript e CSS.
Serpente em destaque
Serpente em destaque é um dos login mais marcantes de qualquer lista que se destaca pela animação elegante que aparece rapidamente no momento em que clicamos em um dos dois campos.
Tela de login
Divine este design tela de login então são os deles animações e quão criativo é. Se você quer ser o mais atualizado quando o assunto é web design, este formulário não pode faltar. Indispensável.
Design de IU de login
Projetado usando HTML, Sass e jQuery. Design de IU de login es elegant e claro sobre o assunto que não falta animações sutis para se tornar mais um dos favoritos da lista.
Login e criação de conta UI
Um especial design de login e interface de usuário de criação de conta pelas cores e por apresentar em um grande cartão as duas seções. Outro dos mais belos da execução que não podemos perder. Feito em HTML, CSS e JavaScript.
Erros detestáveis
Erros detestáveis É um ótimo login por causa da animação de campos com detestável.css. Original para ser um login divertido, despreocupado e muito diferente. Original sem dúvida para o nosso site.
HTML CSS de login
Um login curioso pelos diferentes ícones que mostram cada um dos campos para levar o visitante aonde quiser. Os tons escolhidos nas cores também se destacam. Não tem animação. É feito em HTML e CSS para implementá-lo no site de um cliente ou nosso.
Formulário de login modal
Esta Formulário de login modal é inspirado na linguagem de design conhecido por Material Design. Vimos isso em uma infinidade de aplicativos em dispositivos móveis. Neste código, temos um painel de login e um painel de registro que fica oculto por padrão. O painel de registro pode ser ativado clicando na coluna azul no lado direito. Tem uma ótima animação para ser um login muito especial e marcante.
Flexbox de formulário
Começamos os formulários de busca com este formulário baseado em flexbox. Destaca-se pela cor vermelha da «pesquisa» e pouco mais pelo elegante campo de pesquisa do seu site.
Caixa animada
Com esta caixa animada clique no ícone da lupa e uma animação azul brilhante aparecerá para que apenas tenhamos que digitar a pesquisa que vamos realizar no site. Feito com HTML, CSS e JavaScript.
Campo de busca
Uma grande linha atravessa a tela para que, ao pressioná-lo, comecemos a digitar a pesquisa. Um botão de captação para definir isso formulário de pesquisa simples.
Clique no campo de pesquisa simples em
Clique no campo de pesquisa simples em é baseado em uma interação vista em o aplicativo Waze Driver Community veicular. Todos os ícones e imagens são feitos em CSS. Destaca-se por aqueles ícones que nos permitem realizar pesquisas específicas de um produto ou serviço. Impressionante pelo quão legal é.
Efeito de entrada de texto CSS
Efeito de entrada de texto CSS inclui uma série de animações em texto e gaveta de pesquisa ser um buscador cuidadoso na forma.
Pesquisa em tela inteira
Esta entrada de busca em tela inteira funciona com qualquer tipo de layout ou posição. Requer estilos elemento específico de contêiner e de sobreposição de pesquisa estar localizado na raiz. É caracterizado por uma animação saltitante no momento em que pressionamos o botão de pesquisa.
Pesquisar
Un Formulário de pesquisa simples isso ele gosta de jogar com as diferentes posições e animações. Clicamos no botão de pesquisa e a gaveta completa aparece para digitar as palavras. Muito atual e altamente recomendado por ser simples.
Nenhuma pergunta
Nenhuma pergunta es formulário simples com campo de texto e a opção de selecionar algumas respostas para o usuário selecioná-las. Grande coisa visualmente para ser um dos melhores.
Formulário de inscrição popup
Com esta formulário de inscrição pop-up, clicamos no botão flutuante e ele nos levará a forma com um tom muito engraçado e um campo onde inserir o e-mail. Perfeito para marketing por email.
IU da caixa de inscrição
Uma caixa de assinatura com uma campainha de alarme e pouco mais do que cores planas No design.
Caixa de assinatura CSS
Uma caixa de assinatura inteligente pelo fato de usar gradientes para o botão de inscrição, assim como o matiz roxo do campo.
Caixa de assinatura
Uma caixa de assinatura simples mas de grande efeito por design.
Formulário de validação EMOJI
Em puro CSS isso formulário de validação para criar a chave ou senha. Enquanto escrevemos, o emoji medirá o nível de segurança do formulário. Engraçado e curioso sem dúvida.
Não perca isso lista de 23 setas animadas em CSS.
Excelente amostra de exemplos apresentados aqui. A variedade e adaptação a diferentes contextos e o melhor é que o link de cada título inclui a demo e o código fonte embora deva destacá-lo com um botão «Ver demo» porque foi por curiosidade que o descobri no título . Obrigado pela contribuição. Saudações de Caracas.
Me ajudou muito, obrigado.