10 trechos de código para criar belos formulários

Todo site geralmente precisa de algum tipo de formulário, seja uma página de checkout ou uma simples página de contato.

É crucial garantir que seus formulários funcionem, portanto, a usabilidade é o número 1. Mas a estética também é importante, pois designs confiáveis ​​são sempre mais atraentes.

Se você está sem ideias de design, esta coleção pode ajudar. É uma coleção de 10 designs de formulários com código-fonte gratuito. Você encontrará muitos esquemas de cores diferentes, estilos de campo de entrada, estilos tipográficos e muito mais.

Além disso, todos eles são hospedados gratuitamente para que você possa copiar e jogar com o código ao seu gosto.

1. Projeto de Materiais

Todo mundo conhece a linguagem de design de materiais do Google durante sua ascensão à fama nos últimos anos. Os conceitos de design de materiais eram voltados para aplicativos Android, mas rapidamente se espalharam pela web.

Se você gosta do estilo minimalista da interface do usuário do material do Google, confira este formulário de material criado por Jon Uhlmann.

Ele roda em Sass e Pug para pré-processamento CSS/HTML. É também uma forma bastante leve e os elementos de design de material devem renderizar da mesma forma em todos os navegadores.

Verdadeiramente uma inspiração para todos os designers de materiais por aí.

2. Sob o Mar

Faça uma viagem ao oceano nesta forma de contato única, construída com um estilo aquático.

O fundo da página inteira usa um padrão de repetição para criar as ondas da água do oceano. Mas os peixinhos animados são toda uma outra história animando a partir de uma imagem de fundo.

Além disso, sempre que você seleciona um campo de entrada, um polvo amigável aparece para uma saudação. Que pitoresca!

3. Formulário Bootstrap 3

Os estilos padrão do Bootstrap são bem chatos e eles realmente foram usados ​​até a morte neste momento. Sempre que vejo um site Bootstrap com os mesmos estilos genéricos, só posso imaginar que o designer estava com preguiça de personalizar ou muito focado na experiência para se importar.

Este formulário BS3 faz as coisas certas ao construir em cima do framework Bootstrap. Ele usa alguns restylings nos campos de entrada e o botão de envio para criar um adorável formulário Bootstrap que você nunca saberia que era Bootstrap'd.

Se você estiver executando um layout BS3, definitivamente considere retrabalhar seus formulários assim. Você também pode tentar usar uma estrutura de terceiros construída sobre o Bootstrap para um design mais personalizado.

4. Contato Elegante

Com ícones Font Awesome e alguns estilos básicos de resposta, este formulário de contato é verdadeiramente único.

Eu sempre recomendo adicionar ícones em formulários, especialmente para designs maiores. Com mais campos, você fica mais hesitante e os usuários só querem navegar pelos formulários sem problemas.

Esses ícones simples adicionam uma indicação a cada campo para que seja fácil dizer rapidamente que tipo de informação é necessária.

E se você estiver procurando por algo um pouco único, tente adicionar uma fonte de ícone diferente à mistura.

5. Login minúsculo

Às vezes as pequenas coisas são realmente as melhores coisas. E esta interface do usuário de formulário prova isso criando um formulário de login super reduzido que simplesmente arrasa.

A tipografia é enorme no design de formulários e geralmente prefiro tipos de letra menores nos campos de login. Realmente depende do site e de quão bem o texto menor combina com o layout.

Mas este formulário também tem um pequeno gráfico de passo de progresso pendurado na lateral explicando o processo do formulário. Concedido com apenas dois campos, isso parece bobo, mas para formulários de registro maiores, essa barra de progresso será inestimável para a experiência do usuário.

6. Combinação de login e inscrição

Se você quiser reduzir o tempo de login, tente combinar o formulário de login e o formulário de registro em uma única página. É muito mais fácil do que você imagina e você pode ver uma demonstração doce neste pe.

Sempre que você clicar nos links de login/registro ao lado, você encontrará uma bela animação personalizada girando os formulários para visualização. Tudo é alimentado por jQuery, mas as animações também podem funcionar por meio de CSS.

Mas noto um bug neste layout em que a parte inferior do formulário “oculto” ainda é visível após a troca. Você pode resolver isso com a propriedade de visibilidade CSS ou movendo a posição um pouco mais fora dos limites.

7. Contato no quadro-negro

Aqui está um estilo de formulário único e real que definitivamente salta da página. Este formulário de contato de quadro-negro usa um gradiente de fundo para criar o efeito de luz refletindo no quadro-negro.

Além disso, a borda de madeira ajuda a vender essa coisa como um negócio real.

O criador Greg Sweet ainda usa uma fonte da web personalizada que se parece com a caligrafia humana típica. Isso é perfeito para adicionar aquele toque final ao formulário, para que realmente pareça que você está de volta à escola.

8. Check-out com cartão de crédito

Já vi muitos formulários de checkout, mas este design de Fabio Ottaviani é talvez o melhor que já encontrei.

Ele usa JavaScript para lidar com a validação do campo de entrada, mas o cartão de crédito é todo CSS. Ele é animado com base nos números que você digita no formulário e até gira para trás quando você digita o número CVV do cartão de crédito.

9. Inscrição personalizada

Para um formulário de inscrição CSS puro, este trecho realmente leva o biscoito. Parece muito simples descansar em um único recipiente com uma pequena sombra.

Mas os campos de entrada são altamente personalizados, incluindo o espaço necessário para adicionar esses ícones a cada um.

Sempre que você destaca um campo, a borda fica verde-musgo. Você notará que o ícone também muda de cor! Até os menus selecionados para os cartões de crédito têm seus próprios estilos personalizados.

Este é um efeito bastante complexo para fazer puramente em CSS, mas o desenvolvedor José Carneiro fez isso acontecer.

10. Etiquetas Flutuantes

Etiquetas flutuantes personalizadas são algumas das minhas tendências favoritas no design de formulários. Eles sempre ajudam a melhorar a usabilidade e fornecem uma explicação clara do campo, mesmo depois de preenchido.

Dê uma olhada neste formulário de rótulo flutuante rodando em CSS3 e Compass.

O criador Anton Simanov usa jQuery para os rótulos, mas é tudo codificado de forma personalizada sem nenhum plugin. Sem mencionar que sua solução funciona para todos os estilos de entrada típicos, incluindo áreas de texto e menus de seleção.

Não importa o estilo de formulário que você está procurando, certamente espero que esta galeria possa lhe dar algumas ideias e trechos para seguir em frente.

Quanto mais você estudar padrões de projeto, mais ideias terá para construir seus próprios projetos. E o CodePen é um ótimo site para reunir essas ideias.