avatar
Desenvolvedor Web MongoDB, ExpressJS, ReactJS, NodeJS.



14/11/2020 - Formulário de contato com React e sem Back-End.


Este artigo considera que o leitor já possui conhecimento de React, React Hook useState, Formulários em React, manipulação de inputs e armazenamento dos valores inputados.

Você fez um lindo site em React expondo teu produto. Agora você quer que os visitantes possam te enviar mensagens de forma rápida e amigável, sem sair de tua aplicação, sem precisar copiar e colar email em outra interface. Você quer um formulário de contato!


A forma que será mostrada aqui é utilizando a dependência EmailJs-com.


Let's get started!

Crie uma conta na EmailJs-com. A criação de uma conta é grátis e o serviço básico gratuito dá um pacote com disparo de até 200 emails por mês, requisições até 50kb e 2 templates de mensagem.

Neste tutorial uso o serviço para o protocolo SMTP. Siga as indicações da imagem abaixo para adicionar o serviço


/emailjs_services_select.JPG




Agora iremos salvar as definições de um serviço de email.


Defina um nome e um ID para teu serviço. Este ID será utilizado no código de disparo do email.
Informe o endereço SMTP e a porta do serviço de email. Marque o SSL se o teu host suporta este serviço. Informe email e senha reais. É este email que irá aparecer como remetente nas mensagens.


/emailjs_services_def.JPG



Definir o template de email.


Vá para Email Templates. Você já começa com um tamplate padrão pronto à disposição. Edite este template.
Observe que este template tem um ID. Este ID será usado no código de enviar email.


/emailjs_services_templates_id.JPG




Editar o template de email.


Em Email Templates. Você já começa com um template pronto à disposição. Edite este template.
Observe os campos que estão entre chaves duplas. Estes nomes de campo serão preenchidos com os dados que forem definidos no teu código. Você deve ter no código um objeto contendo chaves com estes nomes de campo. Defina estes campos conforme a tua necessidade.


/emailjs_services_templates_edit.JPG




Pegue seus dados de integração / Seu User ID.


Em Integration. pegue seu user ID. Ele será usado no código de envio de email.
Nesta parte o Emailjs já dá algumas recomendações para codar no framework js - nosso caso.


/emailjs_services_userid.JPG




Mão no código. Make the magic...


Instale a dependência $ npm install emailjs-com --save.

Tenha um formulário com os campos name, email, subject, message e um botão para submeter. O formulário deverá ter as lógicas de validação necessárias.

No módulo do teu formulário faça os imports:
import emailjs from 'emailjs-com';
import {init} from 'emailjs-com';


No teu componente de formulário, inicialize a instância do emailjs com o seu código de ID usuário

init("user_ID_que_obteve_em_integration");

O método de submit email deve ter um objeto para enviar os dados ao Emailjs para que este dispare o email. Observe que as chaves deste objeto são os campos que definimos no template email. Para cada chave deste objeto atribuimos o valor correpondente do state que está armazenandos os dados do form (exceto para to_name já que o nome do destinatário sempre será o mesmo).

// decompondo o state que armazena os inputs do formulário const { name, email, subject, message } = state ; //para em seguida alimentar o objeto: let templateParams = { to_name: "Nome do Destinatário do Email", from_name: name, from_email: email, reply_to: email*, // (opcional, conforme necessidade) subject: subject, message: message }; emailjs.send('ID_DO_SERVIÇO', 'ID_DO_TEMPLATE_EMAIL', templateParams, 'ID_DO_USUÁRIO') .then(function(response) { // ... Se deu certo faça ... console.log('SUCESSO!', response.status, response.text); }, function(error) { // ... Se deu errado faça ... console.log('FALHOU...', error); });


O exemplo deste artigo foi minimalista. Você pode acrescentar outros campos para o formulário. É interessante também colocar alertas de erro e sucesso após o submit.
Para aprofundar os estudos recomendo documentação do Emailjs

Por hoje é só! Se curtiu, comente aqui em baixo, dê feedback pelo meu form de contato e compartilhe nas tuas redes.

Este site usa cookies.Para ler a política de dados deste site clique aqui