EmailJS：5步使用JavaScript直接從前端發送電子郵件
你不需要使用任何后端語言，如 PHP 或 Python。此外，你甚至不需要Node.js!
有很多方法可以讀取這些數據。你可以將你的表單與數據庫(如MySQL)連接，然后從數據庫中讀取傳入的信息。好吧，這是一個選擇，但是我認為這對于你的非技術客戶來說可能會很麻煩。
你不需要使用任何后端語言
你需要的只是一個簡單的 EmailJS 庫。
本文將介紹下面兩個重要功能：
- 配置 EmailJS 帳戶
- 使用JS發送電子郵件
我將分 5 個步驟向你展示如何從頭開始構建電子郵件發送器。
在我的項目中使用了Webpack，我在 src 文件夾存放源碼，dist 存放最終發布版本的代碼，使用 npm run dev 可以把項目跑起來。
提供項目完整代碼，真實可運行。需要的可以點擊我的頭像，私信關鍵字：emailjs。
項目完整代碼
項目界面
步驟1，用HTML創建表單
首先需要做的當然是創建一個HTML表單。注意，你不必設置 required 或 max 等驗證屬性，因為稍后，preventDefault() 函數將在你的提交事件上運行，它將取消這些屬性的工作。
表單中最重要的事情是為每個輸入設置 name 屬性，這在后面會用到的。
我的簡單表格如下所示：
src/html/index.html
步驟2，注冊emailjs
要配置電子郵件，您必須注冊emailjs服務。不用擔心，使用此網站非常友好，你不會花很多時間在該網站上。
注冊emailjs服務：https://dashboard.emailjs.com/account/create
登錄后，將詢問你有關電子郵件服務的信息。它放置在個人電子郵件服務區域中，就我而言，我選擇了Gmail。
點擊 Connect account 連接Gmail。
連接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郵件，相信本文對你有幫助。
