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

# Mejores prácticas de diseño de formularios para WhatsApp Flows

> Diseña formularios de HubSpot que se rendericen limpiamente como WhatsApp Flows: límites de etiquetas, elección del tipo de pregunta correcto y evitar etiquetas cortadas en iPhone.

Cada campo de tu formulario de HubSpot se convierte en un componente en un WhatsApp Flow, y Meta limita cuánto texto de etiqueta puede mostrar cada componente. Las etiquetas más largas que el límite se cortan en el teléfono del cliente, más notablemente en iPhone.

El Flow igualmente se publica, y las respuestas siguen llegando a HubSpot correctamente. La única consecuencia es visual, por eso es fácil pasarlo por alto hasta que un cliente real abre el formulario.

Esta página cubre cómo construir formularios de HubSpot que se lean bien en cada dispositivo.

## La versión corta

<CardGroup cols={2}>
  <Card title="Mantén las etiquetas cortas" icon="type">
    Apunta a 20 caracteres o menos en campos de desplegable y texto. Eso son aproximadamente tres palabras cortas.
  </Card>

  <Card title="Usa botones de radio para listas cortas" icon="circle-dot">
    Menos de ocho opciones se lee mejor como botones de radio que como un desplegable, y te da una etiqueta más larga.
  </Card>

  <Card title="Pon las preguntas largas encima del campo" icon="layers">
    Usa un elemento de texto enriquecido para la pregunta y mantén la etiqueta del campo en sí corta.
  </Card>

  <Card title="Prueba en un iPhone" icon="smartphone">
    Android es más indulgente. Si se lee correctamente en iPhone, se lee correctamente en todas partes.
  </Card>
</CardGroup>

## Qué le pasa a las etiquetas de tus campos

Cada tipo de campo de HubSpot mapea a un componente de WhatsApp Flow, y cada componente tiene su propia asignación de etiqueta. Los campos que la gente usa más son los más ajustados.

| Campo de HubSpot      | Se renderiza como | Asignación de etiqueta |
| --------------------- | ----------------- | ---------------------- |
| Selección desplegable | Desplegable       | 20 caracteres          |
| Texto de una línea    | Entrada de texto  | 20 caracteres          |
| Texto multilínea      | Área de texto     | 20 caracteres          |
| Selección de radio    | Botones de radio  | 30 caracteres          |
| Múltiples casillas    | Grupo de casillas | 30 caracteres          |
| Selector de fecha     | Selector de fecha | 40 caracteres          |
| Casilla única         | Aceptación        | 120 caracteres         |
| Texto enriquecido     | Texto enriquecido | Sin límite práctico    |

Las etiquetas de opción dentro de un desplegable, grupo de radio o grupo de casillas obtienen 30 caracteres cada una, con 300 caracteres disponibles para una descripción opcional debajo.

<Note>
  Estas son orientaciones más que límites estrictos. El propio generador de Flow de Meta muestra una advertencia, no un error, y un Flow con etiquetas largas se valida y se publica normalmente. Nada se rompe y no se pierden datos. La etiqueta simplemente se acorta en pantalla.
</Note>

## Por qué se ve bien en un teléfono y mal en otro

Los recuentos de caracteres anteriores son una guía, no un umbral preciso. Lo que realmente decide si una etiqueta se corta es cuánto espacio tiene el texto una vez que el dispositivo ha tomado su parte para el relleno, el chevron en un desplegable y la propia configuración de tamaño de fuente del cliente.

Eso varía mucho. La misma pregunta de 33 caracteres puede renderizarse completa en un dispositivo Android, perder su última palabra en otro y cortarse a mitad de palabra en dos líneas en un iPhone.

Las consecuencias prácticas:

* **iPhone es la superficie más estricta.** Diseña para él y el resto seguirá.
* **Probar en un dispositivo no es suficiente.** Un formulario que se ve correcto en tu propio teléfono aún puede cortarse para una gran parte de tu audiencia.
* **Los scripts no latinos y los caracteres anchos se quedan sin espacio antes.** Si estás recopilando en árabe, hindi, tailandés o turco, trata los recuentos de caracteres anteriores como generosos y apunta a menos.

