Enviar un formulario sin recargar la pagina
Los formularios son una parte importante de cualquier proyecto web. Con jQuery Ajax podemos enviar un formulario sin recargar la pagina, de manera asíncrona.
En este caso en particular, me voy a enfocar en como enviar un formulario de contacto a un correo electrónico. Y te enseñaré como hacerlo, paso a paso.
En cualquier tipo de proyecto web que te encuentres trabajando (sitio web, sistema administrativo, comunidades, blogs, etc.) de seguro existe un formulario en su lógica de proceso.
Los formularios le permiten a los usuarios realizar una determinada tarea, como hacer login, registrar una nueva cuenta, enviar publicaciones a un blog, subir videos, suscribirse a una lista y otras diferentes tareas según sea la plataforma.
Pero sin duda, el mas popular de todos, es formulario para enviar un mensaje por correo electrónico. Y en este nos vamos a enfocar. Con un ejemplo completo, detallado y como siempre, con todo el código listo para descargar y usar.
Me voy a basar en el ejemplo de la Plantilla Básica que ya he compartido en otra oportunidad, y la vamos a mejorar, agregando el código necesario para poder enviar un formulario sin recargar la pagina.
Formulario HTML
Este es el formulario en HTML. Todas las clases y estilos CSS estan definidos en el archivo misestilos.css que se encuentra disponible dentro del paquete para descargar.
Para mantenerlo sencillo, se trata de un formulario simple con 3 campos: Nombre, Email y Mensaje. Cada campo esta contenido dentro de un DIV con la clase field para poder manipularlos mediante Js una vez enviado el formulario. Veremos esto mas adelante.
<div id="page-wrapper">
<div class="output_message" id="form-messages"></div>
<form method="post" class="formulario1" action="">
<div class="field">
<input id="name" type="text" name="name" placeholder="Nombre"><br>
</div>
<div class="field">
<input id="email" type="email" name="email" placeholder="Email"><br>
</div>
<div class="field">
<textarea id="message" rows="4" cols="20" name="message" placeholder="Mensaje"></textarea><br>
</div>
<div class="field">
<button id="enviar" name="submit" type="submit">Enviar</button>
</div>
</form>
</div>
Mostrar los mensajes al usuario
El div de la segunda línea, que esta vacío, será el que usaremos para interactuar con nuestros visitantes, mostrando los mensajes de éxito, alerta o error, según corresponda.
<div class="output_message" id="form-messages"></div>
Manipulando los datos con jQuery
La librería jQuery esta creada sobre el Lenguaje de Programación JavaScript, y nos permite crear aplicaciones rápidamente minimizando el uso de código excesivo.
Sabiendo esto podemos escribir código JavaScript dentro de nuestro código jQuery si lo deseamos o necesitamos para agregar alguna funcionalidad.
Esta librería tiene sus métodos para manipular datos con Ajax. He tratado de comentar las líneas mas importantes para explicar que hace cada bloque de código.
<!-- Codigo para el manejo y envio del correo -->
<script>
$(document).ready(function() {
$('.formulario1').on('submit',function(){
// Tomamos el DIV donde vamos a mostrar los mensajes.
var formMessages = $('#form-messages');
// En el DIV de los mensajes, mostramos el texto 'Enviando...' Justo despues de hacer click en el boton enviar
$(formMessages).text('Enviando...');
var form = $(this);
$.ajax({
// En la varible url hay que poner la ruta al archivo php que se encarga de procesar y enviar el formulario. En este caso enviarmail.php se encuentra en el mismo directorio
url: "enviarmail.php",
method: form.attr('method'),
data: form.serialize(),
success: function(result){
console.log(result); // <- Esta linea es para mostrar el resultado en la consola del navegador. Cuando todo este funcionando se puede eliminar
if (result == 'exito'){
// Agrgamos la clase 'success' al div formMessages. Para mostrar el resultado en Verde
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Definimos el mensaje a mostrar en el DIV cuando se envió el email correctamente.
$(formMessages).text('1 - Mensaje Enviado!');
// Limpiamos los campos del formulario. Hacemos referencia a cada campo con su id.
$('#name').val('');
$('#name').css('display','none');
$('#email').val('');
$('#email').css('display','none');
$('#message').val('');
$('#message').css('display','none');
$('#enviar').css('display','none');
// Ocultamos todos los campos del formulario. Hacemos referencia a cada div con su clase .field
// Este paso es opcional. Sin esta ultima linea, el formulario queda con los campos en blanco
$('.field').css('display','none');
}
else if (result == 'vacio'){
// Agrgamos la clase de CSS 'error' al div formMessages. Para mostrar el resultado en Rojo
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Definimos el mensaje a mostrar en el DIV cuando faltan completar campos.
$(formMessages).text('2 - Todos los campos son obligatorios.');
}
else {
// Agrgamos la clase de CSS 'error' al div formMessages. Para mostrar el resultado en Rojo
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Definimos el mensaje a mostrar en el DIV cuando email no pudo ser enviado.
$(formMessages).text('3 - Error al enviar el email!');
}
}
});
// Evita la acción por defecto del botón SUBMIT. Evita que se envíe el formulario al hacer click en ENVIAR.
return false;
});
});
</script>
Código PHP
En el código jQuery Ajax anterior se puede ver que al presionar el botón de ENVIAR, estamos enviando los datos del formulario al archivo enviarmail.php.
Este archivo, es el encargado de recibir los datos del formulario y procesar el envío del correo electrónico del lado del servidor web. Se pueden usar otros lenguajes de programación como Python, Ruby, etc. yo usaré PHP para este tutorial.
Al igual que en el apartado anterior, he colocado muchos comentarios, para explicar claramente que hace cada bloque de código.
<?php
// Validamos que se haya rellenado todos los campos.
$required = array('name', 'email', 'message');
$error = false;
foreach($required as $field) {
if (empty($_REQUEST[$field])) {
$error = true;
}
}
// Si hay algun campo vacio la variable error es TRUE. Mandamos un error "vacio"
if ($error) {
echo 'vacio';
}
// Si todos los campos están completos ejecutamos la función para enviar el mail
else {
// -------
// DISCLAIMER: Es mucho muy importante hacer aquí una validación de los datos recibidos desde el formulario
// Para no sufrir una inyección de SQL, NUNCA, pero nunca hay que confiar en los datos ingresados en un formulario
// -------
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$message = $_REQUEST['message'];
$fullmessage = "Remitente: ".$name."\n"."Mensaje: \n".$message;
// Configura tu cuenta de correo para recibir el mensaje y el asunto del mail.
// Debes modificar esta linea con tus propios datos
$to = 'tucorreo@tudominio.com';
$subject = 'Nuevo mensaje desde tu sitio web';
$headers = "From: tucorreo@tudominio.com.ar\r\n" . "Reply-To: $email" . "\r\n";
$send_email = mail($to,$subject,$fullmessage,$headers);
if ($send_email == false) {
echo 'error';
} else {
echo 'exito';
}
}
?>
El código PHP recibe los datos desde jQuery Ajax y los envía al correo que hayamos configurado como destinatario en el mismo archivo.
También hemos definido el asunto del mensaje (subject) y otros parámetros dentro de la variable $headers como ser el FROM y la dirección del remitente para poder responderle.
En este archivo es donde vamos a realizar las validaciones. En este caso, y para mantenerlo simple, solo verificamos que ninguno de los 3 campos estén vacíos. Pero recuerden que siempre deben validar todos los datos que se reciben desde cualquier formulario.
Entonces, si enviamos el formulario y un campo contiene un dato que no es válido, podemos mostrar el mensaje de error que hayamos definido en el DIV de mensajes, de manera asíncrona.
De igual forma, cuando el mail se envía correctamente, podemos mostrar el mensaje avisando que se logró enviar el formulario sin recargar la pagina. En este caso el mensaje se muestra en color verde y se ocultan todos los campos.
Si llegaste hasta aquí, te has ganado la posibilidad de descargar el ejemplo completo. Totalmente funcional y con los archivos de PHP, HTML y CSS incluidos. Descarga el zip y comienza a procesar tus formularios.
Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.
Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.
Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.