Diseño de Formularios Web: Campos, Errores y Conversión

Cada campo adicional es un punto de fricción que aumenta la probabilidad de que el visitante abandone el formulario. En un formulario de solicitud de servicio, el nombre, el teléfono y una breve descripción suelen bastar; la dirección, el cargo o el presupuesto pueden recogerse después, en una llamada de seguimiento, no en el primer contacto.

Algunos sectores son la excepción; ahí la información que falta ralentiza el trabajo. El formulario de reserva de una empresa de alquiler de coches no puede procesar una solicitud sin fecha ni tipo de vehículo; ahí el objetivo no es el menor número de campos sino los campos correctos.

Si un campo tiene un error, el visitante debe verlo en el momento en que lo abandona, no después de enviar todo el formulario. Un campo de correo que avisa de inmediato de un formato incorrecto cansa mucho menos que ver diez errores de golpe tras el envío.

Pero un aviso en cada pulsación resulta igual de molesto; si el visitante ve «inválido» antes de terminar de escribir la palabra, el formulario se siente innecesariamente estricto. El momento correcto es cuando el campo pierde el foco.

Un mensaje genérico como «entrada inválida» no dice al visitante qué hacer. Uno concreto, como «la dirección de correo necesita un símbolo @», evita que se repita el mismo error.

Si el formato del número de teléfono cambia según el país en el formulario de afiliación de una asociación, el mensaje de error debe mostrar el formato esperado con un ejemplo; una indicación como «introducir con el formato 612 34 56 78» evita que el visitante tenga que adivinar.

La mayoría de los formularios se rellenan hoy desde el móvil; por eso el tamaño de campo, el tipo de teclado y el área táctil merecen atención propia. Un campo de teléfono debe abrir el teclado numérico, uno de correo un teclado con el @ a mano; detalles así se suman y hacen un formulario notablemente más fácil de completar.

• El número de campos se limita a lo que el primer contacto realmente necesita
• La validación se activa al salir del campo, no en cada pulsación
• Los mensajes de error indican de forma concreta qué corregir
• Tipo de teclado correcto y áreas táctiles suficientes en móvil
• Se comunica con claridad qué ocurre tras el envío (agradecimiento, correo, llamada)

Dónde acaban los datos tras el envío merece tratarse como parte del diseño tanto como el aspecto visual. Una solicitud que cae directamente en un CRM se atiende más rápido que una que queda enterrada en una bandeja de entrada; sin esa conexión, incluso un formulario bien diseñado puede acabar convertido en una solicitud que se pierde silenciosamente en el equipo.

Tan importante como el destino de los datos es quién responde y en cuánto tiempo; una empresa que tarda tres días en responder tras el envío de un formulario deja la misma impresión que una que directamente no tiene formulario.

Un formulario largo en una sola pantalla puede intimidar; dividirlo en dos o tres pasos con un indicador de progreso puede mejorar la tasa de finalización. Pero dividir en pasos un formulario corto con pocos campos produce el efecto contrario, solo añade clics innecesarios.

En un pedido de producto digital, separar la elección del producto, luego los datos de facturación, luego el pago en pasos distintos hace que cada uno se sienta más ligero; pero esto solo compensa a partir de cinco o seis campos.

Poco después de publicarse, un formulario puede empezar a recibir envíos de bots; un campo oculto que solo un bot rellenaría (honeypot) filtra la mayor parte del spam sin añadir un paso extra a un visitante real.

Si el formulario de contacto de un despacho de abogados recibe cada semana docenas de envíos sin sentido, suele deberse no a la falta de captcha sino a que no hay ninguna protección básica contra bots; un campo honeypot y un límite de frecuencia de envío bastan en la mayoría de los casos.

Un captcha visible solo se añade como último recurso, cuando esas medidas no bastan; porque todo captcha es también un punto de fricción extra para un visitante genuino.