El otro día estaba cenando con un amigo hablando de nuestras tareas de programación, cuando de repente, la señora que estaba al lado nuestra nos dijo: Por lo que he oído, dominais el tema de la programación web, me gustaría haceros una pregunta. Lo que nos sorprendió fue la simplicidad de la cuestión: ¿Cómo hago un Formulario de Contacto con HTML5? Aquí es donde pensamos que más gente podría tener esta misma pregunta y de ahí surge este blog. Entonces…

¿Cómo crear un Formulario de Contacto con HTML5?

Resumidamente, es tan sencillo como copiar y pegar dos códigos, uno a vuestro HTML5, el otro en el CSS3 y por último en el documento php:

Código HTML5:

<!DOCTYPE html>    
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="style.css">
   <!-- La linea de arriba es para importar estilos CSS a nuestro formulario -->
  <title>Formulario de contacto</title>
 </head>
 <body>
  <section class="formulario">
    <!-- Aqui va el codigo del formulario -->
  </section>
 </body>
</html>

<form action="contact.php" method="post">
<label for="nombre">Nombre:</label>
 <input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
 <label for="email">Email:</label>
 <input id="email" type="email" name="email" placeholder="ejemplo@correo.com" required="" />
 <label for="mensaje">Mensaje:</label>
 <textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
 <input id="submit" type="submit" name="submit" value="Enviar" />
</form>

El Código CSS3:

label {
     display:block;
     margin-top:20px;
     letter-spacing:1px;
}
 .formulario {
     display:block;
     margin:0 auto;
     width:510px;
     color: #666666;
     font-family:Arial;
}
 form {
     margin:0 auto;
     width:400px;
}
 
 input, textarea {
     width:380px;
     height:27px;
     background:#666666;
     border:2px solid #f6f6f6;
     padding:10px;
     margin-top:5px;
     font-size:10px;
     color:#ffffff;
}
 
 textarea {
     height:150px;
}
 
#submit {
     width:85px;
     height:35px;
     border:none;
     margin-top:20px;
     cursor:pointer;
}

Código php:

<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$para = 'TUCORREO@CORREO.COM';
$titulo = 'ASUNTO DEL MENSAJE';
$header = 'From: ' . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";
  
if ($_POST['submit']) {
if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
alert('Mensaje enviado, muchas gracias.');
window.location.href = 'http://TUSITIOWEB.COM';
</script>";
} else {
echo 'Falló el envio';
}
}
?>

Con estos códigos vuestra página ya estaría lista con el formulario de contacto HTML5. Así de sencillo y rápido. Pero claro…

¿Qué pasa con la gente totalmente principiante?

Ahora voy a hacer una guía para ese tipo de persona y ayudar a que consigan sacar el máximo provecho al salir de este tutorial.

Empecemos…

¿Qué es el HTML5?

Antes de empezar a explicar la metodología para crear el formulario de contacto con HTML5 procederemos a detallar los conceptos básicos.

HTML5 es un lenguaje markup que se usa para estructurar y presentar el contenido del sitio web.

Aunque a veces se puede confundir con un lenguaje de programación, cabe destacar que el HTML5 no es de ninguna manera un lenguaje de programación.

Es verdad que HTML5 te permite estructurar los datos con el uso de marcadores pero no puedes modificar o procesar datos con él. A diferencia de con un lenguaje de programación como en el caso de Javascript.

¿Porqué es importante saberlo?

Para entender lo que haremos con el código próximamente te será muy favorable conocer las bases del HTML5.

Te voy a enseñar lo que puedes construir con un simple código HTML5:

Formulario de contacto con HTML5

Esto es lo que podrias producir con un código HTML. Feo, ¿Verdad? Es por eso que necesitamos más que el HTML5 para construir un formulario de contacto.

¿Qué es el PHP?

El código de php es sencillamente un código de HTML con código incrustado y que hace alguna acción.

En el caso de arriba, detecta si debe enviar el mail dependiendo de la información que haya recibido por la persona que quiera enviar el mail.

El código es ejecutado en el servidor y decide que accion debe tomar. Como podemos ver en el caso de arriba, envia un mensaje error o un “gracias por el mensaje”

¿Qué es el CSS3?

El CSS3 es un lenguaje de diseño de páginas web. Esto es lo que dará estilo a tu formulario de contacto hecho con HTML5.

Con este lenguaje, tu web puede pasar de lo que vemos arriba a esto:

Formulario de contacto con HTML5

o a este otro:

Formulario de contacto con HTML5

Gran cambio, ¿verdad? Y eso no es todo, también puedes descargar diseños preeditados y ponerlos en tu propio sitio web. Esto es lo que hace el CSS3 fascinante. Tener la capacidad de crear las ideas que quieras y de forma espectacular!

¿Cómo puedes insertar el CSS3 en el HTML5?

A lo mejor a estas alturas te estés preguntando:

Muy bien, ahora tengo el código HTML5 y el CSS3. Sé perfectamente lo que es cada uno, pero… ¿Cómo insertarlo en el CSS3?

Esto lo haremos de manera muy sencilla. En donde tengas el código HTML5 vas a tener que poner el siguiente código:

<link href = "style.css" rel = "stylesheet" type = "text/css">

Y ya tendríamos listo el formulario de contacto con HTML5 para usar libremente!

¿Porqué te recomendamos utilizar un CSS personalizado en tu formulario de contacto?

Te vas a dar cuenta de que el código que te estoy proporcionando es para crear un formulario de contacto con HTML5 muy sencillo y la mayoría de los tutoriales que encontrarás te proporcionarán el mismo código.

La razón de esto es que un formulario muy personalizado requiere un código muy extenso.

Recomendamos que utilices webs como colorlib para descargarte tus plantillas.

Ahora te mostraré algunos ejemplos con el link de descarga:

EJEMPLOS DE FORMULARIO DE CONTACTO CON HTML5:

Formulario de contacto con HTML5

Formulario de contacto Colorlib con Google Maps en el fondo.

DEMOSTRACIÓN DESCARGAR

Formulario moderno de Colorlib.

DESCARGAR DEMOSTRACIÓN

Formulario de contacto con HTML5

Si quieres un formulario de contacto que te ayude a mostrar la ubicación de tu local este formulario es para ti.

DESCARGAR FORMULARIO

Formulario de contacto con HTML5

¿Buscas un formulario de contacto sencillo y a la vez elegante? Descárgate este formulario y no te arrepentirás!

DESCARGAR

¿Eres un ngocio local que quiere mostrar su ubicación de manera muy detallada? Este formulario es para ti!

DESCARGAR

¡HASTA AQUÍ EL TUTORIAL DE FORMULARIO DE CONTACTO CON HTML5!

¿QUÉ TE HA PARECIDO? ¿UTILIZARÁS ALGUNOS DE ESTOS EJEMPLOS?

Si quieres mirar nuestro tutorial para crear tu tienda online y llevarla al siguiente nivel, aquí te dejo el post:

¡Nos vemos!