Integrando un formulario de contacto con EmailJS en React

React es una biblioteca front-end para crear interfaces de usuario para aplicaciones front-end. Además, React es útil al crear sus aplicaciones, ya que utiliza componentes reutilizables.

La pregunta que siempre ha existido para los desarrolladores front-end es cómo manejar las solicitudes de los datos del formulario sin escribir o tener conocimiento de las funcionalidades del back-end. Construir un servidor back-end puede ser tedioso, y se requiere el uso de un servicio de terceros para esta tarea para aliviar el dolor de escribir la lógica.

¿Qué es EmailJS?

EmailJS es un servicio que ayuda a enviar correos electrónicos utilizando aplicaciones del lado del cliente como React, Vue y Angular, sin servidor durante la configuración y configuración.

En este tutorial, aprenderá cómo conectar una biblioteca front-end, React, con EmailJS para recibir mensajes de usuario en su sitio web o aplicaciones móviles sin el estrés de construir desde cero.

Manifestación

Obtenga una ventaja inicial con el código de inicio en este repositorio o cree una nueva aplicación React.

requisitos previos

Para seguir con el tutorial, necesita tener lo siguiente:

• Nodo >= 14.0.0 y npm >= 5.6 instalado en su máquina local
• Una comprensión de los conceptos básicos de React
• Una cuenta de EmailJS para probar el servicio.

Empezando

El primer paso para construir un nuevo proyecto es tener las herramientas de desarrollo que hacen que la construcción sea muy sencilla. En tu terminal, ejecuta este comando:

npx create-react-app react-contact-form-with-emailjs

El comando anterior crea el texto modelo usando el comando create-react-app que tiene todos los archivos y paquetes para la aplicación React.

Instalando EmailJS

Como dependencia, ejecute el comando para instalar EmailJS SDK en la aplicación React.

npm install @emailjs/browser

Ejecutando el Proyecto

Para ejecutar la aplicación React, navegue hasta el directorio del proyecto y ejecute el servidor de desarrollo que viene con la función de recarga en caliente, que, a su vez, actualiza la aplicación con cualquier cambio realizado durante el desarrollo.

Ejecute este comando:

 cd react-contact-form-with-emailjs npm start

Se puede acceder a la aplicación en http://localhost:3000 .

Crear el formulario de contacto

Recopilar y recibir respuestas de sus usuarios a través del formulario de contacto es una característica vital que debe tener un sitio web, ya que lo hace confiable a los ojos de los visitantes.

Entonces, vamos a crear el formulario de contacto. En su archivo App.js, copie y pegue el siguiente código:

 // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;

Aplicar estilo al formulario de contacto

La interfaz de usuario de la aplicación debe verse hermosa para los usuarios, por lo que en el archivo App.css , copie y pegue el siguiente código:

 // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }

La página debería verse así con todo bien hecho:

Configurar correo electrónicoJS

Con la finalización de la página del formulario de contacto sin ninguna funcionalidad para enviar mensajes, configuremos el servicio que enviará el contenido del formulario a su correo electrónico.

Agregar un servicio de correo electrónico

Esta sección trata sobre la integración entre EmailJS y su servidor de correo electrónico. En su panel de EmailJS, elija el servicio de Gmail en la pestaña Servicios de correo electrónico , que debería abrir una nueva página llamada servicio de configuración .

A continuación, cambie los parámetros de nombre e identificación del servicio . La identificación del servicio se usará más adelante al inicializar el formulario de contacto para conectarlo a EmailJS. Asegúrese de hacer clic en el botón Conectar cuenta y crear servicio para confirmar sus cambios.

Creación de una plantilla de correo electrónico

La plantilla de correo electrónico es esencial cuando desea incluir el asunto del correo electrónico, el contenido que contendrá y su destino en su bandeja de entrada cuando un usuario envíe un mensaje desde el lado del cliente de su sitio web.

En el tablero, haga clic en la pestaña Plantilla de correo electrónico y en Crear nueva plantilla .

A continuación, debe hacer clic en la pestaña Configuración y cambiar el Nombre y la ID de plantilla a lo que desee. El ID de la plantilla se usará más adelante, como se muestra en la siguiente imagen:

Volviendo a la pestaña Contenido, los valores dentro de las llaves son variables dinámicas que deben tener el mismo valor definido en el elemento <form> en el formulario de contacto, como el mensaje , el nombre de usuario y el correo electrónico del usuario .

Crear las variables de entorno

Las variables de entorno .env es un archivo que almacena sus claves públicas y otros valores que no desea compartir y es privado solo para usted.

En la raíz del directorio de su proyecto, cree un archivo, .env , y pegue lo siguiente:

 // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY

Para la clave pública, puede encontrarla haciendo clic en la pestaña Account y copiando el valor como se muestra en la sección public key :

Inicializar EmailJS

En la aplicación React, importe el paquete instalado, @emailjs/browser package.

Copia y pega lo siguiente:

 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;

Manejo del envío de formularios

El useRef maneja el envío de formularios de contacto.

Copie y actualice el código en el archivo App.js :

 // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;

Lo siguiente sucede en el código anterior:

• El hook useRef es importado e inicializado con una variable llamada form
• El gancho, useRef , se usa como referencia y se asigna al elemento <form>
• En la función sendEmail , el formulario tiene el método preventDefault que evita que la página se actualice
• Aún así, en la función sendEmail , la función sendForm se invoca y se inicializa con el ID de service ID de template ID , la propiedad form .current de ref y la public key .
• Una función de devolución de llamada para los casos de éxito y falla que ocurren con el método .then()

Ahora veamos el resultado de este proyecto:

Email de confirmación

Conclusión

Usar EmailJS para manejar solicitudes de datos en el lado del cliente de su aplicación es una excelente manera de recibir respuestas de un formulario de contacto. EmailJS proporciona otras funciones para explorar y le brinda una experiencia sólida sin tener que construir su servidor o tener conocimiento del desarrollo de back-end. Lo hace todo por ti debajo del capó.

¿Has usado EmailJS antes? ¿Qué opinas de mi enfoque anterior? ¡Háganos saber en los comentarios a continuación!