En este tutorial haremos un formulario de contacto capaz de enviar mensajes a un correo electrónico determinado sin recargar la pagina, todo esto usando el metodo AJAX de jQuery y haciendo el envio con PHP.
Para seguir con este tutorial necesitas:
- Un servidor local o remoto
- Conocimiento básico o intermedio de HTML y CSS
- Conocimiento básico o intermedio de Javascript y jQuery
- Conocimiento básico o intermedio de PHP y la función mail()
Estructura de archivos
La organización de archivos que usaremos estará compuesta de un archivo .html que contendrá el formulario, un .css para la decoración, un .js para la validación y la llamada AJAX y un .php para el envio, ademas del .gif que aparecera cuando la llamada AJAX este siendo procesada.
Archivo: index.html
El Markup para el formulario es super sencillo, solo prestad atención a las clases de los campos de texto y a la del boton:
<!DOCTYPE HTML> <html
<head>
<title>Formulario de Contacto</title>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<form method="post" class="contacto">
<fieldset>
<div><label>Nombre:</label><input type="text" class="nombre" name="nombre" /></div>
<div><label>Email:</label><input type="text" class="email" name="email" /></div>
<div><label>Telefono:</label><input type="text" class="telefono" name="email" /></div>
<div><label>Mensaje:</label><textarea cols="30" rows="5" class="mensaje" name="mensaje" ></textarea></div>
<div class="ultimo">
<img src="ajax.gif" class="ajaxgif hide" />
<div class="msg"></div>
<button class="boton_envio">Enviar Mensaje</button>
</div>
</fieldset>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</body>
</html>
El div.ultimo, sera el contenedor de: el ajax.gif, el mensaje resultante(div.msg) que saldrá al termino de la llamada AJAX y del boton de envio, los dos primeros estarán ocultos al principio.
Archivo: estilos.css
No hay mucho que explicar en esta parte, estos estilos son en su mayoría decorativos a excepción de los últimos que explicare mas adelante:
/* Estilos Base */
* {
color: #262626;
font: 12px sans-serif;
}
body {
background: #F4F4F4;
}
/* Estilos del formulario */
form.contacto {
margin: 25px auto 0;
width: 440px;
}
form.contacto fieldset {
background: white;
border: 1px solid #E1E1E1;
box-shadow: 0 0 10px #DADADA;
-webkit-box-shadow: 0 0 10px #DADADA;
-moz-box-shadow: 0 0 10px #DADADA;
padding: 25px;
}
form.contacto fieldset>div {
clear: both;
margin-bottom: 20px;
overflow: hidden;
}
form.contacto fieldset div label {
display: block;
float: left;
margin-right: 15px;
margin-top: 5px;
text-align: right;
text-transform: uppercase;
width: 84px;
}
form.contacto input[type="text"],
form.contacto textarea {
background: #F5F5F5;
border: 1px solid #E8E8E8;
color: #626262;
display: block;
float: left;
padding: 8px;
resize: none;
width: 265px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
}
form.contacto input[type="text"]:focus,
form.contacto textarea:focus {
background: #F9F9F9;
border: 1px solid #D3D3D3;
outline: none;
}
form.contacto .ultimo {
margin-bottom: 0;
position: relative
}
form.contacto button {
background: #444444;
border: 0 none;
color: #FFFFFF;
float: right;
font-weight: bold;
height: 32px;
padding: 0 10px;
position: relative;
text-transform: uppercase;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
}
form.contacto button:hover {
background: #6A6A6A;
}
/* AJAX Gif y mensajes de exito o fracaso */
.hide {
display: none;
}
.ajaxgif {
position: absolute;
right: 150px;
top: 5px;
}
.msg {
color: white;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
position: absolute;
right: -155px;
text-transform: uppercase;
min-width: 121px;
}
.msg_ok {
background: #589D05;
}
.msg_error {
background: red;
}
Los estilos marcados son los mas importantes para que este formulario funcione correctamente, lo anterior lo puedes modificar u obviar.
- Linea 75: Con esto ocultaremos al ajax.gif al principio.
- Linea 78: Posicionaremos el ajax.gif para que cuando aparezca lo haga junto al boton de envio.
- Linea 83: En esta linea ubicaremos el mensaje resultante(.msg), este estará afuera del formulario en la extrema derecha(right: -155px), entrara solo cuando la llamada AJAX termine.
- Linea 93 y 96: Estos dos estilos son para colorear el fondo del mensaje resultante dependiendo si resulto ok o hubo algún error.
Si no entiendes muy bien esta parte no te preocupes, va a tomar forma cuando pasemos a la parte de jQuery.
Archivo: funciones.js
Primero capturamos el evento de clic sobre el boton de envio(linea 2) y obtenemos los valores de cada uno de los campos de texto/textarea y los guardamos en variables, luego usamos estas variables para validar el formulario:
(function () { // Funcion anonima
$(".boton_envio").click(function () {
var nombre = $(".nombre").val();
email = $(".email").val();
validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
telefono = $(".telefono").val();
mensaje = $(".mensaje").val();
if (nombre == "") {
$(".nombre").focus();
return false;
} else if (email == "" || !validacion_email.test(email)) {
$(".email").focus();
return false;
} else if (telefono == "") {
$(".telefono").focus();
return false;
} else if (mensaje == "") {
$(".mensaje").focus();
return false;
} else { // Si todo paso, aqui ira la llamada AJAX
}
});
})(); // () = Auto-invocación
Nota: En la variable validacion_email(linea 6) almacenamos los caracteres que todo correo tiene, usaremos esta variable para validar(linea 13) el campo email asegurandonos así que el usuario ingrese un correo electrónico valido.
AJAX
La llamada AJAX la ubicaremos dentro del } else { al final de la validación(linea 23):
$('.ajaxgif').removeClass('hide');
var datos = 'nombre=' + nombre + '&email=' + email + '&telefono=' + telefono + '&mensaje=' + mensaje;
$.ajax({
type: "POST",
url: "proceso.php",
data: datos,
success: function () {
$('.ajaxgif').hide();
$('.msg').text('Mensaje enviado!').addClass('msg_ok').animate({
'right': '130px'
}, 300);
},
error: function () {
$('.ajaxgif').hide();
$('.msg').text('Hubo un error!').addClass('msg_error').animate({
'right': '130px'
}, 300);
}
});
return false;
- Linea 23: Lo primero es mostrar el ajax.gif para que el usuario sepa que su mensaje esta siendo procesado.
- Linea 24: Luego creamos una variable que se llamara datos, aqui vamos a juntar todas las variables que declaramos al principio(linea 4) en una cadena que pasaremos via AJAX.
- Linea 25: Llamamos al metodo ajax() de jQuery indicandole el metodo a usar, el url de destino(proceso.php) y los datos a enviar(datos).
- Linea 29: En caso de éxito, primero escondemos al .ajaxgif y seguido sacamos al mensaje resultante con el texto «Mensaje enviado!», ademas le añadimos la clase msg_ok y le cambiamos el valor de la propiedad right a 130px usando una animación que dure 300 milisegundos.
- Linea 33: En caso de error, que pase algo parecido que en caso de éxito, solo que cambiamos el mensaje a «Hubo un error!» y la clase a msg_error.
Y con eso hemos terminado la parte mas tediosa, que es enviar los datos via AJAX, ahora vamos a editar el archivo proceso.php que se encargara de recibir estos datos y enviar el mensaje correspondiente.
Archivo: proceso.php
Leer los comentarios:
<?php
// Guardar los datos recibidos en variables:
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$telefono = $_POST['telefono'];
$mensaje = $_POST['mensaje'];
// Definir el correo de destino:
$dest = "tucorreo@gmail.com";
// Estas son cabeceras que se usan para evitar el chance que el correo llegue a Spam y sea visualizado como HTML:
$headers = "From: $nombre <$email>\r\n";
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Aqui definimos el asunto y armamos el cuerpo del mensaje mediante concatenacion de variables (.=)
$asunto = "Contacto";
$cuerpo = "Nombre: ".$nombre."<br>";
$cuerpo .= "Email: ".$email."<br>";
$cuerpo .= "Telefono: ".$telefono."<br>";
$cuerpo .= "Mensaje: ".$mensaje; // anidamos el mensaje final
// Esta es una pequena validación, que solo envie el correo si todas las variables tiene algo de contenido:
if($nombre != '' && $email != '' && $telefono != '' && $mensaje != ''){
mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!
} ?>
Y con eso terminamos nuestro formulario de contacto en AJAX, este tutorial lo hice para intentar resumir y mejorar en una sola entrega los 3 tutoriales anteriores que publique hace unas semanas, si tienes alguna duda hazmelo saber en los comentarios.