Como enviar e-mails com o JavaScript usando o EmailJS
Ter um formulário de contato no seu site pessoal ou do seu negócio geralmente é uma boa ideia, afinal de contas, facilita muito o contato das pessoas com você.
Implementar um formulário no HTML não é muito difícil, mas existe um problemão: como vamos enviar um e-mail a partir daquele formulário?
Caso você esteja usando um serviço de hospedagem como o Hostgator, Hostinger e afins, talvez você consiga utilizar o servidor PHP destas hospedagens para isso. Pode ser meio chato de configurar, mas funciona.
Mas quando isso não é possível, nós precisamos de um back-end.
E como eu sei que você não está afim de fazer um back-end para o seu site só pra isso (até porque você vai ter um outra dor de cabeça pra conseguir hospedar este outro serviço), hoje eu vou te mostrar como usar o EmailJS!
Ele vai facilitar bastante este processo.
—
Versão em vídeo
Confira a versão em vídeo desse artigo!
—
Como a própria tela inicial do site já diz, a ideia do EmailJS é que você possa enviar um e-mail diretamente do seu código, sem a necessidade de um servidor. Pois bem, vamos ver então como isso funciona.
Para entender como tudo funciona, vamos começar pela construção de um formulário simples (o código completo do repositório você encontra no final do artigo):
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="form">
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" required>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<br>
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" required></textarea>
<input type="submit" value="Enviar">
</form>
<script src="script.js"></script>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", serif;
margin: 0;
padding: 0;
background-color: aliceblue;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
#form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
#form input[type="text"],
#form input[type="email"],
#form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
#form textarea {
resize: vertical;
min-height: 80px;
}
#form input[type="submit"] {
background-color: #007BFF;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
#form input[type="submit"]:hover {
background-color: #0056b3;
}
#form input:focus,
#form textarea:focus {
border-color: #007BFF;
outline: none;
box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
}script.js
const form = document.querySelector('#form');
form.addEventListener('submit', (e) => {
e.preventDefault();
console.log("passei aqui!");
});O primeiro passo para usar a ferramenta será inserir o código da biblioteca dentro do nosso projeto. Farei isso usando um CDN:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>Agora, antes de continuarmos o código, precisamos de uma API KEY. Essa chave você conseguirá apenas depois de criar sua conta e acessar a área de configurações no site. Será semelhante a esta aqui:
Com essa chave em mãos, podemos voltar para o nosso script.js e inicializar o serviço:
emailjs.init({
publicKey: "A CHAVE DE API AQUI",
});Agora voltaremos pro painel do EmailJS porque precisamos configurar duas outras coisas fundamentais:
- Um e-mail de serviço (email service);
- Um template de e-mail (email template).
O serviço de e-mail será basicamente a configuração da sua conta de e-mail que será usada para o envio dos e-mails. Você consegue usar os principais serviços de e-mail do mercado (Gmail, iCloud, Outlook) ou configurar o próprio servidor SMTP.
Feito isso, partiremos para o template de e-mail.
O importante neste template é que você use os campos dinâmicos os com os mesmos nomes que você está usando no seu formulário. Em nosso caso, temos: nome, email e message. por exemplo:
Mensagem enviada por: {{name}} <br />
Email: {{email}} <br />
Mensagem: {{message}}Tanto o seu template quanto o seu serviço possuem identificadores únicos. Precisaremos deles. Agora sim podemos fechar o nosso arquivo JavaScript com o envio do e-mail:
emailjs.sendForm(ID_DO_SERVICO, ID_DO_TEMPLATE, e.target)
.then((response) => { alert("Mensagem enviada com sucesso!"); })
.catch((error) => {
console.log(error);
alert("Ocorreu um erro com o envio do seu e-mail");
});O código inteiro ficará semelhante a este:
const form = document.querySelector('#form');
form.addEventListener('submit', (e) => {
e.preventDefault();
emailjs.init({
publicKey: "hVsyIaGI0Az4LCK_M",
});
emailjs.sendForm("ID_DO_SERVICO", "ID_DO_TEMPLATE", form)
.then((response) => alert("Mensagem enviada com sucesso!"))
.catch((error) => {
console.log(error);
alert("Erro ao enviar mensagem!")
});
});E está pronto! Agora é só esperar o contato da galera :)
—
Repositório
https://github.com/Professor-DiegoPinho/email-com-emailjs
Agradecimentos
Gostou deste conteúdo? Então curta, compartilhe e se inscreva na publicação para não perder nada! 👏
Além disso, confira meus conteúdos nas outras redes sociais!
—
Já pensou em ter aulas particulares de programação? Que tal aprender com quem tem +10 anos de experiência no mercado de educação e tecnologia?
