Aquí dejo un formulario de contacto en HTML5 y CSS3 listo para utilizar.

Para la explicación he dividido el formulario en sus cuatro partes diferenciables; HTML, CSS, php y jQuery.

HTML

Entre las nuevas características de HTML5 para formularios cabe destacar el placeholder, que podría sustituir a la propiedad value que se utiliza para preasignar un valor a los campos del formulario; a diferencia de que el placeholder no es un valor como tal sino que hace de indicador. Al hacer click en el input el placeholder desaparece. Esto antes se hacía con el value y alguna función de javascript.

Nuestro formulario tendrá 6 campos y el comentario del visitante: Nombre, Apellidos, Empresa, Cargo/Departamento, Teléfono y E-mail; al que añadimos el comentario como textarea.

El HTML de nuestro formulario, por tanto, ha de quedar así:

<form id="formulario" name="formContacto" method="post" action="process.php" >
	<label for="nombre">Nombre*:</label>
	<input name="name" placeholder="Introduce tu hombre" class="required" /><br />
        
	<label for="apellidos">Apellidos*:</label>
	<input name="surname" placeholder="Tus dos apellidos" class="required" /><br />
                
	<label for="empresa">Empresa*:</label>
	<input name="company" placeholder="¿Para quién trabajas?" class="required" /><br />
    
	<label for="departamento">Cargo/Departamento:</label>
	<input name="department" placeholder="¿Qué función desempeñas?" /><br />
            
	<label for="telefono">Teléfono:</label>
	<input name="phone" placeholder="¿Hablamos?" /><br />
        
	<label for="mail">E-mail*:</label>
	<input name="mail" placeholder="Podré contestarte" class="required" /><br />
            
	<label id="modif01" for="comentario">Comentario:</label>
	<textarea id="modif02" placeholder="Escribeme tu comentario aquí" name="comment"></textarea><br />
                    
	<div id="aster" > * | Campos obligatorios</div>
                            
	<input class="botonAcceder" type="submit" id="boton" value="Enviar" />
</form>  

También he aprovechado los nuevos tipos de input (tel y email) para los campos correspondientes al teléfono y el correo electrónico.

PHP

En todo fomulario, bien mediante html bien mediante javascript (u otros métodos), debemos especificar un action que indique qué sistema gestionará los datos recogidos en el formulario y procederá a enviarlos por correo electrónico.

En este ejemplo concreto lo indico mediante el propio html con la siguiente línea, diciéndo que process.php será el fichero que gestione los datos de mi formulario y, además, se los haré llegar mediante el método POST.

<form id="formulario" action="process.php" method="post" name="formContacto"></form>

Recogiendo datos del formulario

En este fichero lo que haremos será recoger los datos que llegan con el método indicado (en este ejemplo POST):

/*	Recopilo los datos vía POST	Con strip_tags suprimo etiquetas HTML y php para evitar una posible inyección.	Como no gestiona base de datos no es necesario limpiar de inyección SQL.*/
$nombre = strip_tags($_POST['name']);
$apellidos = strip_tags($_POST['surname']);
$empresa = strip_tags($_POST['company']);
$departamento = strip_tags($_POST['department']);
$telefono = strip_tags($_POST['phone']);
$correo = strip_tags($_POST['mail']);
$comentario = strip_tags($_POST['comment']);

Además, aprovecho para recoger la hora del envío para incluirlo en el email de notificación (el que me llegará a mí con el comentario del visitante).

$fecha = time();$fechaFormateada = date("j/n/Y", $fecha);

No voy a entrar en detalles sobre cómo funcionan las funciones time y date de php, pero básicamente time recoge la hora del servidor y date la adapta a un formano humanamente legible (importante tener tu servidor configurado para el mismo uso horario en el que vives).

Preparando el envío por correo electrónico
Lo siguiente que tenemos que hacer (y prácticamente lo último) es preparar el contenido y cabeceras del email que vamos a enviar.

Sin entrar en mucho detalle sobre las cabeceras de un correo electrónico decir que es la parte del correo electrónico que lleva la información más valiosa:
From: Nombre y dirección de correo electrónico del emisor (Dirección IP también, pero de forma oculta)
To: Nombre y dirección de correo electrónico del receptor.
Date: Fecha/hora del envio.
Subject: El texto que el emisor introduce en el asunto del correo electrónico.
Si estás interesado en conocer más sobre las cabeceras de un correo electrónico te recomiendo esta lectura.

Pues bien, el siguiente paso en nuestro código php será configurar estas cabeceras; tranquilo, no es tan complicado como parece (puedes limitarte a copiar y pegar las que yo he colocado si lo ves muy complicado):

//Headers del correo electrónico.
$headers =
	'From: ' . $correoFrom . "\r\n". 
	'Reply-To: ' . $correoDestino. "\r\n" . 
	'X-Mailer: PHP/' . phpversion() .
	'MIME-Version: 1.0\r\n'.
	'Content-type: text/html; charset=UTF-8\r\n';

