Pruebas tu formulario en el ordenador y se ve perfecto. Ancho completo, dos columnas, mucho espacio. Haces un envío de prueba en el móvil y notas enseguida que algo falla. Los campos son diminutos. El teclado tapa la mitad del formulario. Tocas el campo equivocado. Toda la experiencia parece rota.
La mitad de tus visitantes está en el móvil. Si tu formulario no es responsive, pierdes la mitad de los envíos. Este artículo explica cómo diseñar formularios que funcionen en móviles, tablets y ordenadores.
Los formularios móviles son distintos de los de ordenador
Los usuarios de móvil rellenan los formularios de otra manera. En el ordenador tienes espacio. Puedes usar diseños de varias columnas. Puedes poner las etiquetas junto a los campos. En el móvil, cada píxel cuenta.
Los teclados móviles son enormes. Cuando se abre el teclado, tapa la mitad de la pantalla. Tu formulario se desplaza. El usuario pierde el contexto. Un botón que se veía ahora queda escondido detrás del teclado.
Las zonas táctiles deben ser más grandes. Un área en la que se puede hacer clic de 14 por 14 píxeles va bien con un ratón. Un dedo necesita al menos 48 por 48 píxeles o el usuario fallará.
Los usuarios de móvil tienen redes inestables. Cada carga extra del formulario o cada imagen suma tiempo. La velocidad importa más que en el ordenador.
El formulario de una sola columna
El formulario responsive más seguro es el de una sola columna. Un campo por fila, sea cual sea el tamaño de pantalla.
Los diseños de una columna son simples, funcionan en todas las pantallas, crean una experiencia coherente y son muy predecibles. Su principal desventaja es que los formularios parecen más largos en el ordenador y hay que desplazarse más.
La mayoría de los formularios debería ser de una columna. Si tu formulario tiene cinco campos, una columna es en realidad más corta que un diseño de dos columnas en el ordenador. El usuario se desplaza menos y ve más contexto.
Para crear un diseño de una columna, usa input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Esto apila todo en vertical en todos los breakpoints.
Dos columnas en el ordenador, una columna en el móvil
Si quieres aprovechar el espacio horizontal en pantallas grandes, usa una cuadrícula con .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } y una media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. En el ordenador esto crea dos columnas, y en el móvil se apila en una, con un diseño simple y responsive.
Agrupa solo los campos que de verdad están relacionados. Un campo "Nombre" y otro "Apellidos" juntos tienen sentido. Un campo "Dirección" y otro "País" juntos, no.
Zonas táctiles y diseño pensado para los dedos
La zona táctil mínima en el móvil es de 44 por 44 píxeles (según las guías de diseño de iOS) o de 48 por 48 píxeles (según las de Android). Apunta como mínimo a 44.
El tamaño de la zona táctil se aplica a los campos de entrada, que deben ser lo bastante altos para tocarlos con facilidad (de 40 a 50 píxeles está bien), a las casillas y los botones de opción, que por defecto miden 13 por 13 píxeles y deben ampliarse al menos a 44 por 44 con CSS o JavaScript, a los botones, que deben medir al menos 44 por 44 píxeles con relleno añadido, y a las etiquetas, que también deben medir 44 por 44 píxeles si se puede hacer clic en ellas mediante el atributo for. A veces la etiqueta y el campo juntos forman la zona táctil completa.
Para hacer los campos más grandes y fáciles de tocar, usa input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. El relleno hace el campo más alto y mejora lo fácil que es tocarlo.
Gestión del teclado
En el móvil, el teclado del navegador cubre la mitad inferior de la pantalla. Si tu formulario está al final de la página, el botón de enviar queda oculto. El usuario tiene que desplazarse hacia abajo o cerrar el teclado para ver el botón.
Mantén tu formulario cerca de la parte superior de la página. O pon el botón de enviar arriba además de abajo. No escondas botones importantes bajo el teclado.
El tipo de teclado también importa. Para un campo de email, usa <input type="email"> para mostrar un teclado de email con la tecla @. Para un campo de teléfono, usa <input type="tel"> para mostrar un teclado numérico. Para datos numéricos, usa <input type="number"> para mostrar un teclado de números. Con el tipo de campo correcto, el navegador elige el teclado automáticamente.
Cuando el usuario toca un campo, el navegador lo desplaza hasta que se vea. Eso está bien. El campo es visible cuando toca escribir. Pero a veces puede pasar por encima de otro contexto. Prueba tu formulario en un móvil real para ver cómo se comporta.
Posición de las etiquetas en el móvil
En el ordenador, las etiquetas pueden ir encima, al lado o dentro de los campos. En el móvil, encima es casi siempre lo mejor.
Una etiqueta encima del campo es clara. El usuario ve la etiqueta y luego el campo. En una pantalla estrecha, una etiqueta al lado del campo desperdicia espacio horizontal. Un texto de ejemplo dentro del campo desaparece al empezar a escribir.
Buena práctica: pon las etiquetas encima de los campos. Siempre.
<label for="email">Email</label>
<input type="email" id="email">
Espaciado y relleno
Los formularios responsive necesitan más espacio en el móvil, no menos. Tu instinto es comprimirlo todo para que quepa. Combate ese instinto.
Usa rellenos y márgenes generosos: al menos 1rem (16 píxeles) entre campos, al menos 0.75rem (12 píxeles) por todos los lados en el relleno de los campos y al menos 1rem (16 píxeles) por todos los lados en el relleno de los botones. Un espaciado generoso hace los formularios más fáciles de usar, reduce los toques erróneos y mejora la lectura. En el móvil, el espacio libre vale más que el espacio de pantalla.
Tamaño del texto en el móvil
Usa al menos 16 píxeles en los campos. Un texto más pequeño obliga a ampliar o a entrecerrar los ojos. 16 píxeles es el valor por defecto y funciona.
Las etiquetas pueden ser más pequeñas, de unos 14 píxeles. Pero los campos deben tener 16 píxeles como mínimo.
Algunos navegadores amplían la pantalla automáticamente cuando tocas un campo con menos de 16 píxeles, y el formulario salta y se agranda de forma inesperada. Usa input { font-size: 16px; } para evitarlo.
Errores comunes en formularios responsive
Usar dos columnas en todos los tamaños de pantalla
Los formularios quedan apretados en el móvil. Los campos son diminutos. Las etiquetas se apilan mal. Apila siempre en una columna en los breakpoints pequeños.
Hacer las zonas táctiles demasiado pequeñas
Las casillas, los botones de opción y los botones deben medir al menos 44 por 44 píxeles. Prueba en un móvil real. Si tienes que concentrarte para tocarlo, es demasiado pequeño.
Usar el texto de ejemplo como única etiqueta
Cuando el usuario empieza a escribir, el texto de ejemplo desaparece. Olvida para qué era el campo. Usa siempre un elemento label adecuado. Puedes mantener el texto de ejemplo si quieres, pero nunca confíes solo en él.
Poner el formulario al final de una página larga
El usuario se desplaza hasta un formulario de contacto, toca el campo de email y el teclado del móvil tapa el formulario. No puede ver lo que escribe ni llegar al botón de enviar. Pon los formularios cerca de la parte superior o asegúrate de que caben en pantalla con el teclado abierto.
No probar en dispositivos móviles reales
Tu navegador de escritorio tiene un modo de vista móvil. Es útil para una comprobación rápida. Pero no muestra cómo funciona de verdad tu formulario en un móvil. Prueba en dispositivos reales. Pide prestado un móvil si no tienes uno.
Técnicas para formularios responsive
CSS Grid para diseños flexibles
Usa .form-group { display: grid; gap: 0.5rem; } y .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Los valores auto-fit y minmax crean un diseño que se adapta al espacio disponible, de modo que los campos se apilan en anchos estrechos y van lado a lado en anchos grandes.
Flexbox para la disposición de los botones
Usa .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } y .form-actions button { flex: 1; min-width: 150px; }. Los botones van uno junto al otro en el ordenador, se reparten en varias filas en el móvil y cada botón crece para llenar el espacio disponible.
Media queries para breakpoints concretos
Usa @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } para forzar un diseño de una columna en pantallas de menos de 480 píxeles.
Cómo se adaptan los formularios de WEMASY a todas las pantallas
El creador de formularios de WEMASY crea formularios responsive automáticamente. Diseña en el ordenador y el móvil ya está resuelto. Los formularios se apilan en una columna en los móviles. Las zonas táctiles tienen el tamaño adecuado para el móvil. Las etiquetas y los campos tienen el espaciado correcto. Sin trabajo extra.
Mira cómo funciona la adaptación de los formularios en tu plan de WEMASY.