Formulario modal en Bootstrap con Ajax y PHP

Si tu aplicación web utiliza el framework Bootstap, integrar un modal popup es bastante sencillo. Bootstrap te ayuda a agregar un popup a un enlace o a un botón sin tener que utilizar código Javascript adicional. De hecho, mediante Bootstrap, puedes construir un formulario HTML con un diseño profesional en nada de tiempo.

En este tutorial te mostraremos cómo integrar un formulario modal a tu sitio web utilizando Bootstrap, y a enviar dicho formulario con jQuery, Ajax y PHP. Para este ejemplo crearemos un formulario de contacto aprovechando el modal de Bootstrap y haremos submit del mismo y lo validaremos con jQuery, Ajax y PHP. Este es listado de funcionalidades que implementaremos en nuestro script para generar un formulario modal con Bootstrap.

  • Popup modal con formulario de contacto mediante Bootstrap
  • Validación del formulario utilizando jQuery
  • Envío de los datos del formulario con jQuery, Ajax y PHP
  • Enviar al admin del sitio web mediante PHP

Librerías Bootstrap y jQuery

Utilizaremos Bootstrap para crear el modal y diseñar nuestro formulario HTML, así que para ello debemos incluir su librería y la de jQuery, antes que nada.

<!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML del modal del formulario de contacto

El siguiente HTML creará una ventana modal utilizando Bootstrap. Utilizaremos un botón para llamar al popup, el cual contará con un formulario de contacto. El botón o enlace necesitará dos atributos data-*, data-toggle=”modal” y data-target=”#modalform”. Por supuesto, el formulario de la ventana modal debe contar con el mismo ID que hemos puesto en el atributo data-target del enlace o del botón.

<!-- Button to trigger modal -->
<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm">
    Open Contact Form
</button>

<!-- Modal -->
<div class="modal fade" id="modalForm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Contact Form</h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/>
                    </div>
                    <div class="form-group">
                        <label for="inputMessage">Message</label>
                        <textarea class="form-control" id="inputMessage" placeholder="Enter your message"></textarea>
                    </div>
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">SUBMIT</button>
            </div>
        </div>
    </div>
</div>

Javascript para validar y enviar el formulario

La función submitContactForm() se ejecutará cuando el usuario haga clic en el botón de submit. En la función submitContactForm(), los datos enviados del formulario que aparece en el modal serán validados antes de ser enviados al fichero submit_form.php.

<script>
function submitContactForm(){
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var message = $('#inputMessage').val();
    if(name.trim() == '' ){
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    }else if(email.trim() == '' ){
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    }else if(email.trim() != '' && !reg.test(email)){
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    }else if(message.trim() == '' ){
        alert('Please enter your message.');
        $('#inputMessage').focus();
        return false;
    }else{
        $.ajax({
            type:'POST',
            url:'submit_form.php',
            data:'contactFrmSubmit=1&name='+name+'&email='+email+'&message='+message,
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(msg){
                if(msg == 'ok'){
                    $('#inputName').val('');
                    $('#inputEmail').val('');
                    $('#inputMessage').val('');
                    $('.statusMsg').html('<span style="color:green;">Thanks for contacting us, we'll get back to you soon.</p>');
                }else{
                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                }
                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }
}
</script>

Enviar el correo electrónico al administrador de la web

En el fichero submit_form.php, necesitamos llevar a cabo estas funciones:

  • Comprobar que el formulario enviado no está vacío y validar la dirección de correo electrónico mediante el filtro FILTER_VALIDATE_EMAIL en PHP
  • Obtener los datos del formulario mediante el método $_POST
  • Enviar correo HTML con la información recibida del formulario utilizando la función mail() de PHP.
  • Una vez se hayan completado todas las tareas, debemos mostrar un mensaje de ok al usuario utilizando el método success de Ajax.
<?php
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     = [email protected]';
    $subject= 'Contact Request Submitted';
    
    $htmlContent = '
    <h4>Contact request has submitted at CodexWorld, details are given below.</h4>
    <table cellspacing="0" style="width: 300px; height: 200px;">
        <tr>
            <th>Name:</th><td>'.$name.'</td>
        </tr>
        <tr style="background-color: #e0e0e0;">
            <th>Email:</th><td>'.$email.'</td>
        </tr>
        <tr>
            <th>Message:</th><td>'.$message.'</td>
        </tr>
    </table>';
    
    // Set content-type header for sending HTML email
    $headers = "MIME-Version: 1.0" . "rn";
    $headers .= "Content-type:text/html;charset=UTF-8" . "rn";
    
    // Additional headers
    $headers .= 'From: CodexWorld<[email protected]>' . "rn";
    
    // Send email
    if(mail($to,$subject,$htmlContent,$headers)){
        $status = 'ok';
    }else{
        $status = 'err';
    }
    
    // Output status
    echo $status;die;
}

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP