Actualizado el 19 de octubre de 2026
Tu formulario es breve. Las preguntas son relevantes. El tráfico fluye. Sin embargo, en dispositivos móviles, una parte importante de los visitantes se detiene en el segundo campo. El problema a menudo no radica ni en la oferta ni en la cantidad de preguntas: es el diseño del formulario. Un teclado alfabético que se abre en un campo de código postal, una etiqueta que desaparece al escribir, un botón gris claro apenas visible. Esta guía recopila las mejores prácticas para el diseño de formularios que tienen un impacto medible en la conversión, junto con el código o la configuración precisa que se debe aplicar.
En breve: un diseño de formulario eficaz sigue cinco buenas prácticas: una sola columna con etiquetas visibles sobre los campos, un teclado móvil adaptado a cada tipo de dato, pasos cortos con progreso visible, contraste suficiente (4,5:1 para el texto, 3:1 para los bordes de los campos) y un botón que indique claramente el resultado. Estas configuraciones son económicas de implementar y eliminan los obstáculos que provocan el abandono del formulario en dispositivos móviles.
Antes de entrar en detalles, una aclaración: este artículo no trata sobre la extensión de los formularios, sino sobre su formato. Al final, encontrarás una lista de verificación de auditoría de 12 puntos para revisar tu propio formulario en tan solo diez minutos.
Diseño: una columna, etiquetas encima de los campos
El diseño más eficaz para un formulario de captación de clientes potenciales es una sola columna, con cada etiqueta colocada encima de su campo correspondiente. La vista sigue una línea recta, sin tener que zigzaguear entre columnas ni buscar qué etiqueta corresponde a cada campo.
Las cifras lo confirman. En un estudio controlado realizado por el Instituto CXL (ahora Speero) con 702 participantes, la versión de una sola columna se completó en un promedio de 102,3 segundos, en comparación con los 117,8 segundos de la versión de varias columnas. Esto representa un ahorro de tiempo de aproximadamente el 13 %, considerando que las preguntas eran idénticas.
Una distinción importante: este estudio solo midió el tiempo que tardaron quienes completaron el formulario. No dice nada sobre quienes lo abandonaron. Pero un formulario que se lee más rápido rara vez desanima a la gente.
¿Etiqueta de marcador de posición, flotante o fija?
Una etiqueta fija, siempre visible sobre el campo, sigue siendo la opción más segura. El texto de ejemplo dentro del campo (el marcador de posición) desaparece en cuanto se introduce la primera tecla: el usuario que revisa su entrada ya no sabe qué se le preguntaba.
Las etiquetas flotantes, popularizadas por Material Design, solo solucionan parte del problema. La etiqueta se reduce para ajustarse al campo, un encabezado largo queda truncado y el contraste del texto reducido suele ser demasiado bajo. Reserve el marcador de posición para un ejemplo de formato ("06 12 34 56 78"), nunca como la única etiqueta.
Se toleran dos excepciones
La regla de una sola columna permite excepciones cuando dos campos representan un mismo concepto: código postal y ciudad, o fecha de caducidad y código de seguridad. Al colocarlos uno al lado del otro en un ordenador, siguen siendo legibles, siempre que se muestren uno debajo del otro en un dispositivo móvil.
Móvil: Muestra el teclado correcto para cada campo
Cada campo debe activar el teclado correspondiente a los datos esperados: un teclado numérico para un código postal, un teclado telefónico para un número de teléfono y un teclado con el símbolo "@" para una dirección de correo electrónico. Este detalle del código HTML evita que el usuario tenga que cambiar manualmente de teclado para cada campo.
Este detalle a menudo se implementa de forma deficiente, incluso en sitios grandes. La auditoría de teclados táctiles del Baymard Institute demostró que El 54% de los principales sitios de comercio electrónico de EE. UU. no mostraban el teclado optimizado en los campos de número de teléfono, código postal o tarjeta de crédito, el 79 % dejó la autocorrección activada, lo que corrompe la información ingresada. Una dirección de correo electrónico "corregida" con el número de teléfono representa una oportunidad perdida.
Aquí están las configuraciones que se deben aplicar a los campos más utilizados en un formulario de contacto en francés:
| Campo | Atributos HTML recomendados | Efecto en dispositivos móviles |
|---|---|---|
| Correo electrónico | type='email' autocomplete='email' autocapitalize='off' spellcheck='false' | Teclado con @, sin bloqueo de mayúsculas ni autocorrección |
| Teléfono | type='tel' autocomplete='tel' | Teclado telefónico, número sugerido por el navegador |
| Código Postal | inputmode='numeric' autocomplete='postal-code' maxlength='5' | Teclado numérico, limitado a 5 dígitos |
| SIRET | inputmode='numeric' maxlength='14' | Teclado numérico, sin flechas de incremento |
| Cantidad (presupuesto, ingresos) | inputmode='decimal' | Teclado numérico con coma |
| Nombre, apellido | autocomplete='family-name' / 'given-name' | Capitalización inicial, aportación sugerida |
Evitar type='number' para un código postal o un número SIRET: agrega flechas de incremento innecesarias en una computadora y puede eliminar el cero inicial de un código postal como 01000.
La trampa del zoom del iPhone
En iOS, Safari amplía automáticamente los campos con texto de menos de 16 píxeles. La página se desplaza, el botón desaparece de la pantalla y el usuario tiene que reducir la imagen manualmente. Si se establece el tamaño de fuente de los campos a un mínimo de 16 píxeles, el problema desaparece.
Considere también los elementos interactivos. Un botón de opción de 16 píxeles es difícil de pulsar con el pulgar; procure que las áreas clicables tengan al menos 44 × 44 píxeles, de modo que se pueda hacer clic en toda la línea de la opción, no solo en el punto.
Enfoque automático y autocompletar: ayuda sin forzar nada
La función de autocompletar del navegador ahorra valiosos segundos; el enfoque automático, en cambio, suele ser más un estorbo que una ayuda. Se trata de dos configuraciones similares con efectos opuestos.
El atributo autocomplete permite al navegador rellenar nombre, e-mail, teléfono y dirección con un toque. En un formulario de presupuesto de seis campos, puede reducir la escritura a dos o tres toques. Al contrario, desactivar el autocompletado «por seguridad» en un formulario de contacto penaliza al usuario sin proteger nada.
La función de enfoque automático, que coloca automáticamente el cursor en el primer campo al cargar la página, presenta varios problemas. El diseñador británico Adam Silver identifica cinco: saltos de página inesperados, bloqueo del desplazamiento con el teclado, accesos directos del navegador inaccesibles, un lector de pantalla que anuncia la etiqueta del campo en lugar del título de la página y, en Android, un campo que se activa sin que se abra el teclado.
Nuestra recomendación es sencilla: no enfoque automáticamente una página que contenga algo más que el formulario (texto introductorio, argumentos, reseñas de clientes). Sin embargo, en un formulario de varios pasos, resulta útil enfocar el texto en el título del siguiente paso: la persona que navega con el teclado o con un lector de pantalla sabe inmediatamente dónde se encuentra.
Divídelo en pasos sin perder al lector
Un formulario de varios pasos convierte mejor cuando cada pantalla plantea solo una o dos preguntas, el progreso es visible y la primera pregunta requiere un mínimo esfuerzo. Dividir el formulario no es la solución mágica: si está mal diseñado, añade clics sin reducir la carga de trabajo.
Tres reglas de diseño marcan la diferencia:
- Empieza con una pregunta sencilla y atractiva : el tipo de proyecto o necesidad se presenta mediante tarjetas grandes en las que se puede hacer clic. Los datos de contacto se añaden al final, después de que el usuario ya haya invertido cierto tiempo.
- Demuestra un progreso honesto : “Paso 2 de 4” es mejor que una barra que se mueve rápidamente al principio y luego se estanca.
- Pasar automáticamente a la siguiente pantalla tras una única selección (botón de opción), pero nunca tras la introducción de texto, donde el usuario debe mantener el control.
Para profundizar en este formato, nuestro ejemplos comentados de formularios de cotización de varios pasos mostrar el orden de las preguntas que funciona según los sectores. Y para mostrar solo las preguntas relevantes para cada perfil, lógica condicional evita mostrar el campo "Número de empleados" a un usuario individual.
Esta partición se puede realizar sin un desarrollador en el de funcionalidades de Blastform : los pasos, los mapas visuales, la barra de progreso y las condiciones de visualización se configuran desde el editor.
Colores, contraste y accesibilidad
Un formulario accesible también es aquel que se convierte mejor: el texto debe ofrecer un contraste de al menos 4,5:1 con su fondo, y los bordes de los campos de al menos 3:1, según los criterios 1.4.3 y 1.4.11 de las WCAG. Este segundo criterio es el que con mayor frecuencia se pasa por alto.
Las tendencias recientes en diseño gráfico favorecen los campos de color gris muy claro sobre fondo blanco, sin bordes visibles. Como resultado, en la pantalla de un teléfono bajo la luz del sol, el usuario ya no puede distinguir dónde hacer clic. Un borde gris como el #767676 sobre fondo blanco cumple con las expectativas; el muy común #E0E0E0 no las supera.
Otros tres reflejos que conviene adoptar:
- Nunca indique un error únicamente por el color. Un borde rojo no es suficiente para el 8% de los hombres afectados por la deficiencia en la visión del color: hay que añadir un icono y un mensaje de texto.
- Vincula cada etiqueta con su campo (etiqueta
labelcon el atributofor): Al hacer clic en la etiqueta, se activa el campo y el lector de pantalla lee la pregunta correcta. - Mantén visible el indicador de enfoque. Si se elimina el contorno azul predeterminado sin reemplazarlo, el formulario queda inutilizable con el teclado.
Ya no se trata solo de una cuestión de comodidad. Desde el 28 de junio de 2025, la Ley Europea de Accesibilidad impone requisitos de accesibilidad a muchos servicios públicos en línea de la Unión Europea, incluidos los servicios de comercio electrónico y banca. Un formulario que cumpla con la normativa le evitará tener que rellenarlo de nuevo más adelante.
Desde el punto de vista de la identidad visual, alinear los colores y la tipografía del formulario con los de su sitio web genera confianza: un formulario que parece un widget genérico de terceros hace que los usuarios duden. Analizamos este aspecto con más detalle en nuestro artículo sobre personalizar un formulario sin programar.
Mensajes de microcopia y errores
El microtexto se refiere al texto pequeño que rodea los campos: etiquetas, texto de ayuda, mensajes de error. Bien redactado, aborda la objeción antes de que bloquee al usuario. Mal redactado, convierte una simple errata en un abandono.
Marque los campos opcionales, no los obligatorios
El asterisco rojo es un reflejo innato, pero muchos usuarios no lo notan ni comprenden su significado. La práctica recomendada por varios especialistas en UX es la opuesta: asumir que todo es obligatorio y añadir "(opcional)" solo a los campos que no lo son. Si tienes muchos campos opcionales, considera su utilidad.
Validar en el momento adecuado
Según el Baymard Institute, El 31% de los sitios probados no tienen validación en línea de los campos, algunos usuarios, al tener una dirección de correo electrónico no válida, la activan demasiado pronto. Mostrar "dirección de correo electrónico no válida" cuando la persona solo ha escrito tres letras genera frustración. El momento adecuado es cuando el usuario abandona el campo. Y en cuanto corrige el error, el mensaje debería desaparecer mientras escribe, sin esperar a que pase a otro campo.
Anotar los errores que ayudan
Compara «Formato no válido» con «El número debe contener 10 dígitos, por ejemplo, 06 12 34 56 78». El segundo mensaje te indica qué hacer. Coloca el mensaje justo debajo del campo afectado, nunca solo en la parte superior del formulario, y conserva todos los datos introducidos tras el error.
Tranquilizador cuando hay un problema
El campo del número de teléfono es un punto débil común en los formularios de captación de clientes potenciales. Una frase útil justo debajo ("Solo para llamarle sobre su presupuesto") resuelve la inquietud en cuanto aparece. Esto es más efectivo que un pie de página genérico que nadie lee.
El botón de enviar: el último metro
El botón debe indicar claramente qué recibe el usuario, no la acción técnica que realiza. "Recibir mi presupuesto" tiene mejor tasa de conversión que "Enviar", porque refuerza la promesa en el momento de la acción final.
Unbounce informa de varios casos en los que una sola palabra cambió el resultado. En un portal de alquiler de oficinas B2B, sustituir "Ordenar" por "Obtener" en el botón aumentó las conversiones en un 38% : el verbo finalmente hablaba de lo que uno recibe en lugar de lo que uno debe hacer.
En términos de diseño, hay cuatro aspectos importantes:
- Ancho completo en dispositivos móviles, para que el pulgar pueda alcanzarlo sin necesidad de apuntar.
- Un color que contrasta con el resto de la página. El "mejor color" no existe: lo que cuenta es el contraste con su entorno, no el rojo o el verde en sí.
- Nunca deshabilitado ni atenuado mientras el formulario esté incompleto, el usuario no entenderá qué falta. Permítale hacer clic e indicar los campos que desea completar.
- Un estado de carga después de hacer clic ("Envío en curso...") para evitar envíos duplicados y clientes potenciales duplicados en su CRM.
Estas optimizaciones de diseño se suman a las centradas en el costo de adquisición. Si su principal preocupación es el presupuesto, nuestro artículo sobre la disminución del coste por cliente potencial gracias a la conversión de formularios vincula estos ajustes a tus campañas.
Buenas prácticas para el diseño de formularios: la cuadrícula de auditoría en 10 minutos
Aquí tienes la cuadrícula prometida al principio del artículo. Coge tu teléfono, abre el formulario en modo incógnito y marca cada casilla. Cada "no" representa un obstáculo que puedes eliminar esta semana.
- En dispositivos móviles, el formulario cabe en una sola columna.
- Cada campo tiene una etiqueta visible encima, que permanece mostrada durante la introducción de datos.
- El campo de correo electrónico abre un teclado con el símbolo "@" y no utiliza letras mayúsculas.
- Los campos de número de teléfono y código postal abren un teclado numérico.
- La página no se amplía al tocar un campo (tamaño mínimo de fuente: 16 píxeles).
- El navegador ofrece rellenar automáticamente el nombre, el correo electrónico y el número de teléfono.
- Ningún campo recibe automáticamente el foco al cargar la página.
- En un formulario de varios pasos, se muestra el progreso ("Paso X de Y").
- Los bordes de los campos permanecen visibles incluso con la máxima luz, al aire libre.
- Un error deliberado (correo electrónico sin @) muestra un mensaje claro debajo del campo, no solo un borde rojo.
- El botón describe el beneficio (“Recibir…”, “Obtener…”) y ocupa todo el ancho.
- Tras hacer clic, se muestra un indicador de carga y, a continuación, una confirmación clara.
Una puntuación de 10 sobre 12 o superior significa que probablemente el diseño no sea el principal obstáculo. Si la puntuación es inferior a 8, empieza por los puntos 3, 4 y 5: son los más fáciles de solucionar y todos afectan a los visitantes que acceden desde dispositivos móviles.
Para comenzar desde una base que ya cumple con la mayoría de estos requisitos, explore nuestra plantillas de formularios B2B listas para usar, o vea cómo lo han hecho otros equipos en nuestro estudio de caso sobre el aumento de la tasa de conversión.
Preguntas frecuentes
¿Podemos sustituir las etiquetas por el texto de ejemplo en los campos?
No. El texto de ejemplo (marcador de posición) desaparece al pulsar la primera tecla, impidiendo que el usuario compruebe lo que ha introducido, y su color gris claro suele ofrecer un contraste insuficiente. Mantenga una etiqueta visible encima del campo y reserve el marcador de posición para un ejemplo de formato.
¿Es realmente menos eficiente un formato de dos columnas?
En la mayoría de los casos, sí. Un estudio de CXL con 702 participantes midió una tasa de finalización un 13 % más rápida para campos de una sola columna. Las únicas excepciones razonables son los pares de campos relacionados, como el código postal y la ciudad, y solo en ordenadores.
¿Debe activarse el enfoque automático en el primer campo?
No se recomienda en páginas que contengan nada más que el formulario. El enfoque automático provoca que la página se mueva de forma errática, bloquea el desplazamiento con el teclado y confunde a los lectores de pantalla. Solo es útil para enfocar el título del nuevo paso en un formulario de varios pasos.
¿Cuál es el mejor color para un botón de formulario?
No existe una regla universal. Lo que importa es el contraste del botón con el resto de la página y la legibilidad de su texto (al menos 4,5:1). Un botón naranja en un sitio web naranja pasa más desapercibido que un botón azul en el mismo sitio web.
¿Un formulario de varios pasos siempre convierte mejor?
No, solo si está bien diseñado: una o dos preguntas por pantalla, una primera pregunta sencilla, progreso visible y los datos de contacto al final. Un formulario de tres campos no tiene por qué estar dividido.
¿Quieres aplicar estas buenas prácticas sin modificar el código? Pruebe Blastform gratis o reserva una demostración para revisar su formulario actual con nuestro equipo.