En esta guía rápida veremos como podemos enviar correos desde un formulario de contacto aprovechándonos de un servicio llamado EmailJS. Para ello solo debemos tener las credenciales de un correo personal como Gmail, Outlook o iCloud, o también un servicio de envío de correos como MailChimp o Amazon SES.
Para esta práctica utilizaremos un correo de Gmail y un formulario sencillo de contacto. La versión gratuita de EmailJS te ofrece el envío de 200 email por mes, y para ello debes registrarte en su página web https://emailjs.com para poder empezar a utilizar su servicio. Los pagos a seguir son los siguientes:
1. Conectar a nuestra cuenta el servicio de GMail
2. Crear una plantilla de correo
3. Crear un formulario de contacto e implementar la librería de EmailJS

 

Una vez registrado deberías poder acceder al Dashboard de EmailJS:

una vez dentro ya puedes iniciar.

 

Paso #1 Conectar a nuestra cuenta el servicio de Gmail
He creado este GIF indicando los pasos que debes seguir para conectarte con gmail:

 

Paso #2 Crear una plantilla de correo
Para ello nos vamos a la opción “Email Templates” y seleccionamos la opción “Create new template”. Se nos mostrarán varias opciones de plantillas, pero para este ejercicio utilizaremos la opción “Blank”. Una vez seleccionada la plantilla debemos ver una pantalla se muestra a continuación:

Explicaré los campos que debemos llenar y con que información:
  • Template Name: Como deseamos llamar a nuestra plantilla
  • Template ID: Requerido al momento de enviar nuestro correo
  • To email: Email al que deseamos que lleguen los correos enviados desde nuestro formulario web
  • From name: Nombre de quien envía el mensaje (usaremos este campo de forma dinámica)
  • From email: Email de quién envía el mensaje (usaremos este campo de forma dinámica)
  • Subject: Asunto del correo (usaremos este campo de forma dinámica)
Todos los demás campos y opciones no serán configurados por ahora.
Y así es como debería quedar nuestra plantilla con los atributos definidos:

Puedes observar que algunos campos los he definido con una sintaxis de doble llave {{ atributo }}, esto significa que estos valores serán obtenidos desde la petición que realicemos en nuestro formulario web. Además en el campo “To email” he definido un correo con el dominio mailinator, este servicio te permite recibir correos en una bandeja pública sin necesidad de registrar o usar alguna contraseña (excelente para probar la recepción de correos). De manera que para acceder a la bandeja y revisar que los correos sean recibidos debes acceder a esta URL: https://www.mailinator.com/v2/inbox.jsp?zone=public&query=emailjstest
Desde nuestro mismo dashboard en la opción “Test” vamos a realizar una prueba con los datos siguientes:

El correo que hemos recibido en Mailinator:

 

Paso #3 Crear un formulario de contacto e implementar la librería de EmailJS

Con el siguiente formulario que he creado en HTML y Vue.js puedes probar el envío de correos asignando tus claves de acceso.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                EmailJS!
            </title>
        </meta>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        </link>
    </head>
    <body>
        <div id="app" style="padding-top: 8rem;">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 form-group">
                        <label>
                            Nombre:
                        </label>
                        <input class="form-control" type="text" v-model="from_name">
                        </input>
                    </div>
                    <div class="col-sm-6 col-sm-offset-3 form-group">
                        <label>
                            Asunto:
                        </label>
                        <input class="form-control" type="text" v-model="subject">
                        </input>
                    </div>
                    <div class="col-sm-6 col-sm-offset-3 form-group">
                        <label>
                            Correo:
                        </label>
                        <input class="form-control" type="email" v-model="from_email">
                        </input>
                    </div>
                    <div class="col-sm-6 col-sm-offset-3 form-group">
                        <label>
                            Mensaje:
                        </label>
                        <textarea class="form-control" v-model="message">
                        </textarea>
                    </div>
                    <div class="col-sm-6 col-sm-offset-3 text-center">
                        <button @click="enviar" class="btn btn-success">
                            Enviar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js">
        </script>
        <script src="https://cdn.emailjs.com/dist/email.min.js" type="text/javascript">
        </script>
        <script>
            (function(){
                emailjs.init("<YOUR USER ID>");
             })();
            const vue = new Vue({
                el: '#app',
                data(){
                    return {
                        from_name: '',
                        from_email: '',
                        message: '',
                        subject: '',
                    }
                },
                methods: {
                    enviar(){
                        let data = {
                            from_name: this.from_name,
                            from_email: this.from_email,
                            message: this.message,
                            subject: this.subject,
                        };
                        
                        emailjs.send("<YOUR SERVICE ID>","<YOUR TEMPLATE ID>", data)
                        .then(function(response) {
                            if(response.text === 'OK'){
                                alert('El correo se ha enviado de forma exitosa');
                            }
                           console.log("SUCCESS. status=%d, text=%s", response.status, response.text);
                        }, function(err) {
                            alert('Ocurrió un problema al enviar el correo');
                           console.log("FAILED. error=", err);
                        });
                    }
                }
            });
        </script>
    </body>
</html>
User ID se encuentra en la opción Account > User info de tu Dashboard
Service ID se encuentra en la opción Email Services y eligiendo el servicio
Template ID se encuentra en la opción Email Templates y eligiendo la plantilla

 

Una vez configurados esos parámetros no deberías tener ningún problema para poder envíar correos desde tu sitio o formulario de contacto. EmailJS también puede usarse con reCaptcha para evitar el spam en el envío de correos, adjuntar archivos, contestar correos y reenviar a otros. Todas las opciones puedes encontrarlas en la referencia API del servicio.
Si tienes alguna duda o aclaración puedes escribirla en los comentarios!
Tags: ,

4 comments. Leave new

es de lo mejor mucha ayuda gracias!

Juan Carlos Jocop Arriola
February 9, 2019 10:46 pm

Buenas tardes. Me ha funcionado bien esta guía. Puedo enviar correos con el código acá propuesto. Sin embargo, al integrarlo en un proyecto de VUEJS no funciona. El error que obtengo es este:
Error in created hook: “TypeError: Cannot read property ‘init’ of undefined”
realicé las siguientes acciones:
npm install emailjs –save,
lo veo integrado en mi archivo package.json.
En mi script, en la primera línea escribí: import emailjs from ’emailjs-com’, y
en created() incluí el init con mi USER_ID.

Muchas veces al tener una instancia vue y tener código fuera de esa instancia no funciona correctamente, en ocasiones lo he solucionado metiendo la inicialización que comentas dentro de created() y/o mounted(), o encontraste otra forma de resolverlo?

Juan Carlos Jocop
February 9, 2019 10:56 pm

Problemas para usar EmailJS en un proyecto de VUEJS. instalé la dependencia con npm (version 2.3.2), incluí el import en mi script e incluí el “init” en created(). Agradecería más información. El código que acá incluyen me funcionó bien en un mismo archivo html. Puedo enviar correos sin problemas. Gracias anticipadas

Leave a Reply