## Elegir el tipo de pregunta correcto

La mayoría de problemas de corte vienen de usar un desplegable donde un desplegable nunca era el control correcto.

<AccordionGroup>
  <Accordion title="Dos a siete opciones: usa botones de radio">
    Configura el campo como **Selección de radio** en HubSpot. Obtienes una etiqueta de 30 caracteres en lugar de 20, la etiqueta se sitúa sobre las opciones como un bloque de texto que se ajusta en lugar de comprimirse dentro del control, y el cliente responde con un toque en lugar de abrir, desplazar, seleccionar, cerrar.

    Esta es la propia recomendación de Meta, y resuelve la mayoría de las etiquetas cortadas por sí sola.
  </Accordion>

  <Accordion title="Ocho o más opciones: usa un desplegable">
    Las listas largas pertenecen a un desplegable. Una lista de países o un catálogo de productos como veinte botones de radio es un muro de texto.

    Un desplegable admite hasta 200 opciones. Los grupos de radio y casillas tienen un límite de 20, así que cualquier cosa más larga tiene que ser un desplegable independientemente de cómo se lea la etiqueta.
  </Accordion>

  <Accordion title="Varias respuestas: usa casillas">
    **Múltiples casillas** en HubSpot se convierte en un grupo de casillas, con la misma asignación de etiqueta de 30 caracteres que los botones de radio y el mismo límite de 20 opciones.
  </Accordion>

  <Accordion title="Sí o no: usa botones de radio, no un desplegable">
    Un desplegable de dos opciones es el peor caso: la asignación de etiqueta más ajustada en la lista más corta posible, y dos toques para responder una pregunta que merece uno.
  </Accordion>
</AccordionGroup>

## Escribir etiquetas que quepan

Un WhatsApp Flow es una conversación, no un formulario en papel. Las etiquetas cortas se leen mejor aquí incluso donde hay espacio para más.

| En lugar de                                      | Prueba             |
| ------------------------------------------------ | ------------------ |
| ¿Cuál es tu método de contacto preferido?        | Método de contacto |
| ¿En cuál de nuestros servicios estás interesado? | Servicio           |
| ¿Cuál es tu presupuesto anual aproximado?        | Presupuesto anual  |
| Selecciona tu fecha de cita preferida            | Fecha preferida    |

Unas cuantas reglas que mantienen las etiquetas ajustadas sin perder significado:

* Elimina la cortesía. "Por favor selecciona tu" y "Cuál es tu" no añaden nada en un teléfono.
* Usa un sustantivo, no una pregunta, siempre que la respuesta sea obvia por las opciones.
* Mueve el detalle al texto de ayuda del campo o a la descripción de la opción en lugar de a la etiqueta.
* Pon el contexto compartido en el encabezado de pantalla en lugar de repetirlo en cada etiqueta.

## Cuando la pregunta genuinamente necesita ser larga

Algunas preguntas no pueden acortarse sin cambiar lo que estás preguntando. Una pregunta de calificación, una pregunta de consentimiento o cualquier cosa con un requisito de redacción legal necesita su texto completo.

Para estas, pon la pregunta encima del campo y mantén la etiqueta del campo mínima:

<Steps>
  <Step title="Añade un elemento de texto enriquecido">
    En el editor de formularios de HubSpot, arrastra un elemento de texto enriquecido a su posición e introduce la pregunta completa.
  </Step>

  <Step title="Añade el campo debajo">
    Coloca el desplegable, grupo de radio o campo de texto directamente debajo.
  </Step>

  <Step title="Dale al campo una etiqueta mínima">
    Un único punto funciona. La pregunta ya está encima, así que la etiqueta no está haciendo ningún trabajo.
  </Step>

  <Step title="Repite para cada pregunta larga">
    Alterna texto enriquecido y campo bajando por el formulario para que el patrón se mantenga consistente.
  </Step>
</Steps>

El resultado se lee como una pregunta con un control de respuesta debajo, que es lo que los clientes esperan, y se renderiza idénticamente en cada dispositivo porque el texto enriquecido no tiene restricción de longitud.

