Formulario con CSS Grid

Este proyecto reproduce un formulario de suscripción moderno basado en un diseño de UIDesignDaily. Contiene título, descripción, campos de input, un checkbox estilizado manualmente y un botón de envío.

Está construido desde cero utilizando CSS Grid como sistema de layout principal, aplicando maquetación precisa y estilos personalizados para lograr fidelidad visual sin frameworks.

Tecnologías utilizadas:

• HTML5 semántico
• CSS3 moderno (CSS Grid, container queries, pseudoelementos, variables, inputs personalizados)

Conceptos aplicados

Maquetación con CSS Grid

Se define un layout de rejilla para organizar los bloques del formulario (title, description, email, checkbox, submit) con grid-template-areas. Esto permite una alineación clara tanto en desktop como en versiones adaptadas.

HTML estructurado y accesible

El formulario sigue una estructura semántica clara: título (h2), descripción (p), form, input[type=email], label, input[type=checkbox] y button. Los elementos están correctamente etiquetados para maximizar accesibilidad y claridad.

Personalización de checkbox

El checkbox no usa estilos nativos del navegador. Se ha creado un sistema con appearance: none, pseudoelementos y una clase de estado para renderizar un check visual personalizado, animado mediante scale.

Control visual de inputs y botón

Se aplican variables para gestionar tamaños (--size, --gap), paddings y color de borde. El botón tiene un fondo oscuro, padding definido en em, y transiciones suaves para hover y focus.

Puntos de atención

Sistema de rejilla visual explícita

La rejilla está diseñada con nombres de área (title, description, email, checkbox, submit) para reforzar la estructura lógica del formulario.

Uso de max-width y width: 100%

Se asegura que el formulario sea responsivo y legible en pantallas pequeñas sin romper el diseño. La anchura máxima limita la expansión y se centra mediante margin: 0 auto.

Inputs responsivos y legibles

Los tamaños y el espaciado de los inputs (input[type=email], botón y checkbox) están ajustados para mantener la legibilidad y usabilidad sin depender de media queries complejas.

Estilo visual consistente

Se mantiene una paleta coherente en texto, bordes, fondo y acento. El foco está en lograr una apariencia moderna y profesional que respete el diseño original.

Mejoras sugeridas

Validación del formulario

Aunque el input tiene required, se podría añadir validación visual con :invalid o mediante JavaScript para mejorar la experiencia de usuario.

Indicadores de estado

Podría añadirse feedback visual para cuando el formulario se envía correctamente o si hay errores.

Adaptación para móviles

Aunque el diseño ya es parcialmente responsive, podría mejorarse con ajustes finos en el espaciado vertical y el tamaño de texto en pantallas pequeñas.

Accesibilidad adicional

Asociar el label al input[type=checkbox] usando for y id, e incluir aria-checked para reforzar compatibilidad con lectores de pantalla.