1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Envio de email con formulario de contacto

Tema en 'Tutoriales de PHP' comenzado por DarioNahuel, 14 de Enero de 2015.

  1. DarioNahuel

    DarioNahuel Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    13
    Puntos de trofeos:
    3
    Género:
    Hombre
    Buenas, es mi primer tutorial en la web. Así que le traigo algo que muchos piden aveces, para hacer su formulario de contacto.

    Herramientas utilizadas:

    Composer: https://getcomposer.org/
    PHPMailer : http://phpmailer.worxware.com/
    Semantic UI : http://semantic-ui.com/
    XAMPP : https://www.apachefriends.org/es/index.html
    Sublime y PHP

    Funcionalidad:
    vista previa

    [​IMG]
    Validaciones
    [​IMG]

    Empezemos

    Lo primero que vamos hacer es instalar composer, si no lo tienen lo descargan desde el link que les deje arriba, lo instalan y listo. Composer es una herramienta para administración de dependencias en PHP.

    Ahora vamos a armar la estructura de nuestro proyecto.

    -Crean adentro de su carpeta del proyecto, la carpeta css, img, js y vendor.
    -En la raiz del proyecto vamos a crear composer.json, index.php, send.php y validation.php

    [​IMG]

    Ahora vamos a entrar a nuestro archivo composer.json y vamos a escribir esto para instalar PHPmailer
    Código (Text):
    {
        "require":{
            "phpmailer/phpmailer" : "dev-master"
        }
    }
    Guardamos los cambios. Y ahora vamos a ir a la consola de windows o terminal de linux, nos paramos en la raiz de nuestro proyecto y escribimos en ella composer install apretamos enter.

    [​IMG]


    Ahora ya tenemos instalado PHPMailer en nuestra proyecto.
    En nuestra carpeta vendor se tiene que crear la carpeta composer, phpmailer y autoload.php


    [​IMG]

    Los archivos de las capertas js,css y img , descarguen mi proyecto y reemplazan con su carpeta.

    Ahora vamos a nuestro archivo send.php


    PHP:
    <?php

    require_once 'vendor/autoload.php';

    $validation = array(); // Createmos un array para nuestras validaciones.

    if($_SERVER['REQUEST_METHOD'] == 'POST') // Comparamos si el metodo request es POST
    {
        if(empty($_POST['nombre'])) // Si el campo nombre esta vacio guardamos la validacion correspondiente.
        {
            $validation['nombre'] = '*El campo nombre es requerido.';
        }

        if(empty($_POST['correo']))
        {
            $validation['correo'] = '*El campo correo es requerido.';
        }

        if (!empty(!filter_var($_POST['correo'], FILTER_VALIDATE_EMAIL))) // Filtro especial para email
        {
              $validation['correo'] = "*El campo correo no es valido.";
        }

        if(empty($_POST['comentario']))
        {
            $validation['comentario'] = '*El campo comentario es requerido.';
        }

        if(empty($_POST['asunto']))
        {
            $validation['asunto'] = '*El campo asunto es requerido.';
        }

        if(count($validation) == 0) // Si validation es igual a 0, todos nuestros campos son correctos
        {                            // Enviamos el mail  
           
            $mail = new PHPMailer(); // instanciamos un objeto de la clase PHPMailer

            $mail->IsSMTP();  
            $mail->SMTPAuth = true;
            //$mail->SMTPDebug = 2;

            // Establece el servidor SMTP - En esta caso gmail
            $mail->Host = 'smtp.gmail.com';
            // Nombre de usuario de nuestro correo electronico donde nos van a llegar los mensajes.
            $mail->Username = 'example@gmail.com';
            // Contraseña del correo electronico.
            $mail->Password = '1234';
            // Habilitar el cifrado TLS, `ssl` también aceptado
            $mail->SMTPSecure = 'tls';
            // Puerto TCP para conectarse
            $mail->port = 587;
            // Correo electronico y nombre del que nos envia el mensaje
            $mail->From = $_POST['correo'];
            $mail->FromName = $_POST['nombre'];
            // Correo electronico donde queremos que nos llegue los mensajes
            $mail->addAddress('example@gmail.com','Dario nahuel');
            // Habilitar el html en el contenido
            $mail->isHTML(true);
            // Asunto
            $mail->Subject = $_POST['asunto'];
            // el cuerpo del mensaje
            $mail->Body = $_POST['comentario'];

            if(!$mail->send()) // Si el envio falla
            {
                echo $mail->ErrorInfo;
            }
            // Para comprobar si el mail fue enviado exitosamente
            $success = true;
            // limpiamos nuestros campos
            $_POST['nombre'] = '';
            $_POST['correo'] = '';
            $_POST['comentario'] = '';
            $_POST['asunto'] = '';
        }
       
    }
     

    Ahora vamos a ir a nuestro archivo validation.php, en este archivo vamos a tener 4 funciones, que son para la vista. Con la que logramos que nos muestren el error en la vista, cambio de color del input que tiene error y mantener los datos de los input correctos.
    [​IMG]
    PHP:
    <?php
       
        // Mensaje de error cuando un input no pasa una validacion.
        function error_for($value)
        {
            global $validation;
            if(isset($validation[$value]))
            {
                return "<div class='error_form'>" . $validation[$value] . "</div>";
            }
        }

        // Estado del input
        function input_status($value)
        {
            global $validation;
            if(isset($validation[$value]))
            {
                return "class='ui input error centered grid'";
            }
            else
            {
                return "class='ui input centered grid'";
            }
        }

        // Funcionar para mantener nuestros datos en los input.
        function input_value($value)
        {
            return !empty($_POST[$value]) ? $_POST[$value] : '';
        }

        // Si el correo fue enviado, si es de ser asi retorna true
        function success_email()
        {
           global $success;
            if(!empty($success))
            {
                return true;
            }
        }

     

    llegando al final, volvemos a nuestro index.php y empezar añadir los cambios nuevos.

    vamos a incluir al inicio del archivo index.php nuestras dos archivos que hicimos anteriormente.


    PHP:
    <?php
        include 'send.php';

        include 'validation.php';
    ?>
    primero : Usando la funcion success_mail ,si el mail fue enviado va a mostrar un mensaje de exito
    segundo:
    La funcion status_input si hay errores en la validacion va a cambiar de color o si no sigue igual.
    La function input_value es para mantener nuestros campos por las dudas si surgio algun error con algun dato.
    La function error_for es para mostrar el error.

    PHP:
     
    //primero
    <?php if(success_email() === true){?>
             <div class="ui centered grid">
                <div class="four wide column">
                    <div class="ui compact positive message">
                        <p>El mensaje fue enviado.En breve le contestaremos</p>
                    </div>
                </div>
            </div>
      <?php } ?>

    // segundo
    <div <?php echo input_status('nombre')?>>
                <div class="four wide column">
                    <input type="text" name="nombre" value="<?php echo input_value('nombre')?>" placeholder="Nombre">
                    <?php echo  error_for('nombre')?>
                </div>
            </div>
    Descarguen el proyecto para ver el index.php completo ya que me paso de caracteres soportados en el post.

    Mensaje que muestra cuando el mail es enviado exitosamente
    [​IMG]

    Bueno esta es el fin del tutorial, no se olviden de agregar su cuenta y contraseña para probar, creence un correo en gmail si no tienen.

    Espero que les se de ayuda para algunos, perdón por la falta de explicaciones de cosas pero lleva un tiempo un post pero creo que se comprenden bien la mayoría de cosas.igual me pase con el limite de caracteres y tuve que borrar un par de cosas.

    Agradecimientos
    al usuario que hizo la imagen de heroes de la web que utilice no recuedo el nombre.

    Link de Descarga
     
    A Dreidy, RicardoLicardié, Nabetse y 5 otros les gusta esto.
  2. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    392
    Me gusta recibidos:
    324
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Excelente tu tutorial, muy claro y fácil de seguir paso por paso.
    Yo tengo una duda, nunca he usado composer, pero se que es un gesto de dependencias, pues mi duda es esa, que es una dependencia?
     
    A JTaveras, Maddenamy y Mauricio ~ les gusta esto.
  3. AyuukJaay

    AyuukJaay Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    149
    Me gusta recibidos:
    69
    Puntos de trofeos:
    28
    Género:
    Hombre
    Página web:
    Muy bueno pero muy avanzado tal vez deberias empezar explicando que es composer cual es la ventaja de descargar PHPMailer usando esta herramienta.
    Saludos.
     
    A Mauricio ~ le gusta esto.
  4. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    960
    Me gusta recibidos:
    596
    Puntos de trofeos:
    93
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Jeje me ganaste a hacer el tutorial, estaba estudiando como usar phpmailer pues yo siempre he usado la función mail propia de PHP.
    Pero muy bien explicado.
    Sigue así!
    NOTA: Puedes adjuntar los archivos de descarga aquí en la web, no es necesario subirlos a mega.


    Saludos #maddenamy
     
  5. DarioNahuel

    DarioNahuel Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    13
    Puntos de trofeos:
    3
    Género:
    Hombre
    El viernes o sabado que tengo un toque de tiempo voy hacer un post aparte sobre Composer y sus beneficios al usarlo.Y dar un par de ejemplos con otros dos paquetes.Que algunas cosas del post borre porque me pase de limites de caracteres jaja
    Si despues lo cambio eso que no me habia dado cuenta directamente que se podia adjuntar asi, Yo lo use hace mucho directamente, hace bastante tiempo que no hago php puro.
     
    Última modificación por un moderador: 15 de Enero de 2015
  6. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Más material para una biblioteca de herramientas web
     
    A Tigre Grisel le gusta esto.
  7. Dreidy

    Dreidy Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    12
    Me gusta recibidos:
    7
    Puntos de trofeos:
    3
    Género:
    Mujer
    Voy a ponerlo en practica
     
  8. Edu

    Edu Nuevo Miembro

    Se incorporó:
    15 de Febrero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Hola que tal una consulta, ya implemente lo descargue y me funciona todo ok, el unico problema que tengo es que, cuando llega el mail a mi correo, no me aparece el email de la persona que me envio el correo, se puede solucionar eso? o es que tengo algo mal configurado? desde ya muchas gracias por el tutorial. Saludos
     

Comparte esta página