web – formulario de contacto con backbone, php y jquery

febrero 20, 2014

Crear un formulario de contacto para un sitio web es algo sencillo, ¿cierto? Sólo necesitamos un servicio responsable de enviar el correo y un formulario para que el usuario llene los campos y envíe el mensaje. La pregunta es ¿cómo hacerlo mediante ajax (utilizando jQuery)?

En el servidor (mailer.php)

<?php
$response = "";
try{
/* Set e-mail recipient */
$to = "cirovladimir@gmail.com";
$name = $_POST['nombre'];
$from = $_POST['correo'];
$subject = $_POST['asunto'];
$message = $_POST['mensaje'];

$message = "
Nombre: $name
Correo: $from
Asunto: $subject

Mensaje:
$message
";

/* Send the message using mail() function */
if(mail($to, $subject, $message)){
    $response = "{\"status\": 0, \"data\": \"success\"}";
}else{
    $response = "{\"status\": -1, \"data\": \"no pudimos enviar tu mensaje\"}";
}
}catch(Exception $e){
    $response = "{\"status\": -1, \"data\": \"ocurrió algo extraño al enviar tu mensaje\"}";
}
echo $response;
?>

Por supuesto este servicio no es muy seguro y es susceptible a la inyección de código. Una implementación mucho más segura es la de jemjabella que con un poco de modificaciones podemos transformar en un servicio. La idea es que este servicio nos regrese una respuesta en formato JSON que nos indique el status del envío del mensaje. Este servicio será invocado desde el cliente mediante jQuery.

El formulario, utilizando twitter bootstrap, quedaría de la siguiente manera

<form id="contactform" role="form">
    <div class="form-group">
        <label for="nombre" class="control-label sr-only">Nombre</label>

        <div class="">
            <input type="text" class="form-control" id="nombre" name="nombre"
            placeholder="Tu nombre">
        </div>
    </div>
    <div class="form-group">
        <label for="correo" class="control-label sr-only">Correo</label>

        <div class="">
            <input type="text" class="form-control" id="correo" name="correo"
            placeholder="Tu correo">
        </div>
    </div>
    <div class="form-group">
        <label for="asunto" class="control-label sr-only">Asunto</label>

        <div class="">
            <input type="text" class="form-control" id="asunto" name="asunto"
            placeholder="El asunto del mensaje">
        </div>
    </div>
    <div class="form-group">
        <label for="mensaje" class="control-label sr-only">Mensaje</label>

        <div class="">
            <textarea class="form-control" rows="4" id="mensaje" name="mensaje"
            placeholder="Tu mensaje..."></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="">
            <button type="submit" class="btn btn-default">
                Enviar
            </button>
        </div>
    </div>
</form>

y el código de javascript para el envío del formulario utilizando jquery

$(document).on('ready', function(){
    $('#contactform').submit(function(e){
        var self = this
        e.preventDefault()
        $.ajax({
            type: "POST",
            url: "mailer.php",
            data: $('#contactform').serialize(),
            success: function(data){
                response = jQuery.parseJSON(data)
                if(response.status === 0){
                    alert('Tu mensaje ha sido enviado')
                }else{
                    alert('Ocurrió un error al enviar tu mensaje')
                }
            },
            error: function(e){
                alert("failure: " + e)
            }
        })
    })
})

Es importante llamar el método e.preventDefault para evitar propagar el evento ‘submit’ del formulario y que el navegador recargue la página. Obviamente debemos reemplazar el método ‘alert’ por algún elemento(img, label, alert, glyphicon, etc) que se muestre u oculte de acuerdo al status del envío.

Fuentes:
http://stackoverflow.com/questions/21192235/jquery-ajax-form-submit-with-twitter-bootstrap-modal
https://github.com/jemjabella/PHP-Mail-Form/blob/master/mail_form_v2.txt

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: