Passaste semanas a acertar nas cores, nos tipos de letra e no espaçamento do teu website. Depois largaste lá um formulário que parece ter vindo de um website completamente diferente. Outro tipo de letra, outra cor de botão, outro estilo de borda. Os visitantes reparam na diferença mesmo que não saibam dizer o que está estranho.
O estilo do formulário é a forma de fechar essa diferença. Cobre tudo o que é visual no formulário: tamanhos dos campos, tipos de letra das etiquetas, cores dos botões, arredondamento dos cantos, espaçamento entre elementos e como o formulário responde em diferentes tamanhos de ecrã. Se acertares, o formulário parece nativo do teu site. Se errares, as taxas de conclusão sofrem.
Eis como dar estilo a formulários com ferramentas visuais e CSS, e o que priorizar para ter maior impacto.
O que é o estilo de formulários?
O estilo de formulários é o conjunto de escolhas de design visual aplicadas aos elementos de um formulário web. Inclui a tipografia das etiquetas e do texto dos campos, as cores dos campos e dos botões, o espaçamento entre grupos do formulário, os estilos de borda, os estados de foco e o aspeto das mensagens de erro.
Todos os elementos do formulário podem ter estilo: campos de texto, listas pendentes, caixas de seleção, botões de opção, áreas de carregamento de ficheiros e botões de submeter. Um estilo consistente em todos estes elementos faz o formulário parecer coeso e profissional.
O estilo é separado da estrutura do formulário. Podes ter um formulário bem organizado com um estilo péssimo, ou um formulário lindíssimo com uma ordem de campos confusa. Ambos importam, mas o estilo é o que os visitantes julgam no primeiro segundo.
Opções de estilo sem código
A maioria dos criadores de formulários inclui um editor de estilo visual que te deixa personalizar o aspeto sem mexer em CSS. Escolhes cores, tipos de letra, arredondamento e estilos de botão através de um painel de definições. As alterações aparecem em pré-visualização em tempo real.
Começa por ajustar o formulário ao sistema de design que o teu website já tem. Usa a mesma família de letra, a cor principal no botão de submeter e o arredondamento que aparece noutros elementos como cartões ou botões em todo o site.
O criador de formulários da WEMASY inclui controlos de estilo dentro do criador de websites, por isso os teus formulários herdam automaticamente as definições de design do site. Ajusta a partir daí quando um formulário específico precisar de outro tratamento.
Personalização com CSS para um controlo avançado
Quando o editor visual não dá controlo suficiente, o CSS dá-te autoridade total sobre cada detalhe visual. O CSS personalizado aponta para elementos específicos do formulário usando nomes de classe ou IDs que o teu criador de formulários gera.
As personalizações comuns com CSS incluem mudar a altura e o preenchimento dos campos, dar estilo aos estados de foco com um brilho colorido na borda, personalizar a cor do texto de exemplo, desenhar aspetos próprios para caixas de seleção e botões de opção e criar efeitos ao passar o rato no botão de submeter.
Se usares CSS personalizado, guarda uma cópia dos teus estilos por defeito. As substituições de CSS podem deixar de funcionar quando os criadores de formulários atualizam a estrutura HTML. Documenta que estilos alteraste e porquê, para que as atualizações futuras não te surpreendam.
Boas práticas de estilo de formulários
Combina com o teu website, não com uma moda. Campos arredondados e botões com gradiente parecem modernos, mas só se encaixarem no design que já tens. O website de um escritório de advogados com um estilo de formulário brincalhão e colorido cria uma experiência desconcertante.
Faz o botão de submeter destacar-se. Deve ser o elemento visualmente mais proeminente do formulário. Usa a cor principal da tua marca, põe-no a toda a largura no telemóvel e dá-lhe preenchimento suficiente para tocar com facilidade.
Mantém as etiquetas visíveis. O texto de exemplo não substitui as etiquetas. Etiquetas com estilo por cima de cada campo melhoram a acessibilidade e reduzem erros. Se usares etiquetas flutuantes, testa se continuam legíveis quando o campo está em foco e preenchido.
Dá estilo claro aos estados de erro. Bordas vermelhas, texto vermelho ou um ícone junto aos campos inválidos ajudam os visitantes a corrigir erros depressa. Um estilo de erro subtil passa despercebido e os visitantes abandonam o formulário frustrados.
Testa no telemóvel. Um formulário que parece polido no computador pode estragar-se num telemóvel se as larguras dos campos, os tamanhos de letra ou a posição dos botões não forem responsivos. Dá estilo com o telemóvel como ecrã principal, não como uma ideia de última hora.
Erros comuns de estilo de formulários
Usar o estilo por defeito do criador de formulários sem personalizar é o erro mais comum. Os estilos por defeito são pensados para serem genéricos, o que significa que raramente combinam com a tua marca. Dedica dez minutos às definições de estilo e o formulário fica logo com um aspeto mais profissional.
Exagerar no estilo também faz mal. Sombras, animações e elementos decorativos em excesso distraem do propósito do formulário. Os visitantes estão ali para submeter informação, não para admirar enfeites de design. Limpo e claro vence engenhoso e confuso.
Ignorar os estados de foco cria problemas de acessibilidade. Os visitantes que navegam com o teclado precisam de indicadores de foco visíveis em cada campo. Remove o contorno por defeito do navegador apenas se o substituíres por um estilo de foco próprio.
O estilo é a forma mais rápida de melhorar a perceção que os visitantes têm dos teus formulários. Combina com a tua marca, destaca o botão de submeter e testa em todos os tamanhos de ecrã. O polimento visual mostra que o teu negócio presta atenção ao detalhe.
Perguntas frequentes
Preciso de saber CSS para dar estilo a formulários?
Não. Os criadores de formulários modernos incluem editores de estilo visuais que tratam de cores, tipos de letra, espaçamento e design de botões sem código. O CSS está disponível quando precisas de controlo ao pixel, mas a maioria dos negócios consegue resultados profissionais só com as definições visuais.
O CSS personalizado vai estragar o funcionamento do meu formulário?
O CSS só altera o aspeto e não afeta a forma como o formulário recolhe ou submete dados. O risco é visual: um CSS demasiado agressivo pode esconder campos, estragar layouts no telemóvel ou tornar as mensagens de erro invisíveis. Testa depois de cada alteração de CSS em vários tamanhos de ecrã.
Como ajusto o formulário à marca do meu website?
Vai buscar as cores da marca, a família de letra e o arredondamento aos estilos que o teu website já tem. Aplica-os aos campos, às etiquetas e ao botão de submeter. O criador de websites da WEMASY aplica automaticamente aos formulários as definições de design de todo o site, dando-te um ponto de partida consistente.
Os campos do formulário devem ter bordas ou um design sem bordas?
Ambos funcionam se forem aplicados com consistência. Os campos com borda são a escolha por defeito mais segura porque definem claramente onde escrever. Os campos sem borda, só com uma linha em baixo, parecem modernos mas podem confundir os visitantes sobre onde começam as áreas de escrita. Escolhe um estilo e aplica-o a todos os campos.
Como é que o estilo do formulário afeta as taxas de conversão?
Um formulário com aspeto profissional cria confiança e incentiva a conclusão. Um design de formulário desajustado ou desatualizado cria dúvidas sobre se a submissão é segura ou se alguém vai responder. O estilo sozinho não resolve uma estrutura de formulário má, mas um estilo fraco pode minar um formulário bem construído.
Posso usar estilos diferentes em formulários diferentes do mesmo site?
Podes, mas mantém os elementos principais consistentes. O mesmo tipo de letra, a mesma cor de botão e o mesmo estilo de campo devem aparecer em todos os formulários. Podes ajustar o texto do botão de submeter ou a largura do formulário para casos de uso específicos, mas a linguagem visual deve parecer de uma só marca.