使用 JavaScript 直接从前端发送电子邮件💥💥

步骤 1 – 使用 HTML 创建表单

步骤 3 – 创建邮件模板

我的项目代码可以在这里找到：https://github.com/Iwaniukooo11/email-sender

如今，即使是创建基本的网站，程序员也不得不使用现代的功能和技术。即使是像为朋友创建简单的作品集这样基本的项目，也可能遇到一些问题，比如从联系表单接收数据。
有很多方法可以读取这些数据。您可以将表单连接到数据库（例如 Firebase），然后从中读取传入的消息。嗯，这是一个选择，但我认为这可能会给不懂技术的客户带来麻烦。

你为什么不通过发送电子邮件来完成你的工作？

是的，这绝对是最佳选择，也是最用户友好的选择。当您的客户无需使用数据库即可接收传入消息时，他们会更加高兴。但问题来了——如何实现？嗯，您可能会认为需要使用某种后端语言。

完全不需要！你不需要使用任何后端语言，比如 php 或 python。甚至不需要 node.js！

您所需要的只是一个简单的EmailJS库

在本文中，我将向您展示如何：

配置 emailjs 帐户
使用 JS 发送电子邮件

请注意，在我的项目中我使用了 gulp 和 webpack，这要归功于我在 src 文件中编写代码并从 dist 中提供它。

我将通过 5 个步骤向您展示如何从头开始构建电子邮件发送器。

步骤 1 – 使用 HTML 创建表单

首先需要做的当然是创建一个 HTML 表单。注意，你不需要添加诸如required或max 之类的验证属性，因为稍后在提交事件中会调用 preventDefault() 函数，它会取消这些属性的生效。

表单中最重要的部分是name为每个输入项添加属性。它们稍后会用到。

我的非常简单的表格如下所示：

src/html/index.html



  <form class="form">
        <input name='name' type="text" placeholder="Your name..." class="form__input" />
        <input name='topic' type="text" placeholder="Topic..." class="form__input"  />
        <textarea name='message' type="text" placeholder="Your Message..." class="form__input"  ></textarea>

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

第 2 步 - 注册 emailjs

要配置您的电子邮件，您必须注册emailjs 服务。别担心——这个网站非常人性化，您无需花费太多时间。

登录后，系统会询问您的电子邮件服务。它位于personal email service区域中。就我而言，我选择了 Gmail。

然后，您需要连接您的 Gmail 帐户。这将是您的电子邮箱，用于向您/您的客户发送电子邮件。例如，如果您连接了xyz@gmail.com帐户，那么您以后收到的邮件将直接通过此帐户发送。所以，不必担心要求 Gmail 代您发送电子邮件——这正是您所需要的！

连接gmail帐户后，点击add service按钮。

步骤 3 – 创建邮件模板

如果您已成功连接 Gmail 帐户，现在应该已进入控制面板。现在就可以创建电子邮件模板了。

前往电子邮件模板卡并点击create a new template。界面非常友好，因此创建模板不会遇到任何问题。
您可以选择模板的名称和 ID。我将其命名为“my-amazing-template”。

现在，您必须指定收到的电子邮件应该是什么样子。
将使用的值来自name输入中的属性。您已将变量插入到{{{ }}}符号中。

别忘了在To email右侧填写邮箱地址。这是用来接收邮件的地址。在本例中，这是我的商务邮箱。

这是我的简单模板，它使用了来自 HTML 表单的 3 个变量。我还指定了收到邮件的主题。

步骤 4 – 保存您的 API 密钥。

嗯，这部分没什么特别的。Emailjs 共享了授权 API 密钥，这些密钥将在发送电子邮件时使用。当然，存放这些密钥的最佳位置是.env配置。但由于我处理的是简单的静态文件，并且不想使用服务器配置，所以我将它们保存在apikeys文件中，稍后再导入。

您的 USER_ID 位于帐户 > API 密钥中。
您的 TEMPLATE_ID 位于模板标题下方。

这是我基于不存在的密钥
src/js/apikeys.js 的示例配置



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

部署到 GITHUB 时，请不要忘记将 APIKEYS 文件添加到 .GITIGNORE

第 5 步 – 发送电子邮件！

现在是项目最后也是最重要的部分了。现在我们必须使用 JavaScript 发送电子邮件。

首先，您必须下载 emailjs 包。

npm i emails-com

之后，转到您的 js 文件并导入您的库和 apikeys。

src/js/main.js



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文件，
表单提交的事件对象
USER_ID 来自你的apikey文件，

最后，找到表单并添加提交监听器。src
/js/main.js



const form = document.querySelector('.form')
form.addEventListener('submit',sendEmail)

正如我之前提到的，由于preventDefault()功能原因，你的属性验证将无法正常工作。你必须使用 JS 自行验证和清除输入。

这就是全部了——让我们测试一下。

我正在页面上填写表单并发送。我收到了模板创建过程中发送的电子邮件。确实，所有输入的值都显示在正确的位置。

结论

由此可见，用 JS 发送电子邮件并非难事。使用 emailjs，您可以轻松发送电子邮件。我相信您未来的客户一定会对通过网页上的表单接收邮件感到满意。
我相信我能帮到您。本文的代码位于：https://github.com/Iwaniukooo11/email-sender

文章来源：https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

使用 JavaScript 直接从前端发送电子邮件💥💥步骤 1 – 在 HTML 中创建表单步骤 3 – 创建邮件模板

使用 JavaScript 直接从前端发送电子邮件💥💥

步骤 1 – 使用 HTML 创建表单

步骤 3 – 创建邮件模板

你为什么不通过发送电子邮件来完成你的工作？

步骤 1 – 使用 HTML 创建表单

第 2 步 - 注册 emailjs

步骤 3 – 创建邮件模板

步骤 4 – 保存您的 API 密钥。

第 5 步 – 发送电子邮件！

结论