<Warning>
  Usa este patrón solo donde lo necesites. Cada elemento de texto enriquecido es un componente adicional, y una pantalla contiene un máximo de 50. En formularios muy grandes Flowella mantiene cada entrada y descarta bloques de texto enriquecido del final de la pantalla para mantenerse bajo el límite de Meta, así que algún texto de pregunta puede no aparecer en pantalla. Mezclar el patrón en un formulario donde la mayoría de etiquetas ya son cortas también hace que el diseño se vea desigual.
</Warning>

<Note>
  Si ya tienes formularios de HubSpot usando este patrón, **re-sincronízalos** desde la [página de detalle de Flows](/es/app/flows#form-detail) para publicar el texto enriquecido a Meta. Las ejecuciones de sincronización antes de este cambio solo recogían las etiquetas de los campos, así que el texto de las preguntas faltaba en el Flow.
</Note>

## Cuántas preguntas hacer

La finalización cae bruscamente a medida que los formularios se alargan, y WhatsApp es una superficie más impaciente que una página web.

* **Tres o cuatro preguntas por formulario** es un buen objetivo para un primer contacto. Pregunta el resto después en la conversación.
* **Una tarea por pantalla.** Si estás recopilando una dirección y una preferencia de entrega, usa dos pantallas.
* **Diez opciones por pantalla como mucho.** Más que eso y los clientes dejan de leer y empiezan a adivinar.
* **Divide los formularios largos en dos.** Un formulario de calificación corto seguido de un segundo formulario condicional suele ganar a uno largo, y te permite ramificar según la primera respuesta.

Consulta [Captura y calificación de leads](/es/hubspot/workflows/lead-capture-qualify) para un ejemplo trabajado del patrón de dos formularios.

## Antes de sincronizar

<Steps>
  <Step title="Lee cada etiqueta tal como aparecerá">
    Cuenta los caracteres en tus etiquetas de desplegable y campo de texto. Cualquier cosa por encima de 20 está en riesgo.
  </Step>

  <Step title="Comprueba tus tipos de campo">
    Cualquier desplegable con menos de ocho opciones es candidato para botones de radio.
  </Step>

  <Step title="Sincroniza el formulario y ábrelo en Meta">
    Desde la página de detalle de [Flows](/es/app/flows), sincroniza el Flow y ábrelo en Meta Business Suite. La vista previa del generador de Flows marca las etiquetas que probablemente se acorten.
  </Step>

  <Step title="Envíalo a un iPhone real">
    La vista previa del generador es una guía. Un dispositivo es la única prueba verdadera, e iPhone es la más estricta.
  </Step>

  <Step title="Comprueba WhatsApp Web si tu audiencia lo usa">
    Los controles se renderizan de forma diferente en un portátil. Consulta [WhatsApp Web y Escritorio](/es/app/whatsapp-web-desktop).
  </Step>
</Steps>

## Relacionado

<CardGroup cols={2}>
  <Card title="Flows" icon="file-text" href="/es/app/flows">
    Sincroniza tus formularios de HubSpot a WhatsApp Flows y comprueba su estado.
  </Card>

  <Card title="WhatsApp Web y Escritorio" icon="monitor" href="/es/app/whatsapp-web-desktop">
    Cómo se renderizan los Flows cuando los clientes responden desde un portátil.
  </Card>

  <Card title="Guías de workflows" icon="book-open" href="/es/hubspot/workflow-guides">
    Recetas de extremo a extremo que ponen estos patrones a trabajar.
  </Card>

  <Card title="Fallos de sincronización con HubSpot" icon="bug" href="/es/troubleshooting/hubspot-sync-failures">
    Diagnostica formularios que no se sincronizan o envíos que nunca llegan.
  </Card>
</CardGroup>

Meta publica las restricciones subyacentes en su propia documentación. Para la referencia completa de componentes, consulta [Componentes de WhatsApp Flows](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/components), y para la guía de diseño de Meta consulta [Mejores prácticas de Flows](https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/bestpractices).