Como puedes ver, me limito a declarar el MIME-VERSION, Content-type (envío de texto-HTML) y la codificación (UTF-8 en este caso), así como el from del correo electrónico.

Tenemos todos los datos ya listos a excepción del destinatario del correo electrónico, en este caso nosotros mismos:

//Correo de destino; donde se enviará el correo.
$correoDestino = "tu.mail@dominio.ext";

Aquí deberás reemplazar la cadena tu.mail@dominio.ext por tu dirección de correo electrónico.

Enviando el correo
Una vez tenemos recopilados y adaptados todos los datos necesarios, vamos a preparar el cuerpo del mensaje y procedemos a enviarlo.

Para preparar el asunto del mensaje hemos de escoger un formato, que puede ser algo como el siguiente:

Asunto: Contacto WEB_Nombre, Apellido1 Apellido2;
Enviado por: Nombre, Apellido1 Apellido2; 22/2/2012
Teléfono de contacto: 999999999
E-mail: micorreo@dominio.ext
Comentario: Aquí está mi comentario.

Algo similar es lo que vamos a preparar con nuestro código php para que el correo recibido tenga todos los datos accesibles de manera rápida.

//Formateo el asunto del correo
$asunto = "Contacto WEB_$nombre $apellidos; de $empresa";
//Formateo el cuerpo del correo
$cuerpo = "Enviado por: " . $nombre . ", " . $apellidos . " a las " . $fechaFormateada . "";
$cuerpo .= "Empresa: " . $empresa . ", en el cargo/departamento de " . $departamento . "";
$cuerpo .= "Teléfono de contacto: " . $telefono . "";
$cuerpo .= "E-mail: " . $correo . "";
$cuerpo .= "Comentario: " . $comentario;

Lo único que estamos haciendo en esa instrucción es generar las variables $asunto y $cuerpo con el formato deseado.

Cuando ya las tenemos podemos enviar el correo electrónico con la siguiente línea:

// Envío el mensajemail( $correoDestino, $asunto, $cuerpo, $textoEmisor);

mail es una función de php de la que podéis conocer todo aquí.

Con esto hemos enviado nuestro correo electrónico con los datos del formulario.

CSS

Como es lógico hoy en día, podemos darle una apariencia elegante a nuestro formulario utilizando CSS. En mi caso he usado los siguientes estilos de los que voy a explicar poca cosa:

/*Estilos formulario*/
#textoContacto {
	width: 500px;
	position: relative;
}

#textoContacto h3 {
	font-size: 3.5em;
	font-family: Helvetica, arial;
	font-weight: 100;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	
	color:#d3e11d;
	
	position: absolute;
	top: 200px;
	left: -80px;
}
#formulario {
    width:435px;
    margin:auto;

    font-family: Helvetica, Verdana, Geneva, sans-serif;
    font-size: .8em;
    
    padding:15px;
    
    padding-bottom: 50px;
    padding-left:90px;
    position: relative;
    
    background: url(images/content/contactoBG2.png) no-repeat left;
}
#formulario label{
	display: block;
	float:left;
	width:175px;
    font-weight:bold;
    font-size:12px;
    
    padding-top:5px;
    
    position: relative;
}

label.error { 
	width:175px;
	margin-top:-17px;
	
	color:#ff0000;
	
	float: left;
	
	font-size:1em;
}

#formulario input{
	display: block;
	float:left;
	width:250px;
	margin-bottom: 7px;
}

#formulario textarea{
	display: block;
	float:left;
	width:254px;
	height: 200px;
	margin-bottom: 5px;
	
	resize: none;
}

#formulario .botonAcceder{
	width: 175px;
	height: 30px;
	background: #d3e11d;
	border:none;
	margin:auto;
	
	position: absolute;
	right: 0;
	left: 0;
	bottom: 10px;
	
	color:#535353;
}

#formulario .botonAcceder:hover{
	background: #535353;
	color:#d3e11d;
}

#formulario #aster {
	color:#ff0000;
}

#textoContacto {
	color:#535353;
}

.thanks{
	color:red;
	text-align:center;
	height:220px;
	
	margin-top: 100px;
	font-size:1em;
}

Las propiedades más relevantes (para mí) y que merecen mención son:

El resto no dejan de ser estilos propios de formularios.

Cualquier fallo que veas o añadido que creas imprescindible, házmelo saber en los comentarios.

Si te ha servido esta entrada y te gusta, puedes mencionarlo en tu blog, compartirlo o usarlo libremente; sólo te pido un pequeño agradecimiento o bien en esta entrada o bien enlazándola desde el sitio web donde has utilizado el formulario.

Puedes ver un ejemplo aquí.

Puedes descargar el código aquí.