La primera fase del proyecto web sin WordPress terminó con una web con HTML, CSS y JavaScript. Ahora vamos a iniciar la segunda fase mejorando la página de Gracias con un formulario PHP. Partimos de una página que recogía con JavaScript los datos que el formulario de contacto enviaba por GET. Ahora los datos los recogeremos con PHP, los enviaremos por email y si el proceso funciona bien los presentaremos por pantalla.
Tabla de contenidos,
Pasos iniciales
Para transformar una página HTML a PHP lo único que tenemos que hacer es cambiar la extensión html a php. Desde ese momento ya podemos utilizar código PHP dentro de la página que combinaremos con el HTML.
En la web sin PHP tuvimos que copiar cabecera, menú y pie de pagina en cada página que creábamos. Con PHP podemos realizar «includes», es decir, trabajar con plantillas php para las partes comunes y luego incorporarlas a todas las páginas. Eso por ejemplo nos permitirá realizar cambios en el menú o en el pie de página sin tener que modificar todas las páginas.
Creamos el fichero head.php
<meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title><?php echo $title; ?></title> <meta name="description" content="Página de confirmación de envío de datos" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico"/> <!-- Place favicon.ico in the root directory --> <!-- ========================= CSS here ========================= --> <link rel="stylesheet" href="assets/css/bootstrap-5.0.0-beta1.min.css" /> <link rel="stylesheet" href="assets/css/LineIcons.2.0.css" /> <link rel="stylesheet" href="assets/css/tiny-slider.css" /> <link rel="stylesheet" href="assets/css/animate.css" /> <link rel="stylesheet" href="assets/css/common.css" />
Y sustituimos el código equivalente en gracias.php
<?php
$title = "Gracias";
include("assets/templates/head.php");
?>
He creado la variable $title para poder personalizar el título de cada página utilizando el mismo head.php.
De manera similar creamos menu.php y footer.php y lo ponemos en lugar del código que sustituyen.
Recogida de datos del formulario mediante PHP
Los valores del formulario de contacto los recibimos en la página mediante $_REQUEST[] que recoge los datos enviados tanto por GET como por POST. El código añadido al principio de gracias.php sería:
<?php
define("RECIPENT_NAME", "José María - Aprendizaje Profundo");
define("RECIPENT_ADDRESS", "info@aprendizajeprofundo.es);
define("EMAIL_SUBJECT", "Contacto Aprendizaje Profundo");
// Recupera valores
$senderName = $_REQUEST['name'];
$senderEmail = $_REQUEST['email'];
$phone = $_REQUEST['number'];
$service = $_REQUEST['subject'];
$message = $_REQUEST['message'];
$privacyPolicy = $_REQUEST['privacyPolicy'];
if ($privacyPolicy){
$privacy = "Sí";
} else {
$privacy = "No";
}
$body = 'Nombre: ' . $senderName . PHP_EOL .
'Email: ' . $senderEmail . PHP_EOL .
'Teléfono: '. $phone . PHP_EOL .
'Servicio: '. $service . PHP_EOL.
'Mensaje: ' . $message . PHP_EOL.
'Aceptación Política de Privacidad: '. $privacy;
// Si existe el $senderEmail y se ha aceptado la política de privacidad, mandamos el correo
$success = false;
if (!empty ($senderEmail) && $privacyPolicy) {
$recipient = RECIPENT_NAME . " <" . RECIPENT_ADDRESS . ">";
$headers = "From: " . $senderName . " <" . $senderEmail . ">";
$success = mail ($recipient, EMAIL_SUBJECT, $body, $headers);
}
?>
Antes de enviar el email compruebo que si en el formulario se ha completado el campo email y si se ha aceptado la política de privacidad.
El contenido en la página también lo cambiamos, ya que ahora no vamos a utilizar JavaScript sino PHP para presentarlo:
<div class="section-title mb-60 pt-50">
<?php
if ($success):
?>
<p>Muchas gracias por su mensaje. Antes de 24 horas laborables nos pondremos en contacto con usted.</p>
<h5 class ="pt-20">Datos recibidos</h5>
<p><strong>Nombre: </strong><a id="name"><?php echo $senderName ?></a></p>
<p><strong>Email: </strong><a id="email"><?php echo $senderEmail ?></a></p>
<p><strong>Móvil: </strong><a id="number"><?php echo $phone ?></a></p>
<p><strong>Tema: </strong><a id="subject"><?php echo $service ?></a></p>
<p><strong>Mensaje: </strong><a id="message"><?php echo $message ?></a></p>
<p><strong>Aceptación de Política de Privacidad: </strong><a id="message"><?php echo $privacy ?></a></p>
<?php
else:
?>
<div class = "text-center"">
<p>Lo sentimos, ha habido un problema al enviar su mensaje. Por favor, inténtelo de nuevo.</p>
<br>
<br>
<a href="contacto.php" class="main-btn btn-hover">Contacto</a>
</div>
<?php
endif
?>
</div>
Utilizamos el «if» para presentar un contenido u otro en función de si el email se envió con éxito o no.
Cambios en la Página de Contacto
En la página de contacto cambiamos la extensión de html a php y sustituimos el código común por includes de head.php, menu.php y footer.php como hicimos en la página gracias.php.
En el formulario cambiamos el método GET por POST. POST permite por ejemplo enviar archivos, aunque de momento no necesitamos esta funcionalidad. También evita que se muestre en la url la información que enviamos a la página gracias.php.
Además hemos cambiado la foto del robot por una con más luminosidad para hacer más atractiva la página de Contacto.
Prueba del formulario PHP
Conviene probar el funcionamiento de la página tanto en el caso de que se realice el envío del email como que el envío falle.
Si cargamos directamente la página gracias.php el envío debería fallar, ya que no le hemos enviado los datos del formulario:
Efectivamente nos sale un aviso de que el envío no se ha realizado con un botón debajo para poder acceder al formulario de contacto para dejar los datos.
Rellenemos el formulario:
En este caso obtendremos la siguiente página de gracias:
Comprobemos que se ha recibido el email envíado:
Seguimiento del proyecto
Con la incorporación del formulario en PHP el proyecto se encuentra más cerca del final. Lo siguiente que haremos en una web será el almacenamiento de información en una base de datos.
Los artículos anteriores relativos a este proyecto son:
Puedes entrar en la web Aprendizaje Profundo y probar a enviarme un formulario a través de la página de Contacto. También si lo deseas puedes escribir tus impresiones en los comentarios.
