En esta parte veremos como almacenar los valores ingresados por el usuario en nuestro formulario y almacenarlos en una base de datos MySQL usando PHP para ello, vamos a utilizar el mismo codigo del tutorial anterior.
1. Antes de empezar
Ya que vamos a trabajar con PHP, es necesario que tengas instalado en tu sistema un servidor local que soporte PHP.
CREATE TABLE `cf` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`asunto` varchar(255) NOT NULL,
`mensaje` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Lo primero que vamos a hacer es crear una tabla con los campos del formulario, si haz modificado el formulario añadiendole o quitandole campos, tendras que hacer lo mismo aqui, el siguiente codigo es un SQL que podemos ejecutar desde phpMyAdmin o ingresarlo manualmente si no disponimos de esa herramienta:
Le vamos a poner ‘cf’ (contact form) a la tabla y definimos los campos, primero id que va a ser la llave primaria y con auto_increment y luego los campos del formulaio.
Ahora vamos a crear un nuevo archivo donde se van almacenar los datos de conexión a la base de datos, a este le pondremos conexion.php:
El contenido de este archivo tiene que ser asi:
<?php
$host = 'localhost';
$usuario = 'root';
$pass = 'root';
$conn = mysql_connect($host, $usuario, $pass) or die ('Error conectando a la base de datos');
$bdnombre = 'cf';
mysql_select_db($bdnombre);
Allí definiremos las credenciales de conexión a MySQL, en caso de trabajar en un servidor local casi siempre son esos (localhost, root, root).
2. index.php
Abrimos este archivo y modificamos la parte de PHP, lo primero sera incluir a conexion.php, en esta ocasion vamos a usar require, ya que es necesario que ese archivo este presente:
<?php
require("conexion.php");
if(isset($_POST['boton'])){
if($_POST['nombre'] == ''){
$error1 = '<span class="error">Ingrese su nombre</span>';
}else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
$error2 = '<span class="error">Ingrese un email correcto</span>';
}else if($_POST['asunto'] == ''){
$error3 = '<span class="error">Ingrese un asunto</span>';
}else if($_POST['mensaje'] == ''){
$error4 = '<span class="error">Ingrese un mensaje</span>';
}else{
$dest = "tu@email.com"; //Email de destino
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$asunto = $_POST['asunto']; //Asunto
$cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
//Cabeceras del correo
$headers = "From: $nombre <$email>\r\n"; //Quien envia?
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
if(mail($dest,$asunto,$cuerpo,$headers)){
$result = '<div class="result_ok">Email enviado correctamente <img src="https://tursos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </div>';
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';
}else{
$result = '<div class="result_fail">Hubo un error al enviar el mensaje <img src="https://tursos.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>';
}
}
}
?>
Ahora nos movemos hasta la linea 34 luego de la parte donde se hace la condicional si envio o no el correo, alli añadimos un salto de linea y ponemos dos lineas en una se va a guardar la consulta SQL que se va ejecutar y la otra va a ir la funcion que la ejecute:
if(mail($dest,$asunto,$cuerpo,$headers)){
$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')";
mysql_query($sql) or die(mysql_error());
$result = '<div class="result_ok">Email enviado correctamente :)</div>';
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';
}else{
$result = '<div class="result_fail">Hubo un error al enviar el mensaje :(</div>';
}
Y con eso ya tendríamos nuestro formulario funcionando, recuerda que si modificaste los campos haz de hacerlo tambien en la consulta, por ejemplo:
$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`,`campo_z`,`campo_x`,`campo_y`)
VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}','{$_POST['campo_z']}','{$_POST['campo_x']}','{$_POST['campo_y']}')";
O en caso tengas el los valores guardados/concatenados en variables:
$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`)
VALUES ('$nombre','$email','$asunto','$mensaje','$body')";
3. Mejoras de seguridad
Como vamos a trabajar con bases de datos es recomendable asegurarnos que no nos inyecten el formulario, para eso vamos a usar mysql_real_escape_string antes de la consulta mediante un foreach, de esta forma lo hara en todas las variables POST que se hayan ingresado:
if(mail($dest,$asunto,$cuerpo,$headers)){
foreach($_POST AS $key => $value) {
$_POST[$key] = mysql_real_escape_string($value);
}
$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')";
mysql_query($sql) or die(mysql_error());
$result = '<div class="result_ok">Email enviado correctamente :)</div>';
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';
} else {
$result = '<div class="result_fail">Hubo un error al enviar el mensaje :(</div>';
}
4. Código Final
<?php
require('conexion.php');
if(isset($_POST['boton'])){
if($_POST['nombre'] == ''){
$error1 = '<span class="error">Ingrese su nombre</span>';
}else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
$error2 = '<span class="error">Ingrese un email correcto</span>';
}else if($_POST['asunto'] == ''){
$error3 = '<span class="error">Ingrese un asunto</span>';
}else if($_POST['mensaje'] == ''){
$error4 = '<span class="error">Ingrese un mensaje</span>';
}else{
$dest = "tu@email.com"; //Email de destino
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$asunto = $_POST['asunto']; //Asunto
$cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
//Cabeceras del correo
$headers = "From: $nombre <$email>\r\n"; //Quien envia?
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
if(mail($dest,$asunto,$cuerpo,$headers)){
foreach($_POST AS $key => $value) {
$_POST[$key] = mysql_real_escape_string($value);
}
$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')";
mysql_query($sql) or die(mysql_error());
$result = '<div class="result_ok">Email enviado correctamente <img src="https://tursos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </div>';
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';
}else{
$result = '<div class="result_fail">Hubo un error al enviar el mensaje <img src="https://tursos.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>';
}
}
}
?>
<html>
<head>
<title>Contacto</title>
<link rel='stylesheet' href='estilos.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script src='funciones.js'></script>
</head>
<body>
<form class='contacto' method='POST' action=''>
<div><label>Tu Nombre:</label><input type='text' class='nombre' name='nombre' value='<?php echo $_POST['nombre']; ?>'><?php echo $error1 ?></div>
<div><label>Tu Email:</label><input type='text' class='email' name='email' value='<?php echo $_POST['email']; ?>'><?php echo $error2 ?></div>
<div><label>Asunto:</label><input type='text' class='asunto' name='asunto' value='<?php echo $_POST['asunto']; ?>'><?php echo $error3 ?></div>
<div><label>Mensaje:</label><textarea rows='6' class='mensaje' name='mensaje'><?php echo $_POST['mensaje']; ?></textarea><?php echo $error4 ?></div>
<div><input type='submit' value='Envia Mensaje' class='boton' name='boton'></div>
<?php echo $result; ?>
</form>
</body>
</html>
Con eso hemos terminado esta ultima parte del formulario (por ahora), recuerda que puedes descargarte el código fuente en este enlace.
Si no entendiste una parte o tienes alguna duda, házmela saber en los comentarios.