Hello everyone!
I'm trying to integrate Sweet Alert into a html page of Bootstrap that has a simple contact form that uses the PHPMailer class to send messages.
The code works correctly, except that I do not like the default alert that PHPMailer has.
Once I have integrated the Sweet Alert code, in fact several things happen when sending, it continues redirecting to the PHP send.php file that processes the data but when it should skip the notification that the email has been sent the page remains blank. But the email arrives correctly, it's just that the alert does not work.
Below you have the code.
How do I prevent it from leaving the current page of the form and skip the notification as a floating window in it?
I would also like that when you click on the OK button, the page will be refreshed and the form fields will be blank.
What more errors do you see fat in the code?
Since I already notice that my knowledge is very limited, I feel if you see some nonsense.
<?php
require ("php/PHPMailer.php");
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$telefono = $_POST['telefono'];
$asunto = $_POST['asunto'];
$mensaje = $_POST['mensaje'];
$mail = new PHPMailer\PHPMailer\PHPMailer;
$mail->CharSet = 'UTF-8';
$mail->From = $email;
$mail->FromName = $nombre;
$mail->addAddress("[email protected]");
$mail->isHTML(true);
$mail->Subject = "Solicitud de información";
$mail->Body = "<p>Teléfono: $telefono </p>
<p>E-mail: $email </p>
<p>Asunto: $asunto </p>
<br>
<p>$mensaje</p>";
if(!$mail->send())
{
echo "<script type='text/javascript'>swal({
title: 'Error al enviar',
text: 'Lo sentimos, por el momento no hemos logrado enviar tu mensaje, intentalo nuevamente.',
type: 'error',
confirmButtonText: 'Ok',
closeOnConfirm: false
},
function(){
window.location.href='http://http://misitio.com';
});
</script>";
} else {
echo "<script type='text/javascript'>swal({
title: '¡Mensaje enviado!',
text: 'Gracias por contactarnos, en breve nos comunicaremos contigo.',
type: 'success',
confirmButtonText: 'OK',
closeOnConfirm: false
},
function(){
window.location.href='http://misitio.com';
});
</script>";
}
?>
</script><head>
<!-- Sweet Alert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6">
<h3>FORMULARIO DE CONTACTO</h3>
<form action="enviar.php" method="post" role="form">
<br style="clear:both">
<div class="form-group">
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre *" required/>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email *" required/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="telefono" name="telefono" placeholder="Teléfono *" required/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="asunto" name="asunto" placeholder="Asunto"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="mensaje" name="mensaje" placeholder="Mensaje" rows="7"></textarea>
</div>
<div class="pull-left">* Estos campos son obligatorios.</div>
<button type="submit" name="Submit" value="Enviar" class="btn btn-primary pull-right">Enviar Formulario</button>
</form>
</div><!-- /.form -->
</div><!-- /.row -->
</div><!-- /.container -->
</body>Thank you for your time.