1

Tengo un formulario en mi sitio que funciona bien, la cosa es que yo quisiera que, al enviar el mensaje, en lugar de dirigirme a misitio.com/mail.php y mostrarme el mensaje que el correo fue enviado (o no) me aparezca un mensaje bajo el formulario. Entiendo que tendría que trabajar con ajax para hacer una cosa asi? Si alguien me tira una idea, agradecido.

html del formulario

 <form action="mail.php" method="POST">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group mt-2">
                                                        <input name="name" id="name" type="text" class="form-control" placeholder="Nombre*" required="">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group mt-2">
                                                        <input name="email" id="email" type="email" class="form-control" placeholder="Email*" required="">
                                                    </div>
                                                </div>                                
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="form-group mt-2">
                                                        <input name="subject" type="text" class="form-control" id="subject" placeholder="Asunto" required="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="form-group mt-2">
                                                        <textarea name="comments" id="comments" rows="11" class="form-control" placeholder="Mensaje..."></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12 text-right">
                                                    <input type="submit" class="btn btn-custom" value="Enviar">
                                                </div>
                                            </div>
                                        </form>

php del formulario

<?php

if($_POST) {
$name = "";
$email = "";
$subject = "";
$comments = "";
$recipient = "[email protected]";
 
if(isset($_POST['name'])) {
  $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
}
 
if(isset($_POST['email'])) {
    $email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['email']);
    $email = filter_var($email, FILTER_VALIDATE_EMAIL);
}
 
if(isset($_POST['subject'])) {
    $subject = "Correo desde sitio.com - ".$_POST['subject'];
}
 
if(isset($_POST['comments'])) {
    $comments = "Mensaje de ".$name.": ".htmlspecialchars($_POST['comments']);
}
 
 
$headers  = 'MIME-Version: 1.0' . "\r\n"
.'Content-type: text/html; charset=utf-8' . "\r\n"
.'From: ' . $name . "\r\n";
 
if(mail($recipient, $subject, $comments, $headers)) {
    echo "<p>Gracias por ponerse en contacto, $name. En breve nos pondremos en contacto con usted.</p>";
} else {
    echo '<p>Lo sentimos pero el mensaje no pudo ser enviado.</p>';
}
 
} else {
echo '<p>Algo salió mal</p>';
}

?>

1 respuesta 1

2

Así es, puedes hacerlo con Ajax así:

$("form").submit(function(event){ // sería mejor que le asignaras un id al formulario para usarlo en lugar del elemento form
    event.preventDefault(); // cancela el evento clic
    var url_php = $(this).attr("action"); 
    var type_method = $(this).attr("method"); 
    var form_data = $(this).serialize(); 

    $.ajax({
        type: type_method,
        url: url_php,
        data: form_data,
        success: function(data) {
            $('#alert').html(data) // este div deberás crearlo donde quieras mostrar la notificación, abajo del formulario en tu caso.
        }
    });
});

Revisa mediante el inspector como se están pasando las variables por si no te queda usar serialize(), en ese caso tendrás que pasar las variables independientes, algo así como:

// sustituye data dentro de las opciones de ajax

data: {
    nombre:$('#nombre').val(),
    email:$('#email').val(),
},

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.