0

Tengo un problema en mi formulario. La funcionalidad de enviar información a un correo la hace bien gracias a PHPMailer, cuando haces el submit, la información es enviada a un fichero php llamado contacto.php, aqui es donde compruebo que no es spam y creo el correo para enviarlo finalmente a mi cuenta. Cuando termina toda la lógica del programa, mediante un header vuelvo a la página inicial, haciendo que cargue de nuevo otra vez. Eso último es lo que quiero evitar. Me gustaría que se hiciera el submit, y una vez enviado, el usuario siga estando posicionado en el formulario.

Dejo el código del fichero php donde está la lógica del envío de información por correo. El action del formulario apunta a aquí:

<?php
// Import PHPMailer classes into the global namespace
// These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'vendor/autoload.php';
if(isset($_POST['enviar'])) {
    if ($_POST['no-spam'] != ''){
        exit();
    }else {
        if (isset($_POST['name'], $_POST['email'], $_POST['comments'])){
            $mail = new PHPMailer(true);                              
            try {
                //Server settings
                $mail->SMTPDebug = 3;                                
                $mail->isSMTP();                         
                $mail->Host = '';
                $mail->SMTPAuth = true;                  
                $mail->Username = '';      
                $mail->Password = '';         
                $mail->SMTPSecure = 'ssl';                           
                $mail->Port = 465;                                   
                $mail->SMTPOptions = array('ssl' => array( 'verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true ));
                //Recipients
                $mail->setFrom('', 'Formulario de contacto');
                $mail->addAddress('');     

                //Content
                $mail->isHTML(false);                         
                $mail->Subject = 'Cliente: '.$_POST['email'];
                $mail->Body    = $_POST['comments'];
                $mail->AltBody = $_POST['comments'];;

                $mail->send();
                header('Location: ../index_en.html');

        } catch (Exception $e) {
            echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
        }
    }

}

}

Quito datos personales del código por privacidad.

5
  • El formulario es una página aparte? es un modal? o como?, si es una página aparte simplemente rediriges al formulario, si no, es probable que tengas que usa peticiones asíncronas
    – asantana o
    Commented el 13 sept. 2018 a las 10:10
  • Buenas @asantanao, sí el formulario está en una página aparte, en un index.html, pero que está junto a más contenido (es una landing page). Lo que ahora tengo es una redirección al index de nuevo, pero me vuelve a cargar la página otra vez tras el submit.
    – Mr Robot
    Commented el 13 sept. 2018 a las 10:13
  • 2
    Pues eso lo puedes hacer con AJAX, asíncronamente, es decir, con javascript, para que no se recargue la página.
    – asantana o
    Commented el 13 sept. 2018 a las 10:21
  • Recoger los valores mediante ajax y enviarlos al fichero php? De acuerdo @asantanao, gracias.
    – Mr Robot
    Commented el 13 sept. 2018 a las 10:24
  • Si, que el submit active una funcion de JS que mediante ajax envíe la informacion al archivo de php, así evitaras que recargue la página y a su vez se envie el correo.
    – asantana o
    Commented el 13 sept. 2018 a las 10:27

1 respuesta 1

1

Como te han dicho en los comentarios, básicamente tienes tu formulario. No es necesario ponerle action ni type.

Al evento submit le declaras un listener, y su handler es una función que envía el ajax pero devuelve false (el formulario no se envía como es tradicional)

El siguiente snippet no va a funcionar porque no hay un send_email.php escuchando detrás. Pero te ilustra como debes ponerlo en tu front.

jQuery(document).ready(function() {
  jQuery('#formulario').on('submit', function() {

    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'send_email.php',
      data: jQuery(this).serialize()
    }).then(function(res) {
      console.log(res);
    }).catch(function(err) {
      console.warn(err);
    });

    return false;
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


<div class="container-fluid">
  <form id="formulario" class="form-horizontal">
    <div class="form-group">
      <label for="nombre" class="col-xs-2 control-label">Nombre</label>
      <div class="col-xs-10">
        <input type="nombre" name="name" class="form-control" id="nombre" placeholder="ej John Doe">
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-xs-2 control-label">Email</label>
      <div class="col-xs-10">
        <input type="email" class="form-control" name="email" id="email" placeholder="ej [email protected]">
      </div>
    </div>
    <div class="form-group">
      <label for="comment" class="col-xs-2 control-label">Comentario</label>
      <div class="col-xs-10">
        <textarea class="form-control" style="height:50px;" name="comment" id="comment" placeholder="Ponga un comentario"></textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-xs-offset-2 col-xs-6">
        <div class="checkbox">
          <label>
             <input type="checkbox" name="no-spam"> Le prometo que no es spam
          </label>
        </div>
      </div>
      <div class="col-xs-4">
        <button type="submit" class="btn btn-default pull-right">Enviar</button>
      </div>
    </div>

  </form>
</div>

En el backend, el flujo debiera ser:

<?php
// según yo, el autoload debe ir primero para que funcione "use PHPMailer\..." pero si te funciona...
require 'vendor/autoload.php';

use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\PHPMailer;

// esto lo puedes dar por subentendido
// if(isset($_POST['enviar']))

function sendEmail()
{
    if (!isset($_POST['no-spam']) || $_POST['no-spam'] != '') {
        return ['status' => 'error', 'msg' => 'parece que es spam'];

    }
    if (!(isset($_POST['name'], $_POST['email'], $_POST['comments']))) {
        return ['status' => 'error', 'msg' => 'complete todos los campos'];
    }

    $mail = new PHPMailer(true);
    try {
        //Server settings
        $mail->SMTPDebug = 3;
        $mail->isSMTP();
        $mail->Host        = '';
        $mail->SMTPAuth    = true;
        $mail->Username    = '';
        $mail->Password    = '';
        $mail->SMTPSecure  = 'ssl';
        $mail->Port        = 465;
        $mail->SMTPOptions = ['ssl' => ['verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true]];
        //Recipients
        $mail->setFrom('', 'Formulario de contacto');
        $mail->addAddress('');

        //Content
        $mail->isHTML(false);
        $mail->Subject = 'Cliente: ' . $_POST['email'];
        $mail->Body    = $_POST['comments'];
        $mail->AltBody = $_POST['comments'];

        $mail->send();
        return ['status' => 'OK', 'msg' => 'mail enviado'];

    } catch (Exception $e) {
        return ['status' => 'error', 'msg' => '$mail->ErrorInfo'];
    }

}

echo json_encode(sendEmail());

Entonces, en la función que envió el ajax, la respuesta trae un campo status que te dice si hubo error o todo salió bien. Dependiendo de eso muestras el mensaje.

9
  • Hola amenadiel, he probado tú aportación y funciona a la perfección, pero poniéndome a leer línea a línea hay una parte que no entiendo y es la del then y catch. En then no me ejecuta nada, en catch me salta el warning pero yo no veo ninguno.
    – Mr Robot
    Commented el 14 sept. 2018 a las 9:45
  • Dices que en la consola del browser no aparece nada? Qué versión de jQuery estás usando? En versiones antiguas se usaba "done" en vez de "then" y "fail" en vez de "catch". Pero revisa qué te está devolviendo el backend de todas maneras.
    – ffflabs
    Commented el 15 sept. 2018 a las 0:22
  • Uso la version 3.3.1. Es extraño porque he puesto console.logs diferentes, para verificar lo que se me ejecuta en un sitio y en otro, y solo se ejecuta lo que está dentro del catch.
    – Mr Robot
    Commented el 17 sept. 2018 a las 14:13
  • Pero usando la pestaña network de chrome devtools, cuando mandas la petición ajax, qué recibes de vuelta? Y dentro del catch, qué te imprime el warn en la pestaña console?
    – ffflabs
    Commented el 18 sept. 2018 a las 12:44
  • Puse un console.log(ímprime algo) dentro del then(), pero salta directamente al catch, y el warn me devuelve por consola un objeto con las propiedades catch, then, status, responseText.. y no parece que haya nada mal, porque la propiedad statusText me devuelve "Ok" y la de status: 200
    – Mr Robot
    Commented el 20 sept. 2018 a las 14:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.