Enviar Email a través de un formulario con React

Introduccion

En este post vamos a realizar un formulario de envio de correo electrónico utilizando React y EmailJs. Además utilizaremos bootstrap para el diseño del formulario y también explicaré de forma detallada como funciona EmailJS tanto a nivel de codigo como también desde su página web para realizar los emails.

La idea principal de este proyecto es ver una de las distintas formas que hay para enviar correos electronicos de forma automática a un correo destino con unos datos de contacto para poder realizar preguntas o aclaraciones que puedan ayudar a un comercio o a tu empresa.

Desarrollo

Vamos a comenzar creando un nuevo proyecto de react.

Después de que nuestro proyecto se haya creado lo que haremos será abrirlo con el visual studio code. Y a continuación crearemos una carpeta en src con el nombre de components y dentro de la carpeta que acabamos de crear crearemos un archivo que en mi caso lo he llamado Form.js que es donde vamos a realizar el formulario.

En mi caso también voy a utilizar bootstrap así que tambien instalaremos en nuestro proyecto las extensiones de

• npm install bootstrap –save

• npm install jquery popper.js

Después de haber instalado estos dos módulos vamos a importarlos dentro de nuestro componente para poder utilizarlo en nuestro formulario.

Bien, ya realizado estos pasos de importar bootstrap dentro de nuestro proyecto vamos a crear nuestro formulario, culquier formulario sirve, en mi caso ya tengo uno realizado que simplemente voy a copiar y pegar.

Este va a ser el formulario sobre el que voy a trabajar y explicar como funciona paso a paso el envio del correo electrónico. A continuación iremos al archivo de index.js en nuestro proyecto y cambiaremos el nombre de <App/> e insertaremos nuestro componente para poder visualizarlo.

En mi caso el componente lo he llamado «Form» y además importante también realizar el import del componente para que se pueda visualizar.

Después de haber realizado todo esto vamos a iniciar nuestro proyecto para visualizar como es nuestro formulario.

Son 3 campos que vamos a recoger de este formulario para poder enviar un correo electronico de forma automática que son el Nombre, un Email en caso de que quieras que la empresa/comercio quieres que te responda a una pregunta que hayas hecho y una caja de texto con un mensaje indicando tu problema/pregunta/consejo.

Bien con el formulario ya listo vamos a proceder a realizar el codigo que por detras vamos a usar enviar el correo. Necesitaremos instalar un nuevo módulo en nuestro proyecto.

• npm i emailjs-com

Bien, después de haberlo instalado tendremos que importarlo dentro de nuestro componente para poder utilizar los métodos que nos van a hacer falta.

Nuestros imports dentro de nuestro componente tendrán que ser estos para poder utilizar correctamente emailJS en nuestro proyecto.

A continuación haremos que nuestro formulario no recargue nuestra página añadiendole el método que vamos a utilizar también para enviar el correo electronico. Lo que tendremos que hacer es añadirle al formulario la accion onSubmit y añadirle un nombre de un método y posteriormente crear el metodo con el nombre que se haya indicado en la accion de submit

Añadiremos el prevent Default para que nuestro formulario no recargue la pagina.

Después de realizar todo esto vamos ya a empezar a utilizar la herramienta de EmailJs, lo primero que haremos será irnos a la pagina web de EmailJS y crearnos una cuenta.

Lo único que tenemos que hacer es crearnos una cuenta para poder utilizar EmailJS de forma gratuita.

Una vez nos hayamos registrado e iniciado sesion nos aparecerá esta pantalla, para empezar tendremos que hacer click en Email Services y vamos a crearnos un nuevo servicio «Add New Service»

Como se puede ver se puede seleccionar varios servicios, en mi caso voy a utilizar el de Gmail para las pruebas.

Tendremos que iniciar sesión en la cuenta de gmail(en mi caso) para poder utilizar la herramienta. Nos pedirá que confiemos en la aplicación externa, haremos click en confirmar y ya tendremos creado el servicio.

Ahora tendremos que crearnos una plantilla, en el panel de la izquierda haremos click en Email Templates y crearemos una nueva plantilla de correo electronico.

Está será la pantalla de creacion de la plantilla que enviará como correo electronico. Si nos fijamos en la captura vemos como algunas palabras estan entre «{{from_name}}», bien estos son los campos que hemos nombrado en nuestro formulario de nuestra pagina web, es decir, cuando hacemos por ejemplo un <input name=»from_name»/> lo que esta entre corchetes hace referncia a este campo de name.

Por ejemplo, en mi formulario hay una caja de texto que tengo con el name=»nombre» si quiero que el email se mande con la información que haya puesto en esta caja, tendré que poner en la plantilla de EmailJS este mismo name entre corchetes {{nombre}}.

Para la prueba voy a utilizar este formato de plantilla que hace referencia a los 3 campos de mi formulario. Después de que hayamos diseñado ya nuestra plantilla a nuestro gusto lo único que tenemos que hacer es guardar los cambios.

Ahora que ya tenemos todo configurado en la pagina de EmailJS tendremos que indicar en nuestro proyecto react que necesitamos para que esto se realice.

Volveremos a nuestro código y en el metodo que habiamos creado para el formulario crearemos una llamada a emailJs de esta manera:

Estaremos viendo un montón de parametros y simbolos pero es muy sencillo,

Cuando vamos a escribir este método de indica claramente que parametros necesita para enviarse correctamente que son:

• El primero es el serviceID(El servicio de gmail en este caso)

• El segundo es templateID(La plantilla que hemos creado para el envio del email)

• El tercero es el e.target que es enviar el formulario que luego va a leer.

• Y por ultimo necesitamos nuestro userID que se encuentra en el panel de la izquierda Integration y en init(«user_x»)

Ya por ultimo lo que queda es probar que funcione correctamente.

Voy a rellenar este formulario con estos datos que luego veremos en el correo. A continuación haremos click en enviar correo y si en el caso de que como yo habeis hecho un Console.log(res)

Veremos como sale status:200, text:»Ok», si nos ha salido esto en la consola es que se ha enviado correctamente y lo unico que nos queda es comprobar nuestro correo para ver si nos ha llegado el correo.

Y aqui podemos ver como nuestra prueba de envio de correo ha salido perfectamente.

Conclusión

En mi opinión esta herramienta es muy útil para utilizar en páginas web de pequeñas y medianas empresas ya que es muy fácil de utilizar y apenas da errores ya que yo he realizado numerosas pruebas y nunca me ha dado fallo. En mi caso no he utilizado ningún pop-up o ventana modal para indicar al usuario que se ha enviado el correo.

La cuota que tiene en el caso de que se queria utilizar de forma gratiuita es de 200 correos por día por eso digo que es una herramienta muy util.

---

Autor/a: Agustin Campos Martinez

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2021-2022

Código / recursos utilizados / Otros datos de interés: Enlace a GitHub