Testas o formulário no computador e parece perfeito. Largura total, duas colunas, espaçoso. Submetes um teste no telemóvel e percebes logo que algo está errado. Os campos são minúsculos. O teclado tapa metade do formulário. Tocas no campo errado. A experiência toda parece estragada.
Metade dos teus visitantes está no telemóvel. Se o formulário não for responsivo, estás a perder metade das submissões. Este artigo explica como desenhar formulários que funcionam em telemóveis, tablets e computadores.
Os formulários para telemóvel são diferentes dos do computador
Os utilizadores de telemóvel preenchem formulários de forma diferente dos de computador. No computador, tens espaço. Podes usar layouts de várias colunas. Podes pôr as etiquetas ao lado dos campos. No telemóvel, cada pixel conta.
Os teclados dos telemóveis são enormes. Quando o teclado abre, tapa metade do ecrã. O formulário desloca-se. O utilizador perde o contexto. Um botão que estava visível fica escondido atrás do teclado.
As áreas de toque têm de ser maiores. Uma área clicável de 14 por 14 píxeis funciona bem com um rato. Um dedo precisa de pelo menos 48 por 48 píxeis ou o utilizador falha.
Os utilizadores de telemóvel estão em redes instáveis. Cada carregamento extra de formulário ou imagem acrescenta tempo. A velocidade importa mais do que no computador.
O layout de formulário numa só coluna
O formulário responsivo mais seguro é o de uma só coluna. Um campo por linha, seja qual for o tamanho do ecrã.
Os layouts de uma só coluna são simples, funcionam em todos os ecrãs, criam uma experiência consistente e são muito previsíveis. A principal desvantagem é que os formulários parecem mais longos no computador, exigindo mais deslocação.
A maioria dos formulários deve ter uma só coluna. Se o teu formulário tem cinco campos, uma só coluna é na verdade mais curta do que um layout de duas colunas no computador. O utilizador desloca-se menos e vê mais contexto.
Para criar um layout de uma só coluna, usa input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Isto empilha tudo na vertical em todos os pontos de quebra.
Layouts de duas colunas no computador, uma coluna no telemóvel
Se queres usar o espaço horizontal em ecrãs grandes, usa uma grelha com .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } e uma media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. No computador isto cria duas colunas, e no telemóvel empilha numa só, mantendo o layout simples e responsivo.
Agrupa apenas campos realmente relacionados. Um campo "First Name" e um campo "Last Name" lado a lado fazem sentido. Um campo "Street Address" e um campo "Country" lado a lado não fazem.
Áreas de toque e design à medida do dedo
A área de toque mínima no telemóvel é de 44 por 44 píxeis (segundo as diretrizes de design de uma das maiores plataformas móveis) ou 48 por 48 píxeis (Android). Aponta para pelo menos 44.
O tamanho das áreas de toque aplica-se aos campos de entrada, que têm de ser altos o suficiente para tocar com facilidade (40 a 50 píxeis é bom), às caixas de seleção e botões de opção, que por defeito têm 13 por 13 píxeis e devem ser aumentados para pelo menos 44 por 44 com CSS ou JavaScript, aos botões, que devem ter pelo menos 44 por 44 píxeis com preenchimento acrescentado, e às etiquetas, que também precisam de 44 por 44 píxeis se forem clicáveis através do atributo for. Por vezes a etiqueta e o campo juntos formam a área de toque completa.
Para tornar os campos de entrada maiores e mais fáceis de tocar, usa input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. O preenchimento torna o campo mais alto e melhora a facilidade de toque.
Gestão do teclado
No telemóvel, o teclado do navegador tapa a metade inferior do ecrã. Se o formulário estiver no fundo da página, o botão de submeter fica escondido. O utilizador tem de se deslocar para baixo ou fechar o teclado para ver o botão.
Mantém o formulário perto do topo da página. Ou coloca o botão de submeter também no topo, além do fundo. Não escondas botões críticos debaixo do teclado.
O tipo de teclado também importa. Num campo de email, usa <input type="email"> para mostrar um teclado de email com a tecla @. Num campo de telefone, usa <input type="tel"> para mostrar um teclado numérico. Para entrada numérica, usa <input type="number"> para mostrar um teclado de números. Usar o tipo de campo correto deixa o navegador tratar da escolha do teclado automaticamente.
Quando o utilizador toca num campo, o navegador desloca esse campo para a vista. Isto é bom. O campo está visível quando precisam de escrever. Mas por vezes pode passar por cima de outro contexto. Testa o formulário num telemóvel real para ver o comportamento.
Posição das etiquetas no telemóvel
No computador, as etiquetas podem ficar por cima, ao lado ou dentro dos campos. No telemóvel, por cima é quase sempre o melhor.
Uma etiqueta por cima do campo é clara. O utilizador vê a etiqueta e depois o campo. Num ecrã estreito, uma etiqueta ao lado do campo desperdiça espaço horizontal. Um texto de exemplo dentro do campo desaparece quando começas a escrever.
Boa prática: coloca as etiquetas por cima dos campos. Sempre.
<label for="email">Email</label>
<input type="email" id="email">
Espaçamento e preenchimento
Os formulários responsivos precisam de mais espaçamento no telemóvel, não menos. O teu instinto é comprimir tudo para caber no ecrã. Luta contra esse instinto.
Usa preenchimentos e margens generosos: pelo menos 1rem (16 píxeis) entre campos, pelo menos 0.75rem (12 píxeis) em todos os lados no preenchimento dos campos e pelo menos 1rem (16 píxeis) em todos os lados no preenchimento dos botões. Um espaçamento generoso torna os formulários mais fáceis de usar, reduz toques falhados, melhora a legibilidade e, no telemóvel, o espaço para respirar vale mais do que o espaço de ecrã.
Tamanho do texto no telemóvel
Usa pelo menos 16 píxeis nos campos de entrada. Texto mais pequeno obriga os utilizadores a fazer zoom ou a semicerrar os olhos. 16 píxeis é o valor por defeito e funciona.
As etiquetas podem ser mais pequenas, cerca de 14 píxeis. Mas os campos de entrada devem ter 16 píxeis no mínimo.
Alguns navegadores fazem zoom automático quando tocas num campo com menos de 16 píxeis, fazendo o formulário saltar e ampliar inesperadamente. Usa input { font-size: 16px; } para evitar este comportamento.
Erros comuns em formulários responsivos
Usar um layout de duas colunas em todos os tamanhos de ecrã
Os formulários ficam espremidos no telemóvel. Os campos são minúsculos. As etiquetas empilham-se de forma estranha. Empilha sempre numa só coluna nos pontos de quebra mais pequenos.
Fazer áreas de toque pequenas demais
As caixas de seleção, os botões de opção e os botões têm de ter pelo menos 44 por 44 píxeis. Testa num telemóvel real. Se tens de te concentrar para tocar, é pequeno demais.
Usar o texto de exemplo como única etiqueta
Quando o utilizador começa a escrever, o texto de exemplo desaparece. Esquecem-se para que serve o campo. Usa sempre um elemento label a sério. Mantém o texto de exemplo se quiseres, mas nunca dependas só dele.
Colocar o formulário no fundo de uma página longa
O utilizador desce até um formulário de contacto, toca no campo de email e o teclado do telemóvel tapa o formulário. Não consegue ver o que escreve nem chegar ao botão de submeter. Põe os formulários perto do topo ou garante que cabem no ecrã com o teclado aberto.
Não testar em dispositivos móveis reais
O teu navegador de computador tem um modo de vista móvel. É útil para uma verificação rápida. Mas não mostra como o formulário funciona de facto num telemóvel. Testa em dispositivos reais. Pede um telemóvel emprestado se não tiveres um.
Técnicas de formulários responsivos
CSS Grid para layouts flexíveis
Usa .form-group { display: grid; gap: 0.5rem; } e .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Os valores auto-fit e minmax criam um layout que flui consoante o espaço disponível, deixando os campos empilharem-se em larguras estreitas e ficarem lado a lado em larguras grandes.
Flexbox para layouts de botões
Usa .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } e .form-actions button { flex: 1; min-width: 150px; }. Os botões ficam lado a lado no computador, passam para várias linhas no telemóvel e cada botão cresce para ocupar o espaço disponível.
Media queries para pontos de quebra específicos
Usa @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } para forçar um layout de uma só coluna em ecrãs com menos de 480 píxeis.
Como os formulários da WEMASY se adaptam a todos os tamanhos de ecrã
O criador de formulários da WEMASY cria formulários responsivos automaticamente. Crias no computador e o telemóvel já fica tratado. Os formulários empilham-se numa só coluna nos telemóveis. As áreas de toque têm o tamanho certo para telemóvel. As etiquetas e os campos têm o espaçamento adequado. Sem trabalho extra.
Vê como funciona a adaptação dos formulários no teu plano WEMASY.