> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.flowella.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

## A versão curta

<CardGroup cols={2}>
  <Card title="Mantenha rótulos curtos" icon="type">
    Aponte para 20 caracteres ou menos em campos de dropdown e texto. Isso são cerca de três palavras curtas.
  </Card>

  <Card title="Use botões de rádio para listas curtas" icon="circle-dot">
    Menos de oito opções lê-se melhor como botões de rádio do que como dropdown, e dá-lhe um rótulo mais longo.
  </Card>

  <Card title="Coloque perguntas longas acima do campo" icon="layers">
    Use um elemento de rich text para a pergunta e mantenha o rótulo do campo curto.
  </Card>

  <Card title="Teste num iPhone" icon="smartphone">
    O Android é mais tolerante. Se se ler corretamente no iPhone, lê-se corretamente em todo o lado.
  </Card>
</CardGroup>

## O que acontece aos seus rótulos de campo

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.

<Note>
  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ã.
</Note>

## Porque parece bem num telemóvel e mal noutro

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.

## Escolher o tipo de pergunta certo

A maioria dos problemas de corte vem de usar um dropdown onde um dropdown nunca foi o controlo certo.

<AccordionGroup>
  <Accordion title="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ó.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

## Escrever rótulos que caibam

Um WhatsApp Flow é uma conversa, não um formulário em papel. Rótulos curtos leem-se melhor aqui, mesmo onde há espaço para mais.

| Em vez de                                     | Experimente        |
| --------------------------------------------- | ------------------ |
| Qual é o seu método de contacto preferido?    | Método de contacto |
| Em qual dos nossos serviços está interessado? | Serviço            |
| Qual é o seu orçamento anual aproximado?      | Orçamento anual    |
| Selecione a data preferida para o agendamento | Data preferida     |

Algumas regras que mantêm os rótulos apertados sem perder significado:

* Elimine o andaime educado. "Por favor, selecione o seu" e "Qual é o seu" não acrescentam nada num telemóvel.
* Use um substantivo, não uma pergunta, sempre que a resposta seja óbvia a partir das opções.
* Coloque detalhes no texto de ajuda do campo ou numa descrição de opção em vez do rótulo.
* Coloque contexto partilhado no cabeçalho do ecrã em vez de o repetir em cada rótulo.

## Quando a pergunta precisa mesmo de ser longa

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:

<Steps>
  <Step title="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.
  </Step>

  <Step title="Adicione o campo por baixo">
    Coloque o dropdown, grupo de rádio ou campo de texto diretamente por baixo.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Repita para cada pergunta longa">
    Alterne rich text e campo ao longo do formulário para que o padrão se mantenha consistente.
  </Step>
</Steps>

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.

<Warning>
  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.
</Warning>

<Note>
  Se já tem formulários HubSpot a usar este padrão, **ressincronize-os** a partir da [página de detalhe Flows](/pt/app/flows#form-detail) 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.
</Note>

## Quantas perguntas fazer

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.

Consulte [Captação e qualificação de leads](/pt/hubspot/workflows/lead-capture-qualify) para um exemplo trabalhado do padrão de dois formulários.

## Antes de sincronizar

<Steps>
  <Step title="Leia cada rótulo como aparecerá">
    Conte os caracteres nos rótulos dos seus campos de dropdown e texto. Qualquer coisa acima de 20 está em risco.
  </Step>

  <Step title="Verifique os tipos dos seus campos">
    Qualquer dropdown com menos de oito opções é candidato a botões de rádio.
  </Step>

  <Step title="Sincronize o formulário e abra-o na Meta">
    A partir da página de detalhe [Flows](/pt/app/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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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](/pt/app/whatsapp-web-desktop).
  </Step>
</Steps>

## Relacionado

<CardGroup cols={2}>
  <Card title="Flows" icon="file-text" href="/pt/app/flows">
    Sincronize os seus formulários HubSpot com WhatsApp Flows e verifique o seu estado.
  </Card>

  <Card title="WhatsApp Web e Desktop" icon="monitor" href="/pt/app/whatsapp-web-desktop">
    Como os Flows renderizam quando os clientes respondem a partir de um portátil.
  </Card>

  <Card title="Guias de fluxo de trabalho" icon="book-open" href="/pt/hubspot/workflow-guides">
    Receitas de ponta a ponta que colocam estes padrões em funcionamento.
  </Card>

  <Card title="Falhas de sincronização HubSpot" icon="bug" href="/pt/troubleshooting/hubspot-sync-failures">
    Diagnostique formulários que não sincronizam ou submissões que nunca chegam.
  </Card>
</CardGroup>

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](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/components), e para as orientações de design da Meta consulte [Boas práticas de Flows](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/bestpractices).