Cómo maquetar un formulario: 10 recomendaciones

¿Necesitas maquetar un formulario y no sabes por dónde comenzar? Existen aspectos fundamentales para que los formularios no solo se vean bien, sino que sean accesibles, legibles, adaptables y, sobre todo, funcionales. Un buen formulario debe guiar al usuario de manera clara, evitando la frustración y mejorando la conversión, para lograr el objetivo.

A continuación veremos 10 recomendaciones esenciales para maquetar un formulario exitoso.

1. Utilizar una estructura semántica adecuada

Es fundamental usar etiquetas HTML adecuadas para garantizar que el formulario sea accesible para todos los usuarios y optimizado para SEO. Por ejemplo:

• Usar <form> para envolver todo el formulario.
• Cada campo debe estar dentro de un <label> o asociado a uno mediante el atributo for.
• Los botones deben ser <button> o <input type="submit">.

El uso de estas etiquetas mejora la accesibilidad y permite que las tecnologías de asistencia, como los lectores de pantalla, interpreten correctamente el formulario.

<form action="/submit" method="post">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre">
</form>

2. Accesibilidad al maquetar un formulario

A la hora de maquetar un formulario, la accesibilidad es crucial para garantizar que todas las personas puedan interactuar con el formulario. Algunas prácticas importantes incluyen:

• Debemos asegurarnos de que todos los campos tengan etiquetas visibles asociadas usando el atributo for en las etiquetas <label>.
• Es recomendable proporcionar descripciones adicionales mediante aria-label o aria-describedby cuando sea necesario.
• Usar tabindex de manera correcta ayuda a asegurar una navegación fluida con el teclado.
• Proporciónale a los botones de acción nombres descriptivos (por ejemplo, «Enviar» en lugar de «OK», según corresponda).

3. Legibilidad y contraste de texto

El texto del formulario debe ser fácil de leer. Para ello, debemos seguir algunas recomendaciones:

• Usar fuentes legibles. El tamaño del texto no debe ser demasiado pequeño.
• Mantener un buen contraste entre el texto y el fondo.
• Agrupar los campos relacionados para mejorar la lectura.
• Usar espaciados y separadores visuales como bordes o colores suaves, según las características del diseño.

4. Maquetación adaptable para todos los dispositivos

Tu formulario debe ser completamente funcional y visible en dispositivos de todos los tamaños. Algunas claves para lograr un formulario responsivo:

• Utiliza unidades relativas como em o rem en lugar de píxeles. La alternativa de o porcentajes puede ser útil. La opción de vw como unidad de medida también nos puede ayudar a ajustar el tamaño al ancho del Viewport.
• Usar media queries para ajustar el diseño en pantallas pequeñas. Por ejemplo, los campos que están alineados en una fila pueden apilarse verticalmente en pantallas más pequeñas. Técnicas modernas como Flexbox y Grids también pueden resultar útiles.
• Probar el formulario en diferentes dispositivos y resoluciones para asegurarnos de que sea legible y navegable. Siempre destaco a mis alumnos que evaluar la experiencia de usuario en el dispositivo es clave.

A continuación veremos un ejemplo donde se agrupan elementos de formulario y se ajustan a una pantallas de 600px de ancho (o inferiores). En este ejemplo se aplica Flexbox y ancho con unidad de medida en vw.

@media (max-width: 600px) {
  .form-group {
    display: flex;
    justify-content: space-evenly;
    width: 100vw;
  }
}

5. Estilos consistentes con el sitio

El formulario debe integrarse visualmente con el resto del sitio. Es importante asegurar que los estilos de botones, campos y textos coincidan con el diseño general del sitio.

Es fundamental evita rel uso de estilos que rompan la coherencia visual, como colores llamativos que no coincidan con la paleta del sitio o fuentes demasiado diferentes.

input, button {
  font-family: inherit;
  color: inherit;
  border-radius: 5px;
}

La opción de emplear clases nos ayuda a organizarnos También podremos recurrir a las variables de CSS o las de SASS, que nos abre mayores posibilidades y ofrece mayor compatibilidad.

6. Call to Action claros y visibles

El botón de acción (Submit, Enviar, Registrarse) es el elemento más importante del formulario. Debe ser visualmente destacado, accesible y descriptivo:

• Usar un color que contraste con el resto del formulario, pero que siga la paleta de colores del sitio.
• El texto del botón debe ser claro y explicativo: en lugar de “OK”, usa “Enviar Solicitud” o “Registrarse”.
• Colocar el llamado a la acción en un lugar lógico. Por ejemplo al final del formulario. Debemos asegurarnos que sea accesible con el teclado.

7. Evitar formularios demasiado extensos

Formularios con demasiados campos pueden intimidar a los usuarios y reducir la tasa de conversión. Una recomendación es incluir solo los campos que sean realmente necesarios.

Si es necesario emplear formularios con mucho campos, una alternativa es utilizar técnicas como la validación progresiva o formularios en varias etapas para dividir el proceso.

Planificar el formulario pensando en la experiencia del usuario es clave para lograr que sea efectivo. Si olvidamos eso, no lograremos el objetivo y la tasa de completado será baja.

8. Usabilidad: facilitar la interacción

En este punto ya está clara que la usabilidad mejora la experiencia del usuario. A la hora de maquetar un formulario debemos tener presentes algunos conceptos que resultan clave:

• Usa auto-focus en el primer campo cuando el formulario se carga.
• Se puede implementar autocompletado en campos como nombre, dirección o correo electrónico para ahorrar tiempo al usuario.
• Usar placeholder solo para proporcionar un ejemplo del formato correcto, pero no como sustituto de etiquetas.
• Una opción es validar los datos en tiempo real para informar a los usuarios sobre errores sin tener que enviar el formulario completo.

9. Validación de datos y mensajes de error claros

Algo que recomiendo a mis alumnos en mis clases es implementar validación tanto en el lado del cliente como en el del servidor. Los usuarios deben recibir mensajes de error claros y amigables si ingresan datos incorrectos. Usa mensajes de error personalizados para evitar la frustración.

<input type="email" required>
<span class="error">Por favor, ingrese un correo electrónico válido.</span>

Además, se puede meplear :invalid en CSS para estilizar campos que no pasan la validación.

input:invalid {
  border: 2px solid red;
}

10. Optimizar la carga del formulario

Un aspecto que siempre destaco en mis consultorías es que debemos evitar que los formularios impacten de manera negativa en la carga de la página.

En este sentido resulta clave optimizar la carga de scripts y CSS que son necesarios para el formulario. En este rubro debemos asegurarnos que no se incluyan librerías y archivos innecesarios en la carga inicial. Podemos emplear el atributo defer o async al cargar JavaScript. Toda optimización de recursos, incuidas las imágenes, serán bienvenido en la velocidad e carga.

Maquetar un formulario: consideraciones finales

Algo que siempre explico en mis clases es que maquetar un formulario efectivo implica mucho más que solo organizar campos y botones. Es fundamental centrarse en la accesibilidad, usabilidad y adaptabilidad a diversos dispositivos. Siempre debemos tener en mente cómo los usuarios interactúan con él.

Al seguir las recomendaciones que hemos visto en este artículo, lograremos formularios que no solo sean funcionales y estéticamente agradables, sino también accesibles y efectivos para cumplir su propósito.

Para completar, recomiendo la lectura de mi artículo titulado Formularios HTML5: los inputs.

Más información sobre formularios en la documentación disponible en HTML Living Standard.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.