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.
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.
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.
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.
La mayoría de problemas de corte vienen de usar un desplegable donde un desplegable nunca era el control correcto.
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.
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.
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.
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.
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:
1
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.
2
Añade el campo debajo
Coloca el desplegable, grupo de radio o campo de texto directamente debajo.
3
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.
4
Repite para cada pregunta larga
Alterna texto enriquecido y campo bajando por el formulario para que el patrón se mantenga consistente.
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.
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.
Si ya tienes formularios de HubSpot usando este patrón, re-sincronízalos desde la página de detalle de Flows 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.
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.
Cuenta los caracteres en tus etiquetas de desplegable y campo de texto. Cualquier cosa por encima de 20 está en riesgo.
2
Comprueba tus tipos de campo
Cualquier desplegable con menos de ocho opciones es candidato para botones de radio.
3
Sincroniza el formulario y ábrelo en Meta
Desde la página de detalle de Flows, sincroniza el Flow y ábrelo en Meta Business Suite. La vista previa del generador de Flows marca las etiquetas que probablemente se acorten.
4
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.
Sincroniza tus formularios de HubSpot a WhatsApp Flows y comprueba su estado.
WhatsApp Web y Escritorio
Cómo se renderizan los Flows cuando los clientes responden desde un portátil.
Guías de workflows
Recetas de extremo a extremo que ponen estos patrones a trabajar.
Fallos de sincronización con HubSpot
Diagnostica formularios que no se sincronizan o envíos que nunca llegan.
Meta publica las restricciones subyacentes en su propia documentación. Para la referencia completa de componentes, consulta Componentes de WhatsApp Flows, y para la guía de diseño de Meta consulta Mejores prácticas de Flows.
Última modificación el 19 de septiembre de 2026
¿Esta página le ayudó?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.