paint-brush
Integrando um formulário de contato com o EmailJS no Reactpor@terieyenike
16,364 leituras
16,364 leituras

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

por Teri Eyenike7m2022/08/17
Read on Terminal Reader
Read this story w/o Javascript

Muito longo; Para ler

React é uma biblioteca front-end para construir interfaces de usuário para aplicativos front-end. 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 React com EmailJS para receber mensagens de usuários em seu site ou aplicativos móveis sem o estresse de criar do zero. A primeira etapa da construção de um novo projeto é ter as ferramentas de desenvolvimento que facilitam a construção.

Company Mentioned

Mention Thumbnail
featured image - Integrando um formulário de contato com o EmailJS no React
Teri Eyenike HackerNoon profile picture


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:


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!