Mejoras al Formulario de contacto (HTML5 y PHP)

Desde hacia cierto tiempo que quería escribir este post, pues he recibido bastantes preguntas con respecto al formulario que publique hace ya algunos meses en una entrada y que es el mismo que tengo funcionando en el blog, pero que a lo largo del tiempo le he hecho algunas modificaciones, mas que todo simplificarlo.

¿Que diferencias tiene?

La única diferencia perceptible en cuanto a funcionamiento es que simplifique el proceso de validación de campos eliminando el script de validación y aprovechando la que viene incluida en HTML5, además de unas pocas mejoras en cuanto a css.

Lo primero que hay que hacer, es verificar que nuestra plantilla este hecha en HTML5 yendo a la edicion HTML de nuestra plantilla y ver el Doctype que tiene, si este es <!DOCTYPE html> esta hecha en HTML5 si no lo esta debemos agregarlo en la pagina estatica donde vamos a crear el formulario (es un poco chapucero pero si no se hace no funciona).
En caso de que la plantilla este hecha en HTML5 Podemos obviar el Doctype y agregar solamente lo que esta dentro de las etiquetas body.


<!DOCTYPE html>

<html>

  <head>

    <meta content="text/html; charset=windows-1252" http-equiv="content-type">

    <title>Contacto mt</title>

    <style type="text/css">

/*—————- algunos estilos css dentro de la pagina ————*/

input:focus, textarea:focus {

border-color: #33ccff;

background-color: #f9f9f9;

}

</style> </head>

  <body>

    <form action="url-del—archivo/contacto.php" method="post">

      <label for="name">Nombre Completo:<br>

        <input required="required" id="name" name="name" size="27" type="text">

      </label><br>

      <br>

      <label for="email">Correo Electrónico:<br>

        <input required="required" id="email" name="email" size="27" type="email">

      </label><br>

      <br>

      <label for="subject">Asunto:<br>

        <input required="required" id="subject" name="subject" size="27" type="text">

      </label><br>

      <br>

      <label for="message">Mensaje: <br>

        <textarea required="required" cols="30" id="message" name="message" rows="5"></textarea>

      </label><br>

      <br>

      <input name="submit" value="Enviar"

        type="submit"></form>

    

  </body>

</html>

La única diferencia con el código anterior es que los nombres de los campos están dentro de etiquetas label, por lo que adoptarían el estilo css de la plantilla y facilitaría también establecer reglas para crear los propios, además de que el campo de email esta marcado como tipo "email" lo que en HTML5 es suficiente para comprobar que las direcciones de correo que se introducen son validas lo mismo que required="required" en los campos obligatorios lo que es suficiente para comprobar que se diligencien.



El pequeño código CSS al comienzo es simplemente para resaltar el campo en el que se esta escribiendo, podemos agregarlo tal cual como esta arriba o directamente en la plantilla antes de </b: skin>


El archivo php es el mismo que se utilizo para el formulario anterior, solo le cambie la redirección por javascript por HTML.


<?php

@$name = addslashes($_POST['name']);

@$email = addslashes($_POST['email']);

@$subject = addslashes($_POST['subject']);

@$message = addslashes($_POST['message']);



$cabeceras = "From: $email\n" //El remitente

 . "Reply-To: $email\n"; //Dirección de respuesta

$asunto = "$subject"; //El asunto

$email_to = "email@dominio.com"; //El email

$contenido = "$name le ha enviado el siguiente mensaje:\n"

. "\n"

. "$message\n"

. "\n";



//Envia el mensaje

if (@mail($email_to, $asunto ,$contenido ,$cabeceras )) {

//Si el mensaje se envía muestra una confirmación

die("Muchas gracias, su mensaje fue enviado correctamente");

}else{

//Si el mensaje no se envía muestra el mensaje de error

die("Error: Su mensaje no pudo ser enviado, intente más tarde");

}

?>

El mensaje de confirmación y redirección

Simplemente cambiamos la linea die("Muchas gracias, su mensaje fue enviado correctamente"); por:

echo '<html>

<head>

  <meta http-equiv="Refresh"

 content="5;url=http://direccion del blog">

  <link href="http://direccion delblog/favicon.ico"

 rel="icon" type="image/x-icon">

</head>

<body>

<p style="text-align: center;"></p>

<p style="text-align: center;"><big

 style="font-weight: bold;"><big><big></big></big></big></p>

<p style="text-align: center;"><big

 style="font-weight: bold;"><big><big>Su mensaje

ha sido

enviado correctamente en breve nos pondremos en contacto con Ud.</big></big></big></p>

<div style="text-align: center;">

<p>Sera redireccionado a la

página principal en 5 segundos. En caso contrario puede regresar

haciendo <a href="http://direccion del blog">click

aquí</a></p>

</div>

</body>

</html>

';
Si queremos que redireccione también cuando hay un error con el mensaje, simplemente cambiamos la linea por el código anterior y cambiamos el texto "su mensaje ha sido enviado correctamente... " por "su mensaje no pudo ser enviado, intente mas tarde"