Form paginado: estilos CSS

Una vez hemos detectado los bloques a los que tenemos que dar una apariencia concreta, llega el momento de definir esa apariencia mediante las reglas de estilo CSS.

Como sabemos las clases necesarias y para que son necesarias, definir los estilos no va a ser demasiado complicado.

Para comenzar vamos a escribir estas lineas en nuestro archivo CSS para definmir algunas características globales de la página

Con esto aseguro que los contenidos no sobrepasen los límites de las cajas CSS y coloco el tipo de letra y tamaño por defecto para toda la página

Pasamos al primer elemento, el contendor general con clase .main

Con los padding laterales conseguimos que el formulario no ocupe todo el ancho del bloque, que deje espacios en blanco, ya sabes que los vacíos son muy importantes en el diseño web.

Para pantallas estrechas adapto el .main para ocupar casi toda la ventana y amplio el espacio para los campos disminuyendo el padding.

Bloque Indice

Pasamos al indice con la linea horizontal y los puntos para marcar el avance por los subformularios.

Este diseño hace un uso algo más avanzado del CSS. En el diseño dejamos dos bloques con la idea de usar uno para la linea horizontal y los círculos y otro para los textos (credenciales, datos, social).

Estos bloques estarán en una columna, para logararlo usamos la disposición flex, muy útil para ordenar los elementos en filas o columnas. Con flex en fomra de columna tya tendríamos la linea arriba y los textos abajo.

Además le damos una altura absoluta al bloque que lo separa del formulario. La position relative permite usar el bloque como referencia para las lineas.

Y le toca el turno al contenido del inidce las clases linea y textos. Ambas son similares: los bloqeus deben quedar en horizontal y centrados en el contenedor. Pues sendos flex nos solucionan la posición de ambos

Cada div dentro del bloque .linea será un círculo. Lo defino con sus dimensiones y lo coloco desplazado en vertical para que se dibuje justo en el centro de la linea.  Paara que se ve redondo se usa la propiedad border-radius

Cuanod estamos rellenando uno de los subformuarlio el circulo correspondiente en la linea se pondrá en rojo, como se ve en los bocetos. Esto lo logra la clase .active aplicada a los bloques dentro de .linea

Algo similar es necesario para el bloque de textos. Los textos deben aparecer distribuídos en horizontal lo que se logra con el display flex. El texto correspondiente al subformualrio actual debe destacarse, mientras el resto permanece con un color débil.

Cada texto está centrado en su bloque y con flex:1 logramos que los bloques se repartan de manera uniforme

Al entrar en un subformulario, el texto actual se pondrá en un color más fuerte.

Secciones del formulario

Las secciones del formulario (los subformularios) en principio están ocultas (dispaly: none). Solo el subformulario activo será visible, esto lo logra la clase .active aplicada a section.

Dentro de cada sectión están los bloques div conteniendo las label, input y div de aviso. Están distribuídos mediante grid

Para pantallas estrechas este grid se convierte en una solo columna

El media query definido al principio se unirá a este último en el archivo CSS

El bloque dedicado a los mensajes de error tiene la clase aviso, en principio está oculto. en este caso uso visibility para que no se ve pero se mantenga el espacio qeu opupa.

El aviso se mostrará (visibility: show) cuando el bloque en el que se encuentra tenga la clase .error. por eso el selector div .error .aviso

A los campos le aplicamos los estilos para que se vean como en el boceto. el campo para codigo postal y teléfono los pongo más estrechos. Los input. van con un recuadro de esquinas redondeadas.

La última regla defnida en este bloque es un truco para que los campos autorrellenos tengan el color de fondo que queramos. Este color lo decide el navegador, con este truco podemos personalizarlo.

Botones nav

Ya solo quedan los botones de navegación entre subformularios. Lo máximo que habrán son dos botones en horizontal. Los dispongo con un layout tipo flex, en horizontal y espaciado.

Cada botón le pongo el fondo, borde, color, esquinas redondeadas. Y en principio los pongo ocultos.

En la primera página del subformulario solo se ve el botón siguienta, en la segunda seven anterior y siguiente, y en la última anterior y enviar.

Solo queda poner todos estos estilos en un archivo de estilos, le llamamos  formpag.css. y lo enlazamos en la cabecera de la página web.

Si ahora purebas la página verás que ya tiene el aspecto que queríamos. Si te apetece cambiar algunos estilos ahora es el momento.