Lenguaje PHP

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.

Enviar email con Bootstrap
Enviar email con Bootstrap

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.

Modal Formulario de contacto
Modal Formulario de contacto
<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">&times;</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';
Enviar Email con Bootstrap Modal Popup Ajax & PHP
Enviar Email con Bootstrap Modal Popup Ajax & PHP

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.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

8 comentarios

    1. 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.

  1. 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.

    1. 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.

  2. 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.

    1. Hola JM

      Gracias por informar el inconveniente. Por este informe, ya se corrigió para que la descarga sea más fluida.
      Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba