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，第一時間閱讀最新文章，會優先兩天發表新文章。關注後私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！