Form paginado: estilos CSS
Definir los estilos de la página
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
@charset "utf-8";
* {
box-sizing: border-box;
}
html{
font-family: arial;
font-size: 20px;
}
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
.main {
display: block;
width: 50%;
padding: 24px 80px;
margin: 60px auto;
box-shadow: 0 0 18px 5px #80808033;
border-radius: 12px;
}
@media (max-width: 992px){
.main{
width: 90vw;
padding: 30px 15px;
}
}
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.
.indice {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100px;
}
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
.indice .linea {
display: flex;
justify-content: space-between;
height: 2px;
width: 67%;
background: red;
margin-bottom: 8px;
position: relative
}
.indice .linea > div {
height: 15px;
width: 15px;
display: block;
background: white;
position: relative;
top: -6px;
border-radius: 50%;
border: 1px solid black;
}
.indice .linea :is(.active, .completo){
background: red;
}
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.
.indice .textos {
display: flex;
justify-content: space-between;
padding: 5px;
width: 100%;
align-items: center;
color:#acaaa794
}
.indice .textos > div {
flex: 1;
text-align: center;
}
.indice .textos .active{
color: black;
}
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
.form-pag section {
display: none;
margin: 10px auto;
}
.form-pag section.active {
display: block;
}
.form-pag section> div {
display: grid;
grid-gap: 8px;
grid-template-columns: 100px 1fr;
grid-template-areas:
". ."
"av av";
margin-bottom: 12px;
align-items: center;
}
@media (max-width: 500px){
.form-pag section> div {
grid-template-columns: 1fr;
grid-template-areas:
"x"
"av";
}
}
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.
.form-pag .aviso {
color: red;
font-size: 0.8rem;
font-style: italic;
grid-area: av;
visibility: hidden;
}
.form-pag .error .aviso {
visibility: visible;
}
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.
.form-pag input{
height: 48px;
font-size: 0.9rem;
padding:0 10px;
border-radius: 6px;
border: 1px solid #c3c3ca;
}
.form-pag :is(#codpostal, #telefono) {
width: 60%;
}
.form-pag input:-webkit-autofill,
.form-pag input:-webkit-autofill,
.form-pag input:-webkit-autofill:hover,
.form-pag input:-webkit-autofill:focus,
.form-pag input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
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.
.form-pag nav{
display: flex;
justify-content:space-between;
width: 100%;
margin-top: 2rem;
}
.form-pag nav >button {
display: none;
margin:0 4%;
flex: 1 0 30%;
text-align: center;
background: orange;
border: orange;
padding: 10px 0;
font-size: 0.95rem;
border-radius: 10px;
cursor: pointer;
}
.form-pag nav >button:hover {
background: #f1d113;
border: orange;
}
.form-pag nav .visible{
display: block;
}
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.
Comentarios
Es el momento de definir las reglas de estilo que darán a la pa´gina el aspecto buscado.
Como ves se hace uso de los dos sistemas de layout ce CSS:
- flex
- grid
Cada uno satisface una necesidad.
El resultado es responsive, solo se ha definido un punto de corte en 450px.
A partir del punto de corte hacia pantallas más anchas tenemos las etiquetas (label) y los input en dos columnas
Para pantallas estrechas solo hay una columna para label e input.
Este diseño no se ha hehco mobile first por dos razones:
- Necesita muy pocos cambios para ser visibles cómodametne en pantallas estrechas.
- Me resulta más cómodo diseñar primero para pantalla grande y luego ajsutar a pequeñas
Quiero decir con esto que el diseño mobile first (dieñar pensando en la pantalla del móvil) es una opción muy seguida actualmente pero no es obligatoria y no da mejores ni peores códigos.
Copia cada código de estilos de esta página y colocalo en el archivo de estilos
Luego línca ese archivo en la sección head de la página
<link href="form-pag.css" rel="stylesheet" type="text/css">
Si lo has hecho todo bien la página ahora tendrá el aspecto buscado.