Formulario de contacto Creativo – Html5, Css, JavaScript y Php / parte #1

En este tutorial vamos a comenzar el proceso de creación de un completo formulario de contacto, maquetado en HTML, estilizado con CSS,  verificamos los datos o validamos los datos con JAVASCRIPT y por últimos lo procesamos con PHP.

En un tutorial pasado realizamos un formulario de contacto básico pero muy funcional (tutorial-formulario-de-contacto-en-html5-y-css3), esta vez vamos a ser un poco mas creativo y vamos a utilizar técnicas un poco mas avanzada para realizarlo.

Esto es lo que vamos a conseguir:

Para una buena visualización de este formulario:

img formulario de contacto

Ok, vamos a comenzar.

El HTML

En el código anterior vemos el formulario tradicional, muy sencillo y fácil para entenderlo, tenemos las etiqueta <form>, los <label> y los <input>, dentro de los label tenemos la etiqueta <span> para mostrar el titulo de requerido, tenemos la etiqueta <input> definiendo el tipo de entrada con el nombre identificativo del campo y le añadimos una clase para darle estilos, igual para el  <textarea>, adicionalmente dividimos el formulario en 2 columnas por medio de <div class=”column”> en lado vamos a dejar los campos de nombre, email y asunto, y en la otra columna el campo de texto para el mensaje y fuera de las columnas el botón de enviar con una clase class=”form-btn”.

Seguimos con el CSS

Aplicamos los estilos al contenedor principal del formulario, le damos un ancho, padding un fondo blanco y en background-image le aplicamos un degradado lineal que podemos conseguir ya sea escribiendo el código o utilizando una herramienta para generar css3 online, lo generamos para los diferentes navegadores y utilizamos el PIE.htc para lograr compatibilidad con IE versión 8 y alineamos el texto a la izquierda.

Clase para el subcontenedor del formulario.

Estilos para los diferentes <input>, aplicamos sombras, redondeamos los bordes y utilizamos PIE.htc para las versiones de IE antiguas le damos ancho y alto, color de fondo y  color de texto etc.

Estilos para los labels, le damos un color y tamaño, y los <span> que estan en los labels, que es el texto que dice requerido lo colocamos de color rojo y un poco mas pequeño.

Estilos para el botón de enviar y también aplicamos los estilos para su estado hover, es decir cuando me sitúe sobre el.

Estilos para definir las 2 columnas con first-of-type y last-of-type lo que hacemos es ubicarlas con el float y a la ultima le aplicamos márgenes.

Esto es lo que hicimos:

img formulario de contacto

Nos vemos en el siguiente tutorial con la parte de la validación de los campos de este formulario.

Ver segunda parte:

#2 Formulario de contacto Creativo – Validaciones con Javascript

#3 Formulario de contacto Creativo – Enviar datos al correo con PHP

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

7 Respuestas

  1. Me gustaria saber si me podrías enviar al correo el codigo ya para implementarlo en la pagina…..yo segui tus pasos pero no me funciono

    • Johanso dice:

      Hola Francisco, este formulario lo puedes descargar en la página del tutorial. Solo debes de cambia el email de recepción y listo.

  2. que pena contigo jhoan ricardo… intente todo lo que me dijiste pero la verdad es que hasta ahora me estoy iniciando con todo esto de la maquetacion y la programacion html.
    bueno a decir verdad es que hasta ahora me encuentro estudiando en la universidad y no se mucho de divs y de este tipo de programacion. Pero la verdad es que he implementado el formulario de tu tutorial en un par de paginas y me ha servido demasiado. y ahora lo necesito a dos columnas como te lo explique anteriormente. sera que tu me puedes ayudar y me envias el codigo para implementarlo y obviamente para estudiarlo. nuevamente muchas gracias y estare atento a tu respuesta y/o comentario. saludos desde Colombia.

  3. muyy http://www.tutosytips.com/tutorial-formulario-de-contacto-en-html5-y-css3/
    Muyy buenos dias dejame felicitarte por todos los tutoriales que subes , son muy buenos y me han servido demasiado.
    quisiera saber una cosa… en el posto que vincule no pude comentar por eso lo hago aqui, y quisiera saber si me puedes ayudar para que la seccion de mensaje quede al lado derecho de nombre email y sitio web?
    osea que el formulario de contacto quede a dos columnas exactamente igual al de este tutorial. muchas gracias por la atencion prestada.

    • Admin dice:

      Hola francisco, muchas gracias y me alegra que te ayuden estos tutoriales.
      Bueno, hay varias formas para hacer lo que quieres, la mas facil sería que dividieras el formulario con divs, en un div meter los li de nombre, email y sitio web, y en la otra columna el li de comentarios, y luegos flotas el div a la izquierda, es muy facil. Otra opción es con CSS3 columns. Otra es que apliques una clase al li del comentario y la flotes a la izquierda de los demas li. Intentalo y me cuentas si no puedes y te envio el código.