En este tutorial construiremos un formulario de contacto funcional y validado desde cero, en esta primera parte veremos como hacer la estructura en HTML y los estilos en CSS.
Actualización: Acabo de publicar un tutorial para usuarios avanzados de como hacer un formulario de contacto similar a este, capaz de enviar mensaje sin recargar la pagina usando AJAX, todo en un solo tutorial.
Resultado Final
Estructura HTML
Vamos a empezar con una estructura HTML base y guardamos este archivo como index.html:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < html > < head > < title >Contacto</ title > < link rel = 'stylesheet' href = 'estilos.css' > </ head > < body > < form class = 'contacto' > < div >< label >Tu Nombre:</ label >< input type = 'text' value = '' ></ div > < div >< label >Tu Email:</ label >< input type = 'text' value = '' ></ div > < div >< label >Asunto:</ label >< input type = 'text' value = '' ></ div > < div >< label >Mensaje:</ label >< textarea rows = '6' ></ textarea ></ div > < div >< input type = 'submit' value = 'Envia Mensaje' ></ div > </ form > </ body > </ html > |
Hoja de Estilos
Vamos a crear una hoja de estilos, le ponemos de nombre estilos.css y la ubicamos en la misma carpeta en donde esta el .htmlEmpezamos con el siguiente código que define las propiedades de fuente, color de fondo y longitud del body:
1 2 3 4 5 6 7 8 9 10 | *{ font-family : sans-serif ; font-size : 12px ; color : #798e94 ; } body{ width : 400px ; margin : auto ; background-color : #E2ECEE ; } |
Formulario
Hacemos un selector para el formulario (.contacto) y le definimos border, border-radius, padding, margin, y color de fondo:11 12 13 14 15 16 17 18 | .contacto{ border : 1px solid #CED5D7 ; border-radius: 6px ; padding : 45px 45px 20px ; margin-top : 50px ; background-color : white ; box-shadow: 0px 5px 10px #B5C1C5 , 0 0 0 10px #EEF5F7 inset ; } |
Luego hacemos selectores para label y div y ponemos el siguiente código:
19 20 21 22 23 24 25 | .contacto label{ display : block ; /* esto es para que el label se sobreponga a la caja de texto */ font-weight : bold ; } .contacto div{ margin-bottom : 15px ; /* esto los separara un poco */ } |
Cajas de texto
Para las cajas de textos usamos selectores multiples, para los input y para el textarea:26 27 28 29 30 31 32 33 34 35 36 37 | .contacto input[type= 'text' ], .contacto textarea{ padding : 7px 6px ; width : 294px ; /* una longitud definida */ border : 1px solid #CED5D7 ; resize: none ; /* esta propiedad es para que el textarea no sea redimensionable */ box-shadow: 0 0 0 3px #EEF5F7 ; margin : 5px 0 ; } .contacto input[type= 'text' ]:focus, .contacto textarea:focus{ outline : none ; /* reset especifico para Chrome/Safari */ box-shadow: 0 0 0 3px #dde9ec ; } |
Boton de Envio
Por ultimo para el boton de envio usaremos estilos similares a los de las cajas de textos, pero ademas va a tener bordes redondeados, sombra al texto y para el background le pondremos degradados CSS3:38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | .contacto input[type= 'submit' ]{ border : 1px solid #CED5D7 ; box-shadow: 0 0 0 3px #EEF5F7 ; padding : 8px 16px ; border-radius: 20px ; font-weight : bold ; text-shadow : 1px 1px 0px white ; background : #e4f1f6 ; /* fallback para navegadores que no soporten degradados */ background : -moz-linear-gradient( top , #e4f1f6 0% , #cfe6ef 100% ); background : -webkit-linear-gradient( top , #e4f1f6 0% , #cfe6ef 100% ); } .contacto input[type= 'submit' ]:hover{ background : #edfcff ; background : -moz-linear-gradient( top , #edfcff 0% , #cfe6ef 100% ); background : -webkit-linear-gradient( top , #edfcff 0% , #cfe6ef 100% ); } .contacto input[type= 'submit' ]:active{ background : #cfe6ef ; background : -moz-linear-gradient( top , #cfe6ef 0% , #edfcff 100% ); background : -webkit-linear-gradient( top , #cfe6ef 0% , #edfcff 100% ); } |
Código final CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | *{ font-family : sans-serif ; font-size : 12px ; color : #798e94 ; } body{ width : 400px ; margin : auto ; background-color : #E2ECEE ; } .contacto{ border : 1px solid #CED5D7 ; border-radius: 6px ; padding : 45px 45px 20px ; margin-top : 50px ; background-color : white ; box-shadow: 0px 5px 10px #B5C1C5 , 0 0 0 10px #EEF5F7 inset ; } .contacto label{ display : block ; font-weight : bold ; } .contacto div{ margin-bottom : 15px ; } .contacto input[type= 'text' ], .contacto textarea{ padding : 7px 6px ; width : 294px ; border : 1px solid #CED5D7 ; resize: none ; box-shadow: 0 0 0 3px #EEF5F7 ; margin : 5px 0 ; } .contacto input[type= 'text' ]:focus, .contacto textarea:focus{ outline : none ; box-shadow: 0 0 0 3px #dde9ec ; } .contacto input[type= 'submit' ]{ border : 1px solid #CED5D7 ; box-shadow: 0 0 0 3px #EEF5F7 ; padding : 8px 16px ; border-radius: 20px ; font-weight : bold ; text-shadow : 1px 1px 0px white ; background : #e4f1f6 ; background : -moz-linear-gradient( top , #e4f1f6 0% , #cfe6ef 100% ); background : -webkit-linear-gradient( top , #e4f1f6 0% , #cfe6ef 100% ); } .contacto input[type= 'submit' ]:hover{ background : #edfcff ; background : -moz-linear-gradient( top , #edfcff 0% , #cfe6ef 100% ); background : -webkit-linear-gradient( top , #edfcff 0% , #cfe6ef 100% ); } .contacto input[type= 'submit' ]:active{ background : #cfe6ef ; background : -moz-linear-gradient( top , #cfe6ef 0% , #edfcff 100% ); background : -webkit-linear-gradient( top , #cfe6ef 0% , #edfcff 100% ); } |
Con eso hemos terminado de diseñar nuestro formulario utilizando solo HTML y CSS, recuerda que puedes ver el resultado final en este enlace.
Si no entendiste una parte o tienes alguna duda, házmela saber en los comentarios, no olvides suscribirte por correo electrónico para que seas notificado cuando se publiquen las continuaciones de este tutorial.
No hay comentarios:
Publicar un comentario