Dos de cada tres envíos de formularios se hacen ya desde un teléfono. Aun así, la mayoría de las webs diseñan sus formularios en un ordenador y luego los aprietan en una pantalla móvil. El resultado: formularios frustrantes de rellenar, que se abandonan más y que convierten a menos visitantes en clientes.
El diseño de formularios para móvil no consiste en hacer más pequeños los formularios de escritorio. Consiste en repensar toda la experiencia de una persona que sostiene una pantalla de 6 pulgadas, con el pulgar, en un autobús que se mueve o en una cafetería llena. Todo cambia. El espacio disponible se reduce. Las zonas táctiles se hacen más grandes. El teclado aparece y tapa la mitad del formulario. El visitante se interrumpe y se va.
El diseño de formularios mobile-first significa optimizar cada detalle de un formulario según cómo la gente usa de verdad el teléfono. Este capítulo explica los cambios concretos que reducen el abandono, aceleran la finalización y convierten a más visitantes móviles en leads o clientes.
Los formularios móviles pensados para escritorio pierden clientes
Mira lo que pasa cuando alguien abre un formulario en su teléfono frente a uno en un ordenador. El usuario móvil tiene menos espacio en pantalla, menos paciencia y más distracciones. Hace malabares con el contexto. Su atención está fragmentada. Una sola interacción incómoda y se va.
Los datos lo confirman. Los formularios con mal diseño móvil ven tasas de abandono que suben entre 20 y 40 puntos porcentuales respecto al escritorio. Un solo campo mal colocado puede provocar una oleada de abandonos. Un botón pequeño y difícil de pulsar crea una fricción que se multiplica en miles de envíos.
Pero esto es lo que la mayoría de las marcas no ve: optimizar para móvil no ralentiza a los usuarios de escritorio. Un formulario diseñado primero para móvil y luego mejorado para pantallas grandes funciona mejor para todos. Disposiciones más compactas. Mejor espaciado. Jerarquía más clara. No son concesiones al móvil, son mejoras de diseño.
El reto del diseño de formularios móviles: qué es realmente distinto
Los formularios móviles tienen limitaciones que los de escritorio no tienen. Entender qué cambia te ayuda a diseñar con más acierto:
El espacio en pantalla es limitado
Una pantalla de teléfono muestra aproximadamente un 30-40% del contenido que puede mostrar un monitor de escritorio de una vez. Cada elemento ocupa espacio físico. Las etiquetas extra, las instrucciones, las pistas y los campos compiten por el mismo espacio diminuto. El teclado aparece y reduce aún más el espacio disponible. Los párrafos largos de instrucciones se salen de la pantalla.
Las zonas táctiles son más grandes y menos precisas
Un dedo mide entre 40 y 50 píxeles de ancho. El cursor de un ratón mide 1 píxel. Esto significa que los botones, las casillas, los botones de opción y los enlaces deben ser bastante más grandes en el móvil para poder pulsarse con facilidad. Los tamaños estándar que recomiendan los principales sistemas móviles son de 44x44 píxeles como mínimo. Si son más pequeños, los usuarios fallan, se frustran y abandonan el formulario.
Los teclados toman el control
En el móvil, cuando un usuario toca un campo del formulario, el teclado sube y cubre la mitad de la pantalla. Algunos campos activan teclados distintos: los de email muestran el símbolo @, los numéricos ocultan las letras, los de fecha abren selectores de calendario. Cada tipo de teclado cambia lo que ve el usuario y cómo interactúa. Diseña para cada uno por separado.
El contexto cambia sin parar
Los usuarios de escritorio se sientan y rellenan un formulario sin interrupciones. Los usuarios móviles rellenan formularios en el tren, en una tienda, entre otras aplicaciones. Les llega una notificación, cambian de aplicación, vuelven cinco minutos después. El desplazamiento parece interminable. Los campos se difuminan unos con otros. Cualquier paso que exija memoria o cambiar de contexto hace que la gente abandone.
Una sola mano maneja el dispositivo
La mayoría de los usuarios sostienen el teléfono con una mano y navegan con el pulgar. Los botones de la parte inferior derecha se alcanzan. Los botones de la parte superior de un formulario largo exigen la segunda mano o un estiramiento incómodo. Las etiquetas a la izquierda de los campos son más difíciles de leer mientras se mantiene la posición del pulgar. Diseña para el uso con una sola mano.
Regla 1: reduce el número de campos que pides
Cada campo que pides es otro toque, otra decisión, otra oportunidad para que alguien se vaya. El formulario no necesita todo. Solo necesita lo que de verdad usas para dar seguimiento.
Mira tus casos de uso reales. Un formulario de contacto rara vez necesita un segundo nombre, el tamaño de la empresa o la categoría del sector en el primer envío. Un formulario de reservas no necesita el apellido de soltera de la madre del cliente. Una suscripción a la newsletter no necesita el código postal el primer día. Puedes pedir más información después, cuando ya hayas generado confianza.
Una gran agencia de viajes online probó este principio y ahorró 12 millones de dólares al año al quitar campos opcionales de su formulario de reservas. Los usuarios completaron más formularios. Hubo más conversiones. La simplificación valió la pena.
Empieza con el mínimo absoluto. En el móvil, la regla es más estricta: si no lo necesitas para completar la acción principal, quítalo. Prueba a quitar campos uno a uno y mira cómo sube tu tasa de finalización.
Regla 2: apila los campos en una sola columna
Las disposiciones de dos columnas en el móvil son un error. Exigen desplazamiento horizontal, crean una jerarquía visual confusa y desperdician espacio horizontal. Una columna apilada en vertical es lo más rápido de escanear y rellenar.
Cada campo ocupa todo el ancho. Las etiquetas van encima del campo, no al lado. El usuario baja, lee la etiqueta, toca el campo, escribe y pasa al siguiente. El flujo es lineal. La carga cognitiva es baja.
Resiste la tentación de poner nombre y apellidos lado a lado, o la dirección y el código postal en la misma línea. Apilar en vertical es más lento en escritorio, sí. Pero el móvil supone dos tercios de tu tráfico. Optimiza para el caso mayoritario.
Regla 3: haz las zonas táctiles lo bastante grandes para acertar
Los botones deben medir al menos 44x44 píxeles. Las casillas y los botones de opción deben medir al menos 40x40 píxeles. Los botones pequeños obligan a apuntar con cuidado o a tocar varias veces. La frustración crece. Se van.
Observa cómo usas tu propio teléfono durante un día. Fíjate en cuántos toques fallan. Incluso los usuarios expertos fallan. Diseña teniendo en cuenta la tasa de fallo que traen los dedos humanos.
El espacio entre zonas táctiles también importa. Si un botón de sí está justo al lado de uno de no, los usuarios pulsarán el equivocado. Deja entre 10 y 15 píxeles de aire entre los elementos interactivos.
Regla 4: pon las etiquetas encima de los campos, no dentro
El texto del placeholder dentro de los campos desaparece en cuanto el usuario empieza a escribir. Olvida para qué era el campo. Luego se equivoca, ve un error y no sabe qué corregir.
Las etiquetas deben ir fuera y encima del campo. Claras, visibles, siempre presentes. Cuando el usuario toca el campo y aparece el teclado, la etiqueta sigue visible y le recuerda qué está escribiendo.
Una etiqueta dentro de un campo es solo una comodidad para quien diseña. Ahorra unos píxeles de espacio. Te cuesta conversiones.
Regla 5: elige el tipo de campo adecuado para el teclado móvil
Distintos tipos de campo activan distintos teclados en los dispositivos móviles. Úsalos para que la introducción de datos sea más rápida y más precisa:
Direcciones de email
Usa `type="email"` para activar un teclado con el símbolo @ y las teclas .com/.org visibles. Los usuarios no tienen que buscar caracteres especiales. La validación también ocurre automáticamente.
Números de teléfono
Usa `type="tel"` para mostrar un teclado numérico. Evita el formato sofisticado que divide el campo en segmentos de prefijo y número. A los usuarios les cuesta con las divisiones rígidas y borran sin querer el trozo equivocado. Un único campo de teléfono que acepte dígitos y espacios es más rápido.
Números y cantidades
Usa `type="number"` para mostrar solo números en el teclado. Oculta las letras. Algunos campos numéricos necesitan decimales; usa `inputmode="decimal"` para permitirlos.
Fechas
Usa `type="date"` para activar un selector de fecha nativo en lugar de pedir a los usuarios que escriban 03/15/2026. El selector de calendario es más rápido, da menos errores y se siente nativo en el teléfono.
URL
Usa `type="url"` para mostrar un teclado con la barra inclinada y la tecla .com. Los usuarios pueden escribir una dirección web sin buscar caracteres especiales.
Cada tipo de campo le indica al navegador móvil qué datos esperas. El navegador optimiza el teclado en consecuencia. No necesitas explicar el formato. El teclado hace el trabajo.
Regla 6: escribe mensajes de error claros que aparezcan en tiempo real
Cuando alguien rellena un formulario en el móvil, pulsa enviar y solo ve "Email no válido", ya ha olvidado lo que escribió. No sabe qué campo provocó el error. En una pantalla pequeña, el mensaje de error puede quedar fuera de la vista. Tiene que subir de nuevo.
En su lugar, valida los campos mientras el usuario los rellena. En cuanto pasa al siguiente campo, comprueba el que acaba de dejar. Si hay un error, muéstralo de inmediato, justo debajo de ese campo. Ve el problema mientras el contexto sigue fresco en su mente.
Los mensajes de error deben ser específicos. MAL: "Entrada no válida." BIEN: "El email debe incluir un símbolo @." El usuario sabe exactamente cómo corregirlo.
Evita usar solo el color rojo para señalar errores. Las personas daltónicas no lo verán. Usa rojo más un icono o una etiqueta de texto. "Error: este campo es obligatorio."
Regla 7: optimiza los botones para la interacción móvil
Los botones de enviar deben ser grandes, obviamente pulsables y estar donde el pulgar descansa de forma natural. Un texto de botón de 16 píxeles en un botón de 44 píxeles de alto es fácil de pulsar. Un texto de 14 píxeles en un botón de 32 píxeles es un fallo esperando a ocurrir.
El ancho del botón debe abarcar la mayor parte del ancho de la pantalla, no apretarse en una columna estrecha. Los botones de ancho completo en el móvil reducen la carga cognitiva del "dónde hago clic ahora".
Evita los botones secundarios en la misma pantalla salvo que sea absolutamente necesario. Demasiados botones crean parálisis de decisión. Una acción principal por pantalla es la regla mobile-first.
Regla 8: usa indicadores de progreso en los formularios de varios pasos
Si tu formulario abarca varias pantallas, muestra una barra de progreso arriba. "Paso 1 de 3" dice al usuario qué esperar. Sabe que no está rellenando un formulario infinito. Puede ver la meta.
Cada paso debe gestionar un bloque lógico de información. No metas cinco temas distintos en el paso uno. Sepáralos. Deja que los usuarios sientan el progreso a medida que avanzan.
Permite a los usuarios volver y editar los pasos anteriores. No deben sentirse atrapados. Los usuarios móviles son asustadizos. Ofrecer una salida reduce la ansiedad.
Regla 9: asegúrate de que tu formulario funciona con los teclados móviles y las interrupciones
El teclado aparece y tapa tu formulario. El usuario se desplaza para ver el siguiente campo. Bien. Ahora llega una notificación y el teclado se cierra. El formulario se ve, pero el usuario ha olvidado qué estaba rellenando. Mal.
Prueba tu formulario en un teléfono real y con un teclado real. Entiende cuánto del formulario desaparece cuando aparece el teclado. Si un campo queda totalmente oculto, es inutilizable. Rediseña la disposición para que el campo activo siga visible con el teclado abierto.
Guarda el progreso del formulario mientras el usuario rellena cada campo. Si cambia de aplicación o el formulario se cierra por accidente, sus datos se conservan. Cuando vuelve, el formulario está exactamente como lo dejó. Esto elimina una enorme fuente de abandono.
Regla 10: usa el autocompletado y el rellenado previo para acelerar
Los teléfonos móviles guardan información de contacto, direcciones de email, nombres y datos de pago. Cuando tu formulario usa nombres de campo y atributos HTML estándar, el navegador puede autocompletarlos automáticamente. Un campo de teléfono con `autocomplete="tel"` mostrará los teléfonos guardados como sugerencias.
Rellenar previamente los campos con datos que ya conoces es aún más potente. Si alguien inicia sesión y empieza un formulario, su email ya está rellenado. Su dirección ya está rellenada. Solo escribe lo que es nuevo. Las tasas de finalización se disparan cuando los usuarios no tienen que volver a introducir información que ya tienes.
El autocompletado y el rellenado previo no son trampa. Respetan el tiempo del usuario. Reducen la escritura. Reducen los errores. Aumentan la finalización.
Regla 11: prueba en teléfonos reales con usuarios reales
Los navegadores de escritorio tienen emulación de dispositivos. Simula la pantalla de un teléfono. Es útil para comprobaciones rápidas. Pero no simula la experiencia móvil real. El teclado no funciona igual. El desplazamiento no se siente igual. Las zonas táctiles no exigen tu pulgar de verdad.
Prueba tu formulario en teléfonos reales. Pide a un compañero que lo rellene. Mira dónde duda. Mira dónde se equivoca. Mira dónde abandona. Esos datos reales te dicen más que cualquier lista de comprobación.
Los errores comunes de los formularios móviles son difíciles de ver sin pruebas. Un botón que parece grande en un emulador de escritorio puede ser demasiado pequeño en un teléfono real bajo el sol. Unas etiquetas que parecen claras en un boceto pueden ser difíciles de leer en el ángulo en que se sostiene un teléfono. Solo las pruebas reales revelan estos problemas.
Cómo te ayuda WEMASY con el diseño de formularios móviles
El creador de formularios de WEMASY incluye diseño mobile-first por defecto. Los formularios se apilan automáticamente en una sola columna en el móvil. Las zonas táctiles tienen el tamaño correcto. Las etiquetas siguen visibles mientras los usuarios rellenan los campos. El teclado móvil se optimiza para cada tipo de campo.
La validación integrada del formulario ocurre en tiempo real, no tras el envío. Los indicadores de progreso aparecen en los formularios de varios pasos. Las respuestas del formulario se guardan automáticamente para que los usuarios nunca pierdan su progreso. La analítica registra qué campos provocan más abandono para que puedas optimizar los mayores puntos de fricción.
Consulta qué incluye cada plan de WEMASY y cómo encaja el creador de formularios en tu forma de trabajar.