Boas práticas de design de formulário para WhatsApp Flows
Desenhe formulários HubSpot que renderizam de forma limpa como WhatsApp Flows: limites de rótulos, escolha do tipo de pergunta certo e evitar rótulos cortados no iPhone.
Cada campo do seu formulário HubSpot torna-se um componente num WhatsApp Flow, e a Meta limita quanto texto de rótulo cada componente pode mostrar. Rótulos mais longos que o limite ficam cortados no telemóvel do cliente, sobretudo no iPhone.O Flow continua a ser publicado, e as respostas ainda chegam corretamente ao HubSpot. A única consequência é visual, razão pela qual isto é fácil de passar despercebido até que um cliente real abra o formulário.Esta página cobre como construir formulários HubSpot que se leiam bem em qualquer dispositivo.
Cada tipo de campo HubSpot mapeia para um componente do WhatsApp Flow, e cada componente tem a sua própria alocação de rótulo. Os campos que mais se usam são os mais apertados.
Campo HubSpot
Renderiza como
Alocação de rótulo
Seleção dropdown
Dropdown
20 caracteres
Texto de linha única
Entrada de texto
20 caracteres
Texto multilinha
Área de texto
20 caracteres
Seleção rádio
Botões de rádio
30 caracteres
Múltiplas caixas de seleção
Grupo de checkboxes
30 caracteres
Seletor de data
Seletor de data
40 caracteres
Caixa de seleção única
Opt-in
120 caracteres
Rich text
Rich text
Sem limite prático
Os rótulos de opção dentro de um dropdown, grupo de rádio ou grupo de checkboxes recebem 30 caracteres cada, com 300 caracteres disponíveis para uma descrição opcional por baixo.
Estes são orientações e não limites rígidos. O próprio construtor de Flows da Meta mostra um aviso, não um erro, e um Flow com rótulos longos valida e publica normalmente. Nada está partido, e nenhum dado se perde. O rótulo é simplesmente encurtado no ecrã.
Os contadores de caracteres acima são um guia, não um limite preciso. O que na realidade decide se um rótulo é cortado é quanto espaço o texto tem depois de o dispositivo ter tirado a sua parte para preenchimento, o chevron num dropdown e a configuração de tamanho de fonte do próprio cliente.Isso varia muito. A mesma pergunta com 33 caracteres pode aparecer inteira num telemóvel Android, perder a última palavra noutro, e ser cortada a meio de uma palavra em duas linhas num iPhone.As consequências práticas:
O iPhone é a superfície mais rigorosa. Desenhe para ele e o resto segue.
Testar num só dispositivo não chega. Um formulário que parece correto no seu telemóvel pode ainda estar cortado para uma grande parte da sua audiência.
Scripts não latinos e caracteres largos ficam sem espaço mais depressa. Se está a recolher em árabe, hindi, tailandês ou turco, trate os contadores de caracteres acima como generosos e aponte para valores mais baixos.
A maioria dos problemas de corte vem de usar um dropdown onde um dropdown nunca foi o controlo certo.
Duas a sete opções: use botões de rádio
Defina o campo como Seleção rádio no HubSpot. Obtém um rótulo de 30 caracteres em vez de 20, o rótulo fica acima das opções como um bloco de texto que quebra em linhas em vez de estar espremido dentro do controlo, e o cliente responde com um toque em vez de abrir, deslocar, selecionar, fechar.Esta é a própria recomendação da Meta e resolve a maioria dos rótulos cortados por si só.
Oito ou mais opções: use um dropdown
Listas longas pertencem num dropdown. Uma lista de países ou um catálogo de produtos com vinte botões de rádio é uma parede de texto.Um dropdown suporta até 200 opções. Grupos de rádio e checkbox estão limitados a 20, portanto qualquer coisa mais longa tem de ser um dropdown, independentemente de como se lê o rótulo.
Várias respostas: use checkboxes
Múltiplas caixas de seleção no HubSpot torna-se num grupo de checkboxes, com a mesma alocação de rótulo de 30 caracteres que os botões de rádio e o mesmo limite de 20 opções.
Sim ou não: use botões de rádio, não um dropdown
Um dropdown de duas opções é o pior caso: a alocação de rótulo mais apertada na lista mais curta possível, e dois toques para responder a uma pergunta que merece um.
Algumas perguntas não podem ser encurtadas sem alterar o que está a perguntar. Uma pergunta de qualificação, uma pergunta de consentimento ou qualquer coisa com um requisito de redação legal precisa do seu texto completo.Para essas, coloque a pergunta acima do campo e mantenha o rótulo do campo mínimo:
1
Adicione um elemento de rich text
No editor de formulários HubSpot, arraste um elemento de rich text para a posição e escreva a pergunta completa.
2
Adicione o campo por baixo
Coloque o dropdown, grupo de rádio ou campo de texto diretamente por baixo.
3
Dê ao campo um rótulo mínimo
Um único ponto final funciona. A pergunta já está acima dele, portanto o rótulo não faz nenhum trabalho.
4
Repita para cada pergunta longa
Alterne rich text e campo ao longo do formulário para que o padrão se mantenha consistente.
O resultado lê-se como uma pergunta com um controlo de resposta por baixo, que é o que os clientes esperam, e renderiza-se identicamente em todos os dispositivos porque o rich text não tem restrição de comprimento.
Use este padrão apenas onde precisa. Cada elemento de rich text é um componente extra e um ecrã suporta um máximo de 50. Em formulários muito grandes, o Flowella mantém todas as entradas e descarta blocos de rich text do fim do ecrã para se manter abaixo do limite da Meta, portanto algum texto de pergunta pode não aparecer no ecrã. Misturar o padrão num formulário onde a maioria dos rótulos já é curto também torna o layout desigual.
Se já tem formulários HubSpot a usar este padrão, ressincronize-os a partir da página de detalhe Flows para publicar o texto rich text para a Meta. Execuções de sincronização anteriores a esta alteração apenas captavam rótulos de campos, portanto o texto de pergunta estava em falta do Flow.
A conclusão cai acentuadamente à medida que os formulários se tornam mais longos, e o WhatsApp é uma superfície mais impaciente do que uma página web.
Três ou quatro perguntas por formulário é um bom alvo para um primeiro contacto. Faça o resto mais tarde na conversa.
Uma tarefa por ecrã. Se estiver a recolher um endereço e uma preferência de entrega, use dois ecrãs.
Dez opções por ecrã no máximo. Mais do que isso e os clientes deixam de ler e começam a adivinhar.
Divida formulários longos em dois. Um formulário curto de qualificação seguido de um segundo formulário condicional geralmente supera um único longo, e permite-lhe ramificar na primeira resposta.
Conte os caracteres nos rótulos dos seus campos de dropdown e texto. Qualquer coisa acima de 20 está em risco.
2
Verifique os tipos dos seus campos
Qualquer dropdown com menos de oito opções é candidato a botões de rádio.
3
Sincronize o formulário e abra-o na Meta
A partir da página de detalhe Flows, sincronize o Flow e abra-o no Meta Business Suite. A pré-visualização do construtor de Flows sinaliza rótulos que provavelmente serão encurtados.
4
Envie-o para um iPhone real
A pré-visualização do construtor é um guia. Um dispositivo é o único verdadeiro teste, e o iPhone é o mais rigoroso.
5
Verifique no WhatsApp Web se a sua audiência o usa
Os controlos renderizam-se de forma diferente num portátil. Consulte WhatsApp Web e Desktop.
Sincronize os seus formulários HubSpot com WhatsApp Flows e verifique o seu estado.
WhatsApp Web e Desktop
Como os Flows renderizam quando os clientes respondem a partir de um portátil.
Guias de fluxo de trabalho
Receitas de ponta a ponta que colocam estes padrões em funcionamento.
Falhas de sincronização HubSpot
Diagnostique formulários que não sincronizam ou submissões que nunca chegam.
A Meta publica as restrições subjacentes na sua própria documentação. Para a referência completa dos componentes, consulte Componentes de WhatsApp Flows, e para as orientações de design da Meta consulte Boas práticas de Flows.
Última modificação em 19 de setembro de 2026
Esta página foi útil?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.