将联系表单消息发送到您的电子邮件收件箱

由于在网站上直接放置纯文本电子邮件是一种糟糕的做法（感谢那些在互联网上搜寻垃圾邮件的机器人），因此，对于接收用户的重要信息而言，联系表单是最佳选择。联系表单不仅有助于避免垃圾邮件和其他不愉快的体验，还能简化消息发送流程，并允许您根据用户的需求定制消息类型，因为它们包含了所有可能的表单字段。

本文将演示如何借助 Mailjet 将网站联系表单发送的消息直接发送到您的邮箱收件箱。我认为这种设置更适合无服务器架构，因此本文也将以无服务器架构为例进行说明。

在继续操作之前，请先创建一个 Mailjet 帐户并进行验证。

建立环境

在开始编写代码之前，我们将首先启动 Mailjet 并准备好发送电子邮件，方法是添加发件人地址并设置将在 Mailjet 的 NodeJs 包装器中使用的密钥。

添加 Mailjet 发件人地址

前往您的 Mailjet 帐户，然后在右侧导航下拉菜单中打开“帐户设置”。

在“发件人和域”卡片上，点击“添加发件人域或地址”。

接下来，请添加您已有的电子邮件帐户以添加发件人邮箱，然后按照提示操作，验证并完成设置。我们这样做是因为 Mailjet 不允许我们使用不存在的电子邮件地址发送邮件。

获取 Maijet API 密钥

前往您的 Mailjet 帐户，然后在右侧导航下拉菜单中打开“帐户设置”。

在“REST API”卡片上，点击“主 API 密钥和子 API 密钥管理”。 创建您的“主 API 密钥”，您将获得两个密钥：一个秘密密钥和一个API 密钥。

以电子邮件形式发送表单消息

为了发送消息，我们需要创建一个必要的联系表单，该表单将为我们提供在 JavaScript 部分所需的数据。发挥你的创意，创建一个表单吧。

Javascript

由于我们正在处理用户输入清理，这是一个良好的安全实践，您可以设置任何您熟悉的用户输入清理方法，DOMPurify是一个不错的起点。

为了避免诸如密钥泄露到公共代码库之类的意外情况，在本地机器上使用 .env 文件或许是个好办法。在生产环境中，最好使用专用的方法来设置 API 密钥，这些方法通常会在process.env全局变量 中提供并公开密钥，例如 Netlify 就允许你在其无服务器函数中访问环境变量。

要访问本地环境和生产环境中的环境密钥，请安装并使用dotenv NodeJs 模块。

$ npm install dotenv

在 JavaScript 环境中，我们可以使用 Mailjet 的官方 npm 模块node-mailjet来发送电子邮件，请安装该模块。

$ npm install node-mailjet

假设联系表单由三个输入字段组成，我们有三个变量需要处理：senderName、senderEmail和senderMessage。我们将按如下方式将其作为电子邮件发送。

require('dotenv').config();
const mailjet = require('node-mailjet').connect(process.env.MAILJET_API_KEY, process.env.MAILJET_API_SECRET)

try {
  mailjet
    .post("send", {'version': 'v3.1'})
    .request({
      "Messages":[
        {
          "From": {
            "Email": `${senderEmail}`,
            "Name": `Some Website (mywebsite.com)`
          },
          "To": [
            {
              "Email": "receivingaddress@somedomain.com",
              "Name": "My Name"
            }
          ],
          "Subject": "Contact Form Message From mywebsite.com.",
          "TextPart": `Name: ${senderName} \n Email: ${senderEmail} \n \n `,
          "HTMLPart": `Customer Name: ${senderName}<br> Customer 
Email: ${senderEmail}<br> <p>${sendermessage}</p>`
        }
      ]
    })
} catch(e) {
  // Deal With Error
  console.log(e)
}

处理联系表单的另一个好做法是告知发件人他们刚刚发送的消息状态。用简洁而富有创意的通知告知他们消息已收到，您会尽快回复，或者如果出现错误，可以尝试重新发送。不要让表单显得单调乏味。

本教程到此结束，尽情地修改联系表单吧。