• Como

    Como Hacer un Formulario de Contacto IV: Almacenar en Base de Datos MySQL con PHP

    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.

    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:

    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 ;

    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="http://web.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="http://web.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="http://web.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="http://web.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.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese