miércoles, 17 de julio de 2013

Un formulario de contacto en HTML y PHP

Abril 2016: Post recuperado de Aprendiendo PHP (web ya inactiva)

Valencia, 17/07/2013, G.B.
Aunque un tanto 'alejado' de la 'marcha' habitual de Aprendiendo PHP antes de su parada, voy a seguir incluyendo pequeñas 'utilidades', códigos que os pueden servir. Más adelante volveré con la 'temática', el orden que he pensado seguir en este blog. Pero ahora mismo, y tras el re-arranque la semana pasada de Aprendiendo PHP, me apetece ir por este camino, aunque un poco más adelante vuelva a la 'normalidad'.

Sin más, paso a dejaros un pequeño sistema de formulario de contacto con HTML y PHP. Consta de 3 archivos, uno en HTML y 2 en PHP:

  • contacta.html (la página del formulario propiamente dicha)

  • enviar_correo.php (el código PHP del formulario)

  • enviado.php (la página que nos indica si ha habido algún error o todo ha ido bien)
Este 'sistema' lo leí en un tutorial que ahora mismo no recuerdo, pero que buscaré e incluiré aquí como referencia. Lo utilizo desde hace ya algún tiempo en un par de webs; en concreto en un par de directorios de enlaces. el de INDAGA.net y el de Webcontenidos.es. Funciona perfectamente. tan solo le he añadido algunas pequeñas variaciones, si no recuerdo mal. Bien, veamos como funciona:

Primero creamos un archivo HTML y lo denominamos, por ejemplo, contacta.html. Os adjunto el código. Por supuesto, deberéis cambiar todas las referencias a esta web, así como las URLs absolutas que adjunto y que hacen referencia a este sitio (www.aprendiendophp.net):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contactar con AprendiendoPHP.net </title>
<meta name="title" content="AprendiendoPHP.net" />
<meta http-equiv="title" content="AprendiendoPHP.net" />
<meta name="keywords" content="aprender php. aprendiendo php, php, guillermo beltran pilato" />
<meta http-equiv="description" content="Aprendiendo PHP" />
<meta name="author" content="Guillermo Beltr⮠Pilato" />
<meta name="distribution" content="all" />
<meta name="robots" content="all" />
<meta name="revisit" content="30 days" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://www.aprendiendophp.net/wp-content/themes/deepblue/style.css" />
<link href="http://www.aprendiendophp.net/favicon.ico" rel="shortcut icon" />
<meta name="description" content="Contactar con Aprendiendo PHP">
</head>
<body>
<div align="center">
<form action="enviar_correo.php" method="post">
<p>
<br />
<b>Tu Nombre:<b>
<input name="name" type="text" id="name" size="40" />
</p>
<p><b>Tu email:</b>
<input name="email" type="text" id="email" size="42" />
</p><br />
<p>
<b> Escribe tu mensaje o consulta:</b>
</p>
<textarea name="query" cols="46" rows="20" id="query"></textarea>
<p>
<input name="submit" type="submit" class="boxx1" value="Enviar mensaje" />
</p>
</form>
<!-- <p align="center"> Si el correo se ha enviado correctamente, <br />volver&aacute;s a la p&aacute;gina principal del directorio</p><br /><br /> -->
<p><a href="http://www.aprendiendophp.net" alt="AprendiendoPHP.net">www.aprendiendophp.net</a>
</div>
</body>
</html>

Como podéis observar, en este código HTML, además de los meta tags, vemos un formulario cuya acción al enviarlo nos remite a la página: enviar_correo.php. Este es el código PHP de la página, que es la que hace que funcione el formulario:


<?
/* Para AprendiendoPHP.net */
$mailto = 'tuemail@direccioncorreo.com'; // PON AQUÍ TU DIRECCIÓN DE CORREO ELECTRÓNICO, DONDE QUIERES QUE TE LLEGUE EL CONTACTO
$returnpage = 'http://www.aprendiendophp.net/enviado.php'; // INSERTA AQUÍ LA PÁGINA A LA QUE QUIERES QUE VUELVA EL USUARIO TRAS ENVIAR EL CONTACTO
$sitename = '[AprendiendoPHP.net - Contacto]'; // INSERTA AQUÍ EL NOMBRE DE TU SITIO; APARECERÁ EN EL ASUNTO DEL EMAIL QUE RECIBAS
/* NO EDITES NADA TRAS ESTAS LÍNEAS, A NO SER QUE SEPAS LO QUE ESTÁS HACIENDO */

$name = $_POST['name'];
$email = $_POST['email'];
$enquiry = stripslashes($_POST['query']);

if (!$name) {
print("<strong>Error:</strong> Escribe tu nombre.<br/><br/><a href='javascript:history.go(-1)'>Volver</a>");
exit;
}

if (!$email) {
print("<strong>Error:</strong> Por favor, escribe tu direcci&oacute;n de e-mail.<br/><br/><a href='javascript:history.go(-1)'>Volver</a>");

exit;

}

if (!$enquiry) {
print("<strong>Error:</strong> Por favor, escribe un mensaje.<br/><br/><a href='javascript:history.go(-1)'>Volver</a>");

exit;

}

if (!eregi("^[a-z0-9]+([-_\.]?[a-z0-9])+@[a-z0-9]+([-_\.]?[a-z0-9])+\.[a-z]{2,4}", $email)){

print("<strong>Error:</strong> Este email no es v&aacute;lido, por favor escribe una direcci&oacute;n de e-mail v&aacute;lida<br/><br/><a href='javascript:history.go(-1)'>Volver</a>");

exit;

}

$message = "\n$name te ha enviado el siguiente mensaje:\n\n$enquiry\n\n Sus datos son:\n\nNombre: $name\nCorreo: $email\n\n";

mail($mailto, "$sitename Petición de contacto de $name", $message, "From: $email");

header("Location: " . $returnpage);

?>

Una vez el usuario ha cumplimentado los campos de nuestro formulario en HTML (la página contacta.html) y enviado así la petición de contacto, el archivo enviar_contacto.php se encargará de validar la petición y enviarla al correo que le hayamos determinado a través de la función $mailto. Si todo es correcto, la página enviado.php será la encargada de decir al usuario si todo ha ido bien o si ha habido algún error. Este es el código de dicha página:


<?php 
echo '<h3>Su mensaje se ha enviado satisfactoriamente</h3>';
echo '<p>En breve contactaremos con usted. Muchas gracias por su inter&eacute;s</p>';
echo '<p><a href="http://www.aprendiendophp.net" target="_self">Volver a la Home</a> de AprendiendoPHP.net</p>';
?>

Y con estos 3 archivos, ya tenemos montado nuestro formulario de contacto con validación incluida.  Podéis comprobarlo aquí: Contactar con Aprendiendo PHP. Eso sí, el tema de los formularios en PHP lo veremos más adelante, esto solo era un pequeño 'adelanto', valga la redundancia...

Hasta pronto!

0 comentarios: