Enviar Email con Bootstrap Modal Popup Ajax & PHP
Enviar Email con Bootstrap Modal Popup Ajax & PHP. Hoy en día muchas sistemas y páginas web utilizan en su aplicación el Framework de estilos «Bootstrap», la integración «modal popup» con tu proyecto es muy fácil, simplemente agregas las librerías necesarias para que funciones que detallaremos más abajo. Bootstrap le ayuda a añadir botones interactivos y también un popup al presionar un botón sin requerir código adicional. También, usando la librería Bootstrap, usted puede construir un formato HTML bien estructurado respetando los altos estándares web y lo más importante en el menor tiempo posible.
Enviar Email con Bootstrap Modal Popup Ajax & PHP
El actual articulo trataremos de cómo podemos integrar un formulario web emergente Modal Popup» a su sitio web utilizando bootstrap y enviar la información del formulario a un correo electrónico para realizar esta tarea nos apoyaremos en los lenguajes de programación como es el PHP, jQuery y Ajax.
Detalles del Script
- Popup modal con formulario usando librería Bootstrap.
- Validación de los datos antes de enviarlos usando jQuery.
- Usaremos jQuery, Ajax y php.
- Enviar el Email usando PHP.
Nuestro sistema consta de 2 ficheros
- Index.html, Albergara las librerias y el Modal Popup
- EnviarForm.php, Lado del lenguaje de programación que se encargara del envio del correo.
Biblioteca de bootstrap & jQuery
La implementación de la librería Bootstrap que se utilizara para hacer funcionar nuestro modal popup y el código HTML, primeramente, incluir las librerías en la etiqueta head de nuestro fichero, nos referimos al bootstrap y jQuery.
<head> <title>Enviar Email con Bootstrap Modal Popup Ajax & PHP</title> <!-- Último minificado bootstrap css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery libraria incluida --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <!-- Último minificado bootstrap js --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .btn-success{margin: 10px;} </style> </head>
Código HTML que usaremos para el modal popup Form
El código HTML que mostraremos a continuación al presionar sobre un objeto crea una ventana de diálogo emergente usando Bootstrap. Para este ejemplo se usará botón con lo cual al presionarlo activará la ventana modal y este mostrará un formulario para enviar un formulario de contacto. Sin embargo, el div debe tener y atributo ID que es fundamental para que la ventana emergente funcione correctamente.
<div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="index.php">Inicio</a></li> </ul> </div> <div class="panel-body"> <!-- Button modal --> <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm"> Abrir Formulario de Contacto </button> <!-- Modal --> <div class="modal fade" id="modalForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Cabecera --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Cerrar</span> </button> <h4 class="modal-title" id="myModalLabel">Formulario de Contacto</h4> </div> <!-- Modal Cuerpo contenido --> <div class="modal-body"> <p class="statusMsg"></p> <form role="form"> <div class="form-group"> <label for="inputName">Nombre</label> <input type="text" class="form-control" id="inputName" placeholder="Ingrese su nombre"/> </div> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Ingrese su email"/> </div> <div class="form-group"> <label for="inputMessage">Mensaje</label> <textarea class="form-control" id="inputMessage" placeholder="Ingrese su mensaje"></textarea> </div> </form> </div> <!-- Modal Pie de Página --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-primary submitBtn" onclick="EnviarFormulario()">Enviar Ahora</button> </div> </div> </div> </div> </div> <div class="panel-footer"><a href="https://www.baulphp.com" target="_blank">BaulPHP</a></div> </div><!--Panel cierra--> </div>
Código JavaScript, validación y envió del formulario
Implementaremos la función EnviarFormulario() que se ejecutara si el usuario da un clic en el botón Enviar formulario. La función EnviarFormulario(), validara los datos enviados mediante el formulario.
$.ajax({ type:'POST', url:'EnviarForm.php', data:'ContactoEnviar=1&name='+name+'&email='+email+'&message='+message, beforeSend: function () { $('.submitBtn').attr("disabled","disabled"); $('.modal-body').css('opacity', '.5'); }, success:function(msg){ if(msg == 'bien'){ $('#inputName').val(''); $('#inputEmail').val(''); $('#inputMessage').val(''); $('.statusMsg').html('<span style="color:green;">Gracias por contactarnos, nos pondremos en contacto con usted pronto.</p>'); }else{ $('.statusMsg').html('<span style="color:red;">Ha ocurrido algún problema, por favor intente de nuevo.</span>'); } $('.submitBtn').removeAttr("disabled"); $('.modal-body').css('opacity', ''); } });
Envíe el email de la petición del contacto (EnviarForm. php)
En el archivo EnviarForm. php, se realizan los siguientes trabajos para procesar la solicitud de envío del formulario.
if(isset($_POST['contactFrmSubmit']) && !empty($_POST['name']) && !empty($_POST['email']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) && !empty($_POST['message'])){ // Submitted form data $name = $_POST['name']; $email = $_POST['email']; $message= $_POST['message']; /* * Send email to admin */ $to = 'admin@example.com'; $subject= 'Contact Request Submitted';
Conclusión
Este pequeño código consta de dos ficheros y nos proporciona una forma fácil y rápida de integrar la ventana emergente y enviar los datos del formulario por Email. Sin embargo, si se desea almacenar datos de ese envio en una base de datos, nos haría falta incorporar cláusulas de conexión y “insert into” para almacenarlo en MySQL para futuras consultas.
Les dejo los archivos para que puedan implementarlo.
Se puede integrar a phpmailer????
Saludos tal vez pudo integralo a phpmailer?
traté de implementarlo, pero al parecer no es funcional, saludos.
Hola Rodrigo,
En que sentido no es funcional.
Para que funcione tienes que probarlo en un servidor de producción y crear un correo con tu nombre de dominio.
Luego configurar el fichero «EnviarForm.php» ahí tienes que colocar el correo corporativo de tu dominio:
Cambiar:
admin@example.com
Por tu correo corporativo existente en tu servidor.
Saludos y cualquier otra duda, responde este mensaje.
Hola.
Aún no he probado el formulario, pero me surge una duda, ¿qué protección tiene el .php para que los spammers no te frían a correos? No sé si me explico…
Un saludo.
Hola Dean,
El formulario solo es un ejemplo de envió de correos electrónicos usando ventanas modales, pero respondiendo tu pregunta, se podría incorporar un CAPTCHA y formulario estará libre de Spammers.
Espero haberte ayudado.
Hola:
El botón de Descarga no funciona.
En el ejemplo, en el código de «EnviarForm. php», creo que te faltan cosas, ¿no?
Gracias y saludos.
Hola JM
Gracias por informar el inconveniente. Por este informe, ya se corrigió para que la descarga sea más fluida.
Saludos.