Integrando um formulário de contato com o EmailJS no React

React é uma biblioteca front-end para construir interfaces de usuário para aplicativos front-end. Além disso, o React é útil ao criar seus aplicativos, pois usa componentes reutilizáveis.

A questão que sempre existiu para os desenvolvedores front-end é como lidar com as solicitações dos dados do formulário sem escrever ou ter conhecimento das funcionalidades do back-end. Construir um servidor de back-end pode ser tedioso e usar um serviço de terceiros é necessário para esta tarefa para aliviar a dor de escrever a lógica.

O que é EmailJS?

O EmailJS é um serviço que ajuda a enviar e-mails usando aplicativos do lado do cliente, como React, Vue e Angular, sem servidor durante a configuração e instalação.

Neste tutorial, você aprenderá como conectar uma biblioteca de front-end, React, com EmailJS para receber mensagens de usuários em seu site ou aplicativos móveis sem o estresse de criar do zero.

Demonstração

Obtenha uma vantagem inicial com o código inicial neste repositório ou crie um novo aplicativo React.

Pré-requisitos

Para seguir com o tutorial, você precisa ter o seguinte:

• Nó >= 14.0.0 e npm >= 5.6 instalado em sua máquina local
• Uma compreensão dos fundamentos do React
• Uma conta EmailJS para experimentar o serviço.

Começando

A primeira etapa da construção de um novo projeto é ter as ferramentas de desenvolvimento que facilitam a construção. No seu terminal, execute este comando:

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

O comando acima cria o clichê usando o comando create-react-app que contém todos os arquivos e pacotes para o aplicativo React.

Instalando EmailJS

Como uma dependência, execute o comando para instalar EmailJS SDK no aplicativo React.

npm install @emailjs/browser

Executando o Projeto

Para executar o aplicativo React, navegue até o diretório do projeto e execute o servidor de desenvolvimento fornecido com o recurso hot reload, que, por sua vez, atualiza o aplicativo com qualquer alteração feita durante o desenvolvimento.

Execute este comando:

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

O aplicativo está acessível em http://localhost:3000 .

Criando o formulário de contato

Coletar e receber respostas de seus usuários através do formulário de contato é um recurso vital que um site precisa ter, pois o torna confiável aos olhos dos visitantes.

Então, vamos criar o formulário de contato. No arquivo App.js, copie e cole o seguinte 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;

Estilizando o formulário de contato

A interface do usuário do aplicativo precisa estar bonita para os usuários, portanto, no arquivo App.css , copie e cole o seguinte 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; }

A página deve ficar assim com tudo feito corretamente:

E-mail de configuraçãoJS

Com o preenchimento da página do formulário de contato sem nenhuma funcionalidade para enviar mensagens, vamos configurar o serviço que enviará o conteúdo do formulário para o seu e-mail.

Adicionar um serviço de e-mail

Esta seção é sobre a integração entre EmailJS e seu servidor de e-mail. No painel do EmailJS, escolha o serviço Gmail na guia Email Services , que deve abrir uma nova página chamada config service .

Em seguida, altere os parâmetros de nome e ID do serviço . O ID do serviço será usado posteriormente ao inicializar o formulário de contato para conectá-lo ao EmailJS. Certifique-se de clicar no botão Conectar conta e criar serviço para confirmar suas alterações.

Criando um modelo de e-mail

O modelo de e-mail é essencial quando você deseja incluir o assunto do e-mail, o conteúdo que ele conterá e seu destino em sua caixa de entrada quando um usuário enviar uma mensagem do lado do cliente do seu site.

No painel, clique na guia Modelo de e-mail e em Criar novo modelo .

Em seguida, você deve clicar na guia Configurações e alterar o nome e a ID do modelo para qualquer coisa que desejar. O template ID será utilizado posteriormente, conforme a imagem abaixo:

Voltando à guia Conteúdo, os valores dentro das chaves são variáveis dinâmicas que devem ter o mesmo valor definido no elemento <form> no formulário de contato, como message , user_name e user_email .

Criando as Variáveis de Ambiente

As variáveis de ambiente .env é um arquivo que armazena suas chaves públicas e outros valores que você não deseja compartilhar e é privado apenas para você.

Na raiz do diretório do seu projeto, crie um arquivo, .env , e cole o seguinte:

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

Para a chave pública, você pode encontrá-la clicando na guia Account e copiando o valor conforme mostrado na seção public key :

Inicializar EmailJS

No aplicativo React, importe o pacote instalado, @emailjs/browser package.

Copie e cole o seguinte:

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

Lidando com o envio do formulário

O gancho useRef manipula o envio do formulário de contato.

Copie e atualize o código no arquivo 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;

O seguinte acontece no código acima:

• O hook useRef é importado e inicializado com uma variável chamada form
• O gancho, useRef , é usado como referência e atribuído ao elemento <form>
• Na função sendEmail , o formulário possui o método preventDefault que impede a atualização da página
• Ainda assim, na função sendEmail , a função sendForm é invocada e inicializada com o ID do service ID do template ID , a propriedade form .current do ref e a public key
• Uma função de retorno de chamada para os casos de sucesso e falha que ocorrem com o método .then()

Agora vamos ver o resultado desse projeto:

E-mail de confirmação

Conclusão

Usar o EmailJS para lidar com solicitações de dados no lado do cliente de seu aplicativo é uma excelente maneira de receber respostas de um formulário de contato. O EmailJS fornece outros recursos para explorar e oferece uma experiência robusta sem nunca construir seu servidor ou ter conhecimento de desenvolvimento de back-end. Ele faz tudo por você sob o capô.

Você já usou EmailJS antes? O que você acha da minha abordagem acima? Deixe-nos saber nos comentários abaixo!