Cargando



Formulario de contacto con CSS3

En este tutorial veremos cómo realizar un formulario de contacto utilizando las transiciones de CSS3, para su implementación en cualquier sitio web que deseemos.


jul 16 2015 15:57
Avanzado
ago 22 2016 16:31

Uno de las secciones más importantes de cualquier sitio web es el formulario de contacto, el cual puede ser tan simple como agregar unos simples campos y un botón para enviar esta información introducida, pero siempre podemos ir un poco más allá y si somos creativos, implementar un formulario de contacto que no solo cumpla con su funcionalidad inherente sino que también brinde un efecto visual y agradable al usuario.

 

Veamos los pasos entonces a seguir para la implementación de este formulario que simulará un sobre que al pasar el cursor del ratón permitirá al usuario rellenar los datos dentro de lo que será una carta, y todo esto con el uso de HTML y CSS3.

 

Assets o recursos


Primero necesitamos tener nuestro sobre donde irá nuestra carta, para ello utilizaremos dos imágenes diferentes, una de la parte superior del sobre y otra de la parte inferior, que combinadas con las transiciones nos darán el efecto que deseamos.

 

fomrulario-contacto-css3.jpg

 

Cómo vemos no son nada complicadas sin embargo, estas imágenes se encuentran en el repositorio creado para este ejemplo que encontrarán al final del tutorial en el enlace correspondiente para su descarga.

 

Construcción del formulario


Primero crearemos un archivo HTML que se llamará formulario_contacto.html el cuál contendrá nuestro formulario como tal y la inclusión del archivo .css que será el encargado de manejar los estilos del mismo así como las transiciones, veamos como luce:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Formulario de Contacto</title> <link type="text/css" rel="stylesheet" href="estilos.css" /></head><body> <div id="wrap"> <h1>Envianos un mensaje</h1> <div id='form_wrap'> <form> <p>Hola!</p><br> <label for="mensaje">Mensaje: </label> <textarea name="mensaje" value="Tu mensaje aqui" id="mensaje" ></textarea> <p>Ingresa tus datos</p><br> <label for="nombre">Nombre: </label> <input type="text" name="nombre" value="" id="nombre" /> <label for="email">Email: </label> <input type="text" name="email" value="" id="email" /> <input type="submit" name ="submit" value="Enviar" /> </form> </div> </div></body></html>
Ahora solo necesitamos crear nuestro .css llamado estilos.css y allí colocar estilos para nuestro formulario y utilizar las transiciones para generar el efecto deseado, primero cambiaremos un poco la apariencia de nuestro body para darle la apariencia de una carta:
body {background: #ccc url('img/bg_carta_fuera.png'); color: #7c7873; font-family: 'helvetica';}p {text-shadow:0 1px 0 #fff; font-size:24px;}#wrap {width:530px; margin:20px auto 0; height:1000px;}h1 {margin-bottom:20px; text-align:center;font-size:48px; text-shadow:0 1px 0 #ede8d9; }
Hecho esto vamos a implementar las transiciones en el div que contiene el formulario para ello utilizaremos transition en sus diferentes variantes para cada navegador y con el valor ease-in-out le daremos el efecto de un comienzo lento y un final:
#form_wrap { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;}
Ahora con los pseudo elementos before y after completaremos el efecto de la carta saliendo del sobre, veamos:
#form_wrap:before {content:""; position:absolute; bottom:128px;left:0px; background:url('img/antes.png'); width:530px;height: 316px;} #form_wrap:after {content:"";position:absolute; bottom:0px;left:0; background:url('img/despues.png'); width:530px;height: 260px; }
Po último agregamos algunos estilos para el botón de submit para así controlar tanto el despliegue como los efectos sobre el mismo:
#form_wrap input[type=submit] { position:relative;font-family: 'helvetica'; font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff; width:100%; text-align:center;opacity:0; background:none; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: opacity .6s ease-in-out 0s; -moz-transition: opacity .6s ease-in-out 0s; -o-transition: opacity .6s ease-in-out 0s; transition: opacity .6s ease-in-out 0s; } #form_wrap:hover input[type=submit] {z-index:1;opacity:1; -webkit-transition: opacity .5s ease-in-out 1.3s; -moz-transition: opacity .5s ease-in-out 1.3s; -o-transition: opacity .5s ease-in-out 1.3s; transition: opacity .5s ease-in-out 1.3s;}
Veamos entonces como luce nuestro formulario de contacto inicial cuando lo ejecutamos en el navegador:

 

 

Si pasamos el cursor del mouse sobre el mismo veremos la funcionalidad de que se despliega el formulario para poder ingresar los datos y enviar:

 

 

Como vemos fue bastante sencilla la construcción de este formulario y lo mejor de todo es que no estamos atados a ninguna librería externa por lo que su implementación es bastante sencilla en cualquier sitio web, solo queda de cada quién extender el ejemplo y realizar la funcionalidad del envío mediante algún lenguaje de programación, como PHP, Ruby, Python o incluso Node.js.

 


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X