EmailJS：5步使用JavaScript直接从前端发送电子邮件

你不须要使用任何后端语言，如 PHP 或 Python。此外，你甚至不须要Node.js!

有不少方法能够读取这些数据。你能够将你的表单与数据库（如MySQL）链接，而后从数据库中读取传入的信息。好吧，这是一个选择，可是我认为这对于你的非技术客户来讲可能会很麻烦。

你须要的只是一个简单的 EmailJS 库。

本文将介绍下面两个重要功能：

• 配置 EmailJS 账户
• 使用JS发送电子邮件

我将分 5 个步骤向你展现如何从头开始构建电子邮件发送器。

在个人项目中使用了Webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码，使用 npm run dev 能够把项目跑起来。

项目完整代码： https://github.com/dunizb/Cod...，真实可运行。

步骤1，用HTML建立表单

首先须要作的固然是建立一个HTML表单。注意，你没必要设置 required 或 max 等验证属性，由于稍后，preventDefault() 函数将在你的提交事件上运行，它将取消这些属性的工做。

表单中最重要的事情是为每一个输入设置 name 属性，这在后面会用到的。

个人简单表格以下所示：

src/html/index.html

<form class="form">
  <input name='to' type="text" placeholder="收件人" class="form__input" />
  <input name='name' type="text" placeholder="你的名字" class="form__input" />
  <input name='topic' type="text" placeholder="主题" class="form__input"  />
  <textarea name='message' type="text" placeholder="你的消息" class="form__input"  ></textarea>

  <input type="submit" value="发送" class="form__input form__input--button">
</form>

步骤2，注册emailjs

要配置电子邮件，您必须注册emailjs服务。不用担忧，使用此网站很是友好，你不会花不少时间在该网站上。

登陆后，将询问你有关电子邮件服务的信息。它放置在我的电子邮件服务区域中，就我而言，我选择了Gmail。

点击 Connect account 链接Gmail

此时会弹出Gmail的受权窗口，在请求权限对话框中点击容许。

链接 Gmail 账户后，点击“Add Service”按钮。成功添加后能够看到以下界面

例如，若是你链接上你的xyz@gmail.com帐户，你将来收到的邮件就会从这个帐户发出。因此不要担忧让Gmail代你发送电子邮件——这正是你所须要的！

步骤3，建立你的邮件模板

通过上面的步骤，你已经成功地链接了您的 Gmail账户，在你的仪表板中应该能够看到，点击左侧的导航进入邮件模板设置页面。

而后单击“Create a new template”按钮建立新模板，界面很是友好，因此建立它不会有任何问题。你能够选择模板的名称和ID，我设置为“my-amazing-template”。

你如今必须指定，传入的电子邮件应该是什么样的。将使用来自于表单中的 name 属性做为变量插入到 {{{ }}} 符号中。

不要忘记在 To email（收件人）部分中放置一个电子邮件地址，这里咱们读取咱们输入的收件人变量。

这是个人简单模板，它使用了4个变量，分别来自于个人HTML表单，我还指定了一个收发邮件的主题。

步骤4，保存你的API密钥

好吧，这部分没有什么特别的。 Emailjs共享受权API密钥，这些密钥将在发送电子邮件期间使用。固然，放置这些密钥的最佳位置是 .env 配置文件。但因为个人工做对象是简单的静态文件，不想作服务器配置的工做，因此我会把它们保存在 apikeys 文件中，之后再导入。

你的 USER_ID 位于Account > API Keys中。

而且你的 TEMPLATE_ID 位于模板标题的下方。

这是个人 src/js/apikeys.js 的示例配置。

export default {
  USER_ID :'user_DPUd-rest-of-my-id',
  TEMPLATE_ID:'my_amazing_template'
}

步骤5，发送邮件！

如今是该项目的最后也是最重要的部分了，如今咱们必须使用javascript发送电子邮件。

首先，你必须下载emailjs软件包。

npm i emails-com

以后，转到你的 src/js/main.js 文件并导入你的库和apikey。

import emailjs from 'emailjs-com'
import apiKeys from './apikeys'

如今是时候在 src/js/main.js 中编写发送电子邮件功能了。

const sendEmail = e => {
  e.preventDefault()

  emailjs
    .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID)
    .then(
      result => {
        console.log(result.text)
      },
      error => {
        console.log(error.text)
      }
    )
}

很简单。如你所见，sendForm 函数采用4个参数。

第一个参数：你的电子邮件的ID，位于如下位置

第二个参数：TEMPLATE_ID 来自你的apikey文件。

第三个参数：表单提交中的事件对象e。

第四个参数：USER_ID 来自你的apikey文件。

最后，找到表单并添加提交事件侦听器。

// src/js/main.js
const form = document.querySelector('.form')
form.addEventListener('submit',sendEmail)

如前所述，因为使用了 preventDefault() 函数，所以没法进行属性验证，你必须使用JS本身进行验证和清除输入。

仅此而已，最后让咱们使用 npm run dev 测试一下，我填写页面上的表单并发送。

个人163邮箱收到了电子邮件，内容正是根据咱们的模板和表单数据渲染出来的。

经过上图能够看出，全部的变量的值都填充到了正确的位置上。

结束

经过本文的介绍你会发现用 JS 发送邮件并不是难事。

使用 emailjs，你能够简单的方式发送电子邮件。

我相信你将来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

文章配套代码: https://github.com/dunizb/Cod...

---

原文：https://dev.to/iwaniukooo11，做者：Mateusz Iwaniuk，翻译：公众号《前端全栈开发》

本文首发于公众号《前端全栈开发者》ID：by-zhangbing-dev，第一时间阅读最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省很多钱！