Formulario de contactos con HTML5 CSS y PHP
A continuación explicaré como realizar un formulario de contacto de manera simple y eficiente utilizando una combinación de los lenguajes HTML5, CSS y PHP. Con la nueva versión de HTML (HTML5), el código para desarrollar sitios web es más limpio, intuitivo y comprende nuevas características y propiedades que simplifican nuestro trabajo, gracias a esto los formularios también se desarrollan de una manera más simple y efectiva.
Para que funcione correctamente el formulario es necesario correrlo en un servidor web para que el código php pueda ser ejecutado.
Estructura HTML
Para comenzar a desarrollar el formulario, primero debemos crear nuestro archivo contactos.html, el mismo contendrá el código que generará visualmente el formulario en nuestra página.
archivo : contacto.html
<html>
<head>
<title>Formulario de contactos con HTML5 CSS y PHP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="estilo.css">
</head>
<body>
<section class="formulario">
<form action="contacto.php" method="post">
<label>Formulario de contactos</label>
<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="karlosrivas@gmail.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>
</body>
</html>
Podemos ver que gracias al lenguaje HTML5, las etiquetas utilizadas son mucho más intuitivas y faciles de leer, a diferencia de las versiones anteriores, donde se utilizaban divs para crear bloques, ahora los diferenciamos con etiquetas fácilmente reconocibles como head, header, section, article, footer, entre otras…
El CSS
A continuación aplicaremos estilos al formulario, para ello debemos crear el archivo estilo.css e incluír el siguiente código en él. Esta parte depende de la creatividad de cada uno, este código se puede modificar a gusto adaptándolo al diseño de su sitio web.archivo : estilo,css
/*
Created on : 14/04/2014, 09:29:06 PM
Author : kriv@s.net
*/
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;
}
PHP
A continuación creamos el archivo contacto.php e incluimos el siguiente código.<?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']) {
echo "<h1>Nombre : $nombre<br>";
echo "E-mail : $email<br>";
echo "Mensaje : $mensaje<br></h1>";
if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
alert('Mensaje enviado, muchas gracias.');
window.location.href = 'http://TUSITIOWEB.COM';
</script>";
}
else {
echo "<script language='javascript'>
alert('Fallo en envio, lo sentimos mucho.');
window.location.href = 'http://kjarlosrivas.blogspot.com'.;
</script>";
}
}
?>
Vista Previa del ejercicio
