Como Enviar un Formulario con jQuery (Ajax) 3.5.1 a un Correo

7 minuto(s)

Demo Github

Los formularios son parte importante de los proyectos web, ya sea una página web, plataforma de videos, comunidades, blogs, etc. todas ellas suelen tener 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 y diferentes tareas, estas tareas cambian según sea la plataforma. Con jQuery Ajax podemos enviar formularios de manera asíncrona a un correo y en este Post te enseñaré como hacerlo.

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa”:

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Como Enviar un Formulario con jQuery (Ajax) 3.5.1 a un Correo. 

Antes de continuar es importante mencionar que “Cuando lo implementes en tu Servidor, no olvides verificar si los correos van a la carpeta Spam (En este tutorial te explico como trabajar con jQuery Ajax y no me quise enfocar en temas del servidor en donde debes configurar para que los correos no lleguen a Spam).” 

Formulario HTML

Yo suelo usar Bootstrap 4 para enfocarme en el proceso de la aplicación y no tanto en el diseño, tu puedes diseñar tus elementos según tus necesidades, no hay problema, entonces creo el siguiente formulario HTML. 


Si voy al navegador debería de ver mi formulario sin problemas. 

Puedes ver que he creado una capa o div para mostrar los mensajes de validación que serán mostrados cuando el formulario es enviado.


El formulario tiene los campos Nombres y Apellidos, Email, Imagen y Mensaje, estos datos serán enviados a un correo que será configurado con un Lenguaje de programación del lado del servidor (Python, PHP, Ruby, etc.), yo usaré PHP para este tutorial. 

jQuery Ajax (JavaScript)

La librería jQuery esta creada sobre el Lenguaje de Programación JavaScript, nos permite crear aplicaciones rápidamente minimizando el uso de código excesivo, sabiendo esto podemos escribir código JavaScript en nuestra código jQuery si lo deseamos o necesitamos. 

Ahora voy a crear mi código con jQuery, esta librería tiene sus métodos para manipular datos con Ajax, en el código he colocado comentarios para explicar que hace cada bloque de código


Si necesitas agregar otras funcionalidades al código jQuery, pues dale, recuerda que es código JavaScript y puede agregar las funcionalidades adicionales que requieras.

Código PHP

En el código jQuery Ajax anterior puedes ver que estamos enviando los datos al archivo enviarcorreo.php, este es un archivo PHP, tu puedes usar otros lenguajes de programación de lado del servidor como Python, Ruby, etc. yo usaré PHP para este tutorial. En el código he colocado comentarios para explicar que hace cada bloque de código


El código PHP recibe los datos desde jQuery Ajax y son enviados al correo que hayamos configurado en el mismo archivo PHP. 

Entonces si enviamos el formulario y un campo contiene un dato que no es válido pues le mostramos un mensaje sin recargar la página y todo de manera asíncrona. 

Y si todos los datos son válidos y el formulario es enviado, pues mostramos el mensaje: Tu Mensaje ha sido enviado Correctamente ! 

Al inicio de este Post he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde he colocado el código de este tutorial para que lo puedas usar.

Conclusión

En este Post hemos aprendido a enviar un formulario de datos a un correo con jQuery Ajax, tu puedes agregarle otras funcionalidades que necesites para tu proyecto. 

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.