Campos, diseño y lógica condicional

Los buenos formularios piden solo la información necesaria, usan el tipo de campo correcto y revelan la complejidad de forma gradual. Esta guía explica cómo elegir campos, organizarlos, validar respuestas y crear ramas condicionales.

Elige el campo correcto

Etiquetas, marcadores de posición y ayuda

Cada entrada visible debe tener una etiqueta con significado. Un marcador de posición es solo un ejemplo y desaparece cuando el visitante escribe, por lo que no debe ser la única instrucción.

Usa el texto de ayuda para explicar:

• por qué se solicita la información;
• el formato esperado;
• un límite importante;
• cómo se utilizará la información.

Marca un campo como obligatorio solo cuando el formulario no pueda procesarse sin él.

Nombres de campo

El nombre de campo identifica un valor en las notificaciones, condiciones, webhooks y asignaciones de publicaciones. Usa nombres descriptivos en minúsculas y sin espacios, como:

• first_name
• contact_email
• booking_date
• project_type

Cambiar el nombre de un campo después de crear notificaciones o automatizaciones puede romper esas referencias. Revisa cada ajuste dependiente cuando deba cambiar un nombre.

Pasos, filas y columnas

• Paso agrupa una etapa de un formulario de varios pasos.
• Fila agrupa campos horizontalmente.
• Columna define el ancho de cada área de campo en distintos tamaños de pantalla.
• Campo recoge o muestra contenido.

Usa una columna en el móvil a menos que dos controles relacionados muy cortos resulten cómodos uno junto al otro. Mantén el orden visual igual al orden de teclado y de lectura en el móvil.

Validación

POM Forms aplica la validación que corresponde a cada tipo de campo y puede aplicar reglas específicas por campo. Escribe mensajes que indiquen al visitante cómo corregir el problema.

Por ejemplo:

• «Introduce una dirección de correo válida» es mejor que «Valor no válido».
• «Elige al menos un servicio» es mejor que «Obligatorio».

Comprueba siempre la validación con la sesión cerrada. El autocompletado del navegador y los datos guardados del administrador pueden ocultar problemas durante las pruebas.

Lógica condicional

La lógica condicional puede mostrar u ocultar un campo en función de respuestas anteriores. Una condición incluye:

• una acción, como mostrar u ocultar;
• el campo que se evalúa;
• la comparación;
• el valor que activa la regla.

Ejemplo: muestra un campo Nombre de la empresa solo cuando Tipo de cliente es igual a Empresa.

Crea una rama condicional clara

1. Crea primero el campo de elección que controla el comportamiento.
2. Da a cada opción un valor estable y una etiqueta legible.
3. Añade el campo dependiente.
4. Activa la lógica condicional en el campo dependiente.
5. Elige mostrar u ocultar y define la regla.
6. Guarda el formulario.
7. Prueba cada opción de control, incluido volver a una elección anterior.

Evita las trampas de campos obligatorios ocultos

Un campo oculto no debe impedir el envío cuando su rama está inactiva. Pruébalo explícitamente:

1. activa la rama e introduce un valor;
2. cambia la respuesta de control para que el campo quede oculto;
3. envía el formulario;
4. confirma que el valor oculto se gestiona según lo previsto.

POM Forms elimina los valores y las subidas que pertenecen a campos condicionales ocultos antes del almacenamiento, la entrega de notificaciones, los webhooks y la creación de publicaciones.

Lista de comprobación de accesibilidad

• Mantén las etiquetas visibles.
• Agrupa las opciones relacionadas con una pregunta clara.
• No comuniques el estado obligatorio ni los errores solo con el color.
• Mantén el texto de ayuda y de error cerca del campo.
• Asegúrate de que el foco del teclado siga el orden visual.
• Evita el envío automático inesperado cuando cambia una opción.
• Usa encabezados para dividir los formularios largos en secciones comprensibles.

Guías relacionadas

• Crea tu primer formulario
• Formularios de varios pasos y comportamiento de envío
• Solución de problemas de formularios