經常在很多網站上都能看到類似的表單信息功能，用戶只需要填寫相關內容，點擊提交按鈕，就可以將表單內容發送到管理員郵箱。

恰好最近在折騰我的網站時，也想添加一個這樣的功能，但是搜了一圈后，這樣的功能要么是使用Wordpress構建的網站，后臺有現成的功能，要么就是使用php或者C#作為后端實現的，而我的網站是基于原生H5寫的，沒有相關后端與數據庫交互，該怎樣實現呢？

稍加思考后，就會發現，本質上就是要將點擊按鈕和發送郵件功能進行綁定，那么有沒有什么簡單的方法呢?本文就將介紹如何使用Google Apps Script來實現網站發送表單數據到郵箱。

“后端”操作(Google Apps Script)

雖然本文介紹的方法比較簡單，無需寫一行代碼，但是仍需要你進行一些“后端”的操作，來將前后按鈕和發送郵件功能進行綁定。

1. 制作存儲表格

首先我們需要登陸Google表格并創建一個用于存儲郵件信息的電子表格，注意需要設置好你需要的字段：

當然可以直接打開下面的模版來創建一個副本：

https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

2. 創建腳本

現在，我們進入剛剛創建的表格來啟動Apps腳本：

3. 修改目標郵箱

現在我們需要修改剛剛打開的js文件中的參數來指定發送郵箱：

注如果你不修改這行參數的話，只要別人進入你的網站，F12修改相關參數即可將郵件數據發送至他的郵箱！

當然，你也可以在不在這里指定發送郵箱，反之將這個關鍵詞做為表單選項，來在填寫時指定！

修改之后，保存即可。

4. 發布 Web 程序

現在，我們需要發布并部署腳本：

需要注意的是，要將權限設置為所有人：

5. 授權腳本發送郵件

現在，我們已經創建了一個能夠發送郵件的腳本，下一步需要對它進行授權：

點擊后按照提示進行授權：

最后，你會得到一串網站，將它復制保存：

到這里，我們“后端”操作就完成了！雖然步驟有些復雜，但是比 php 或者 C# 等代碼實現還是要簡單很多。

前端操作

6. 修改 form 標簽參數

現在，可以打開我們表單所在的html文件，按照如下提示進行修改：

• 每個表單元素的name屬性都必須與Google表格中的列名相同
• 表格class必須是gform，即<form class="gform">
• action修改為剛剛復制的鏈接

7. 發送表單數據

現在，任何人都可以填寫對應表格內容，并點擊發送：

你的 Google 表格中就會增加一條數據：

并且你的郵箱中也會收到一封新增內容的郵件：

至此，我們僅通過 Google 表格與簡單的腳本修改就完成的 html 表單數據發送至郵箱！

8. (可選)使用 Ajax

雖然我們的需求已經實現，但是在剛剛點完發送之后，會跳轉到一個新的頁面：

為了頁面不修改，我們需要使用AJAX提交表單，首先需要從下面的鏈接中下載對應的js文件到項目目錄：

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/form-submission-handler.js

并將下方代碼添加到網頁文件中：

<script data-cfasync="false" type="text/javascript" src="form-submission-handler.js"></script>

刷新頁面，現在我們可以直接在當前頁面提交表單！

9. (可選)添加感謝

如果你想在用戶提交表單后發送一段感謝語，可以將下面的內容插入在form標簽結束之前：

<div style="display:none" class="thankyou_message">
 <!-- 修改下方內容 -->
 <h2><em>Thanks</em> for contacting us! We will get back to you soon!
 </h2>
</div>

當然你也可以使用CSS、JS來讓你的表單更加酷炫，但這不是本文要討論的主要內容。

好了，至此，你應該學會如何利用 Google 表格來快速的實現前端數據發送到指定郵箱，如果你對本文的內容感興趣，不妨親自動手嘗試一下！