Design de formulários: melhores práticas para conversão

Atualizado em 19 de outubro de 2026

Seu formulário é curto. As perguntas são relevantes. O tráfego está fluindo. Mesmo assim, em dispositivos móveis, uma parcela significativa dos visitantes para no segundo campo. O problema geralmente não está na oferta nem na quantidade de perguntas: está no design do formulário. Um teclado alfabético que se abre em um campo de CEP, um rótulo que desaparece assim que você digita, um botão cinza claro quase invisível. Este guia reúne as melhores práticas para design de formulários que têm um impacto mensurável na conversão, juntamente com o código ou as configurações exatas a serem aplicadas.

Resumidamente: um design de formulário que converte segue cinco boas práticas: uma única coluna com rótulos visíveis acima dos campos, um teclado móvel adaptado a cada tipo de dado, etapas curtas com progresso visível, contraste suficiente (4,5:1 para o texto, 3:1 para as bordas dos campos) e um botão que indica claramente o resultado para o usuário. Essas configurações são de baixo custo e eliminam o atrito que leva ao abandono em dispositivos móveis.

Antes de entrarmos em detalhes, uma breve ressalva: este artigo não trata do tamanho dos seus formulários, mas sim do formato deles. Ao final, você encontrará um checklist de auditoria com 12 itens para verificar seu próprio formulário em apenas dez minutos.

Layout: uma coluna, rótulos acima dos campos

O layout mais eficaz para um formulário de geração de leads é uma única coluna, com cada rótulo posicionado acima do campo correspondente. O olhar segue uma linha reta, sem precisar percorrer o campo em ziguezague ou procurar qual rótulo corresponde a qual campo.

Os números comprovam isso. Em um estudo controlado conduzido pelo Instituto CXL (agora Speero) com 702 participantes, a versão de coluna única foi concluída em uma média de 102,3 segundos, em comparação com 117,8 segundos para a versão de múltiplas colunas. Isso representa uma economia de tempo de aproximadamente 13%, sendo as perguntas estritamente idênticas.

Uma distinção importante: este estudo mediu apenas o tempo gasto por aqueles que preencheram o formulário. Não diz nada sobre aqueles que desistiram. Mas um formulário mais rápido de ler raramente desmotiva as pessoas.

Rótulo de espaço reservado, rótulo flutuante ou rótulo fixo?

Um rótulo fixo, sempre visível acima do campo, continua sendo a opção mais segura. O texto de exemplo inserido no campo (o marcador de posição) desaparece assim que a primeira tecla é digitada: o usuário que revisa sua entrada não sabe mais o que foi solicitado.

Rótulos flutuantes, popularizados pelo Material Design, resolvem apenas parte do problema. O rótulo encolhe para caber no campo, um título longo acaba truncado e o contraste do texto reduzido geralmente é muito baixo. Reserve o espaço reservado para um exemplo de formatação ("06 12 34 56 78"), nunca como o único rótulo.

Duas exceções são toleradas

A regra de coluna única permite exceções quando dois campos representam um único conceito: código postal e cidade, ou data de validade e código de segurança. Exibi-los lado a lado em um computador permanece legível, desde que sejam apresentados um abaixo do outro em um dispositivo móvel.

Dispositivos móveis: Exiba o teclado correto para cada campo

Cada campo deve acionar o teclado correspondente aos dados esperados: um teclado numérico para um código postal, um teclado numérico para um número de telefone e um teclado com o símbolo "@" para um endereço de e-mail. Esse detalhe do código HTML evita que o usuário precise alternar manualmente entre os teclados para cada campo.

Esse detalhe costuma ser mal implementado, mesmo em grandes instalações. A auditoria de teclados sensíveis ao toque realizada pelo Baymard Institute mostrou que 54% dos principais sites de comércio eletrônico dos EUA não exibiam o teclado otimizado nos campos de número de telefone, código postal ou cartão de crédito, 79% dos usuários deixaram a correção automática ativada, o que corrompe a entrada de dados. Um endereço de e-mail "corrigido" pelo número de telefone representa uma oportunidade perdida.

Aqui estão as configurações a serem aplicadas aos campos mais usados ​​em um formulário de cadastro de leads em francês:

Evitar type='number' para um código postal ou um número SIRET: adiciona setas de incremento desnecessárias em um computador e pode remover o zero inicial de um código postal como 01000.

A armadilha do zoom do iPhone

No iOS, o Safari amplia automaticamente os campos com texto menor que 16 pixels. A página se desloca, o botão sai da tela e o usuário precisa reduzir o zoom manualmente. Defina o tamanho da fonte dos campos para um mínimo de 16 pixels: o problema desaparece.

Considere também os elementos clicáveis. Um botão de opção de 16px é difícil de tocar com o polegar; procure criar áreas clicáveis ​​de pelo menos 44 × 44px, tornando toda a linha da opção clicável, e não apenas o ponto.

Foco automático e preenchimento automático: ajudando sem forçar nada

O recurso de autocompletar do navegador economiza segundos preciosos; o foco automático, por outro lado, costuma atrapalhar mais do que ajudar. São duas configurações semelhantes com efeitos opostos.

O atributo autocomplete permite ao navegador preencher nome, e-mail, telefone e endereço com um toque. Num formulário de orçamento de seis campos, isso pode reduzir o preenchimento a dois ou três toques. Por outro lado, desativar o preenchimento automático “por segurança” num formulário de contato penaliza o usuário sem proteger nada.

O foco automático, que posiciona automaticamente o cursor no primeiro campo ao carregar a página, apresenta diversos problemas. O designer britânico Adam Silver identifica cinco deles: quebras de página inesperadas, bloqueio da rolagem do teclado, atalhos do navegador inacessíveis, um leitor de tela anunciando o rótulo do campo em vez do título da página e, no Android, um campo ativado sem que o teclado seja aberto.

Nossa recomendação é simples. Não direcione o foco automático para uma página que contenha qualquer coisa além do formulário (texto introdutório, argumentos, avaliações de clientes). Em um formulário com várias etapas, no entanto, mover o foco para o título da próxima etapa é útil: a pessoa que navega pelo teclado ou com um leitor de tela sabe imediatamente onde está.

Divida em etapas sem perder o leitor

Um formulário com várias etapas converte melhor quando cada tela faz apenas uma ou duas perguntas, o progresso é visível e a primeira pergunta exige o mínimo de esforço. Dividir o formulário em etapas não é uma solução mágica: se mal projetado, aumenta os cliques sem reduzir a carga de trabalho.

Três regras de design fazem toda a diferença:

• Comece com uma pergunta fácil e envolvente : o tipo de projeto ou necessidade é apresentado em cartões grandes e clicáveis. Os dados de contato são adicionados por último, depois que o usuário já investiu algum tempo.
• Demonstre progresso honesto "Passo 2 de 4" é melhor do que uma barra que se move rapidamente no início e depois estagna.
• Avançar automaticamente para a próxima tela após uma única escolha (botão de opção), mas nunca após a entrada de texto, onde o usuário deve manter o controle.

Para explorar este formato mais a fundo, o nosso exemplos comentados de formulários de cotação com várias etapas mostrar a ordem das perguntas de acordo com os setores. E exibir apenas as perguntas relevantes para cada perfil lógica condicional evita exibir o campo "Número de funcionários" para um indivíduo.

Esse particionamento pode ser feito sem a necessidade de um desenvolvedor de funcionalidades do Blastform : etapas, mapas visuais, barra de progresso e condições de exibição são configurados no editor.

Cores, contraste e acessibilidade

Um formulário acessível também é um formulário que se converte melhor: o texto deve oferecer um contraste de pelo menos 4,5:1 com o fundo, e as margens dos campos, pelo menos 3:1, de acordo com os critérios 1.4.3 e 1.4.11 das WCAG. Este segundo critério é o mais frequentemente negligenciado.

As tendências recentes de design gráfico privilegiam campos cinza muito claros sobre fundo branco, sem borda visível. Como resultado, na tela de um celular sob luz solar intensa, o usuário não consegue mais distinguir onde clicar. Uma borda cinza como a #767676 sobre fundo branco funciona bem; a muito comum #E0E0E0 fica muito aquém.

Três outros reflexos a adotar:

• Nunca indique um erro apenas pela cor. Uma borda vermelha não é suficiente para os aproximadamente 8% dos homens afetados por daltonismo: adicione um ícone e uma mensagem de texto.
• Associe cada rótulo ao seu campo correspondente (marcação label com o atributo forClicar no rótulo ativa o campo e o leitor de tela lê a pergunta correta.
• Mantenha o indicador de foco visível. Remover o contorno azul padrão sem substituí-lo torna o formulário inutilizável com um teclado.

A questão deixou de ser apenas uma questão de conveniência. Desde 28 de junho de 2025, a Lei Europeia de Acessibilidade impôs requisitos de acessibilidade a muitos serviços públicos online na União Europeia, incluindo comércio eletrônico e serviços bancários. Um formulário em conformidade evita que você precise refazê-lo posteriormente.

Do ponto de vista da identidade visual, alinhar as cores e a tipografia do formulário com as do seu site gera confiança: um formulário que se parece com um widget genérico de terceiros faz com que os usuários hesitem. Discutimos esse aspecto com mais detalhes em nosso artigo sobre personalizando um formulário sem programação.

Microcópia e mensagens de erro

Microtexto refere-se ao pequeno texto que circunda os campos: rótulos, textos de ajuda, mensagens de erro. Bem escrito, ele aborda a objeção antes que ela impeça o usuário de prosseguir. Mal escrito, transforma um simples erro de digitação em um abandono do processo.

Marque os campos opcionais, não os obrigatórios

O asterisco vermelho é um reflexo inato, mas muitos usuários não o percebem ou não entendem seu significado. A prática recomendada por diversos especialistas em UX é a oposta: considere tudo como obrigatório e adicione "(opcional)" apenas aos campos que não são. Se você tiver muitos campos opcionais, avalie a utilidade deles.

Valide no momento certo

De acordo com o Baymard Institute, 31% dos sites testados não possuem validação online dos campos, alguns usuários que possuem um indicador de erro o acionam muito cedo. Exibir a mensagem "endereço de e-mail inválido" quando a pessoa digitou apenas três letras gera frustração. O momento ideal é quando o usuário sai do campo. E assim que ele corrigir o erro, a mensagem deve desaparecer enquanto ele digita, sem precisar esperar que ele mude para outro campo.

Anotar os erros que ajudam

Compare "Formato inválido" e "O número deve conter 10 dígitos, por exemplo, 06 12 34 56 78". A segunda mensagem indica o que fazer. Coloque a mensagem diretamente abaixo do campo afetado, nunca apenas no topo do formulário, e mantenha todas as entradas já feitas após o erro.

Tranquilizador quando há um problema

O campo para número de telefone é um ponto crítico clássico em formulários de geração de leads. Uma frase útil colocada logo abaixo dele ("Entraremos em contato apenas para falar sobre o seu orçamento") resolve o problema assim que ele aparece. Isso é mais eficaz do que um rodapé genérico que ninguém lê.

O botão de enviar: o último medidor

O botão deve indicar claramente o que o usuário receberá, e não a ação técnica que ele realizará. "Receber meu orçamento" converte melhor do que "Enviar", porque reforça a promessa no momento da ação final.

A Unbounce relata diversos casos em que uma única palavra alterou o resultado. Em um portal de aluguel de escritórios B2B, substituir "Encomendar" por "Obter" no botão aumentou as conversões em 38% : o verbo estava, em última análise, se referindo ao que se recebe, e não ao que se deve fazer.

Em termos de design, quatro configurações são importantes:

• Tela cheia em dispositivos móveis, para que o polegar possa alcançá-lo sem precisar mirar.
• Uma cor que contraste com o resto da página. Não existe uma "cor ideal": o que importa é o contraste com o ambiente, e não o vermelho ou o verde em si.
• Nunca desativado ou acinzentado enquanto o formulário estiver incompleto, o usuário não entenderá o que está faltando. Permita que ele clique e indique os campos que deseja preencher.
• Estado de carregamento após o clique (“Envio em andamento…”), evite envios duplicados e leads duplicados em seu CRM.

Essas otimizações de design são adicionais às focadas no custo de aquisição. Se sua principal preocupação é o orçamento, confira nosso artigo sobre a redução do custo por lead graças à conversão de formulários vincula essas configurações às suas campanhas.

Melhores práticas para o design de formulários: a grade de auditoria em 10 minutos

Aqui está a tabela prometida no início do artigo. Pegue seu celular, abra o formulário no modo de navegação anônima e marque cada caixa. Cada "não" representa um ponto de atrito que você pode eliminar esta semana.

1. O formulário cabe em uma única coluna no celular.
2. Cada campo possui um rótulo visível acima dele, que permanece exibido durante a entrada de dados.
3. O campo de e-mail abre um teclado com o símbolo "@" e não utiliza letras maiúsculas.
4. Os campos de número de telefone e código postal abrem um teclado numérico.
5. A página não amplia quando você toca em um campo (tamanho mínimo da fonte: 16px).
6. O navegador oferece a opção de preencher automaticamente o nome, o e-mail e o número de telefone.
7. Nenhum campo recebe o foco automaticamente quando a página é carregada.
8. Em um formulário com várias etapas, o progresso é exibido ("Etapa X de Y").
9. As bordas dos campos permanecem visíveis mesmo sob luz máxima, ao ar livre.
10. Um erro intencional (e-mail sem o @) exibe uma mensagem clara abaixo do campo, e não apenas uma borda vermelha.
11. O botão descreve o benefício (“Receba…”, “Obtenha…”) e ocupa toda a largura.
12. Após clicar, um status de carregamento e, em seguida, uma confirmação clara são exibidos.

Uma pontuação de 10 em 12 ou superior significa que o design provavelmente não é o seu principal obstáculo. Abaixo de 8, comece pelos pontos 3, 4 e 5: estes são os mais rápidos de corrigir e afetam todos os visitantes que acessam o site por dispositivos móveis.

Para começar com uma base que já atenda à maioria desses requisitos, navegue pelo nosso modelos de formulários B2B prontos para uso, ou veja como outras equipes fizeram isso em nosso estudo de caso sobre como aumentar a taxa de conversão.

Perguntas frequentes

Podemos substituir os rótulos pelo texto de exemplo nos campos?

Não. O texto de exemplo (espaço reservado) desaparece assim que a primeira tecla é pressionada, impedindo o usuário de verificar o que digitou, e sua cor cinza clara geralmente oferece contraste insuficiente. Mantenha um rótulo visível acima do campo e reserve o espaço reservado para um exemplo de formatação.

Um formulário de duas colunas é realmente menos eficiente?

Na maioria dos casos, sim. Um estudo da CXL com 702 participantes mediu uma taxa de preenchimento 13% mais rápida para campos de coluna única. As únicas exceções razoáveis ​​são pares de campos relacionados, como código postal e cidade, e apenas em computadores.

O foco automático deve ser ativado no primeiro campo?

Não em uma página que contenha qualquer coisa além do formulário. O foco automático faz com que a página salte, bloqueia a rolagem do teclado e confunde os leitores de tela. Ele só é útil para focar no título da nova etapa em um formulário com várias etapas.

Qual a melhor cor para um botão de formulário?

Não existe uma regra universal. O que importa é o contraste do botão com o resto da página e a legibilidade do seu texto (no mínimo 4,5:1). Um botão laranja num site laranja é menos visível do que um botão azul no mesmo site.

Formulários com várias etapas sempre convertem melhor?

Não, a menos que seja bem projetado: uma ou duas perguntas por tela, uma primeira pergunta fácil, progresso visível e os dados de contato por último. Um formulário com três campos não tem motivo para ser dividido.

Deseja aplicar essas boas práticas sem mexer no código? Teste Blastform gratuitamente ou agende uma demonstração para analisarmos seu formulário atual com nossa equipe.