Formulario de contacto con html5 y CSS3 responsive

By Rolando Sanchez miércoles, 1 de junio de 2016

Share Tweet Share Pin Email

Muy buenas a todos, esta vez les traigo algo muy simple pero de mucha utilidad, se trata del diseño de un formulario de contacto en html y css para tu web o blog.

El propósito de este pequeño aporte es muy simple pero estoy seguro que le va a servir a más de alguno claro que si ya sabes como hacer esto bueno pues no pasa nada aquí estamos para los que no saben pues de eso se trata estos pequeños tutoriales más que nada para ayudar y motivar a quienes están con el deseo de aprender y querer aumentar sus conocimientos.

Bueno pues esto no va hacer de tanto blabla puesto que estoy seguro que hay gente que maneja el html aunque sea un poquito de hecho mas adelante estaré haciendo un curso de html5 y de las apis que posee recuerda que esto se trata de aprender de abajo hacia arriba.

El código a continuación para el maquetado en html es el siguiente.

El proyecto consta de dos archivos el index.html y el style.css, ya que estás viendo la imagen de arriba notaras que arriba en el head puedes ver una etiqueta esta nos permite enlazar ambos archivos para que el index.html pueda reconocer los estilos que le daremos más adelante.

Luego dentro del body tenemos la etiqueta form esta es importante para que el formulario pueda ejecutar el envió por medio del atributo actión, bueno en realidad form tiene mas atributos pero no lo detallaremos en este post ya que mas adelante veremos como procesar este formulario.

Dentro del form hay mas contenido importante como es el caso de los input, estas son etiquetas de entradas muy importante para almacenar la información que envía el formulario, como puedes ver en nuestro caso hay tres tipos de input los cuales son de tipo texto, email y tel estos trabajan de diferentes formas según el dispositivo y los medios en los que nos encontremos por ejemplo el input de tipo text almacenara cualquier texto, numero o cadena de caracteres que el usuario introduzca pero el de tipo email posee un formato de tipo tucorreo@correo.com que si no se respeta marcara error a la hora de enviar el form, el de tipo tel o teléfono es muy similar al de tipo text la única diferencia  es que cuando un usuario entra al formulario por media de un dispositivo mobil este abrirá una especie de teclado numérico que permitirá al usuario ingresar nuemeros.

Tambien puedes ver una etiqueta textarea que le permite al usuario visualizar e introducir mucho texto que por lo normal es alguna información que el usuario envía como reclamos, detalles de algo en especifico o cualquier petición que el usuario solicite.

Cada una de las etiquetas poseen atributos class, estas permiten identificar el estilo para cada uno de ellas el cual se encuentran en el archivo style.css ademas si ves detalladamente vas a ver un atributo llamada placeholder esto permite añadir un texto de ejemplo para cada una de las entradas de texto en nuestro formulario.

Para finalizar la explicación de ver una etiqueta button esto no es mas que un botón para enviar nuestro formulario claro que para enviar un formulario vendría mejor usar la etiqueta esta es la clásica para envíos de información por medio de php. Seguidamente vamos a ver que al final esta la etiqueta de cierre

esta nos sirve para dar por finalizada la maquetación de nuestro formulario.

Ahora vamos a lo bonito, en este momento nuestro maquetado se ve a si.

Se ve totalmente feo claro ya que no tiene el css necesario para verse bien.

Por si no sabes que es css, es una hoja de estilo en cascada o Cascading Style Sheets(css) esta hoja de estilo es el que hace posible la magia de esconder lo feo del puro html claro que si, pero bueno no vamos a entrar mucho en el tema de css, hay que enfocarnos en el codigo de la hoja de estilos que pondré a continuación.

form{
margin: 0 auto;
width:450px;
margin-bottom: 20px;
padding: 10px 20px;
border-radius: 7px;
background-color: rgba(10,60,70,0.7);
box-sizing:border-box;
margin-top:20px;
text-align: center;
}
input,textarea,select{
width: 100%;
margin-bottom: 20px;
padding: 7px;
box-sizing:border-box;
font-size: 17px;
border: none;
}

form h2{
color: #fff;
font-size: 40px;
margin-bottom: 20px;
display:inline-block;
font-family: monospace;
}
textarea{
max-height: 200px;
min-height:100px;
max-width: 100%;
}
#boton{
background-color: #31384A;
color: #fff;
padding: 20px;
border: none;
width: 100%;
font-family: monospace;
font-weight: bolder;
font-size: 2em;
}
#boton:hover{
cursor:pointer;
}

@media (max-width:480px){

form{
 width:100%;
}

}

No entrare en fondo a explicar el css por la razón que ustedes mismos deben estar pensado jajaja ya me lo imagino tan largo este código que explicarlo todo seria una locura por lo que explicare algo importante ya que este formulario es responsive se adapta a dispositivos mobiles sin perder su diseño.

Entonces te voy a explicar rápidamente en que consiste el diseño responsivo, yo le he dado a la etiqueta form del index.html el diseño principal desde el archivo css si sabes un poco de css sabrás leerlo sinproblema alguno pero hay una propiedad que quiero mostrarte box-sizing: border-box esta es es una propiedad CSS para cambiar el modelo de caja por defecto de los navegadores, con esto hacemos que el ancho especificado sea equivalente al ancho total ya que como verán le hemos puesto padding:10px 20px; estas propiedades agregan mas anchura a nuestro diseño y viendolo con un dispositivo mobil quedaría a sí. 

Como podes ver se ve bastante mal, algo muy importante que tienes que saber para que la propiedad box-sizing:border-box sea compatible con todos los navegadores es que debes agregar los prefijos para cada navegador los cuales serian.

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box; 

Debes agregar estos prefijos para cada navegador en otros tutoriales aprenderemos mas sobre estos prefijos.

Ahora por ultimo esta el media query que hara posible que se vea totalmete responsivo a continuación.

@media (max-width:480px){

form{

          width:100%;

}

}

Con esto terminamos este pequeño aporte y bueno para explicar un poco aquí creamos un media query para los que no saben que es un media query.

Media Quieres

  

es un modulo de CSS3 que permite adaptar la presentación del contenido de un sitio web a características de dispositivos móviles como ejemplo esta la resolución de la pantalla.

Entonces el modo en que creamos o declaramos media queries es @media() y entre paren-tisis van las diferentes resoluciones que abarcan distintos dispositivos en nuestro caso tenemos @media(max-width:480px) esto significa que la media query creada sera para dispositivos de 480px  dentro encontramos el selector form con ancho del 100% que nos dice todo esto, bueno pues es fácil de entender,en todo dispositivo que tenga 480p nuestro formulario tendrá 100% de ancho osea tomara el ancho total del navegador.


Espero que esto sea de utilidad para alguien que este aprendiendo sobre estilos css y html, ahora prometo que haré un post donde aprendas a enviar los datos de este form a un correo electrónico y luego a una base de datos es un gusto y sera hasta la próxima.

adjunto link para que descargues los archivos que trabajamos.

Descargar archivos del proyecto