經(jīng)常在很多網(wǎng)站上都能看到類似的表單信息功能，用戶只需要填寫相關(guān)內(nèi)容，點(diǎn)擊提交按鈕，就可以將表單內(nèi)容發(fā)送到管理員郵箱。

恰好最近在折騰我的網(wǎng)站時(shí)，也想添加一個(gè)這樣的功能，但是搜了一圈后，這樣的功能要么是使用Wordpress構(gòu)建的網(wǎng)站，后臺(tái)有現(xiàn)成的功能，要么就是使用php或者C#作為后端實(shí)現(xiàn)的，而我的網(wǎng)站是基于原生H5寫的，沒有相關(guān)后端與數(shù)據(jù)庫(kù)交互，該怎樣實(shí)現(xiàn)呢？

稍加思考后，就會(huì)發(fā)現(xiàn)，本質(zhì)上就是要將點(diǎn)擊按鈕和發(fā)送郵件功能進(jìn)行綁定，那么有沒有什么簡(jiǎn)單的方法呢?本文就將介紹如何使用Google Apps Script來實(shí)現(xiàn)網(wǎng)站發(fā)送表單數(shù)據(jù)到郵箱。

“后端”操作(Google Apps Script)

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

1. 制作存儲(chǔ)表格

首先我們需要登陸Google表格并創(chuàng)建一個(gè)用于存儲(chǔ)郵件信息的電子表格，注意需要設(shè)置好你需要的字段：

當(dāng)然可以直接打開下面的模版來創(chuàng)建一個(gè)副本：

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

2. 創(chuàng)建腳本

現(xiàn)在，我們進(jìn)入剛剛創(chuàng)建的表格來啟動(dòng)Apps腳本：

3. 修改目標(biāo)郵箱

現(xiàn)在我們需要修改剛剛打開的js文件中的參數(shù)來指定發(fā)送郵箱：

注如果你不修改這行參數(shù)的話，只要?jiǎng)e人進(jìn)入你的網(wǎng)站，F(xiàn)12修改相關(guān)參數(shù)即可將郵件數(shù)據(jù)發(fā)送至他的郵箱！

當(dāng)然，你也可以在不在這里指定發(fā)送郵箱，反之將這個(gè)關(guān)鍵詞做為表單選項(xiàng)，來在填寫時(shí)指定！

修改之后，保存即可。

4. 發(fā)布 Web 程序

現(xiàn)在，我們需要發(fā)布并部署腳本：

需要注意的是，要將權(quán)限設(shè)置為所有人：

5. 授權(quán)腳本發(fā)送郵件

現(xiàn)在，我們已經(jīng)創(chuàng)建了一個(gè)能夠發(fā)送郵件的腳本，下一步需要對(duì)它進(jìn)行授權(quán)：

點(diǎn)擊后按照提示進(jìn)行授權(quán)：

最后，你會(huì)得到一串網(wǎng)站，將它復(fù)制保存：

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

前端操作

6. 修改 form 標(biāo)簽參數(shù)

現(xiàn)在，可以打開我們表單所在的html文件，按照如下提示進(jìn)行修改：

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

7. 發(fā)送表單數(shù)據(jù)

現(xiàn)在，任何人都可以填寫對(duì)應(yīng)表格內(nèi)容，并點(diǎn)擊發(fā)送：

你的 Google 表格中就會(huì)增加一條數(shù)據(jù)：

并且你的郵箱中也會(huì)收到一封新增內(nèi)容的郵件：

至此，我們僅通過 Google 表格與簡(jiǎn)單的腳本修改就完成的 html 表單數(shù)據(jù)發(fā)送至郵箱！

8. (可選)使用 Ajax

雖然我們的需求已經(jīng)實(shí)現(xiàn)，但是在剛剛點(diǎn)完發(fā)送之后，會(huì)跳轉(zhuǎn)到一個(gè)新的頁面：

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

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

并將下方代碼添加到網(wǎng)頁文件中：

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

刷新頁面，現(xiàn)在我們可以直接在當(dāng)前頁面提交表單！

9. (可選)添加感謝

如果你想在用戶提交表單后發(fā)送一段感謝語，可以將下面的內(nèi)容插入在form標(biāo)簽結(jié)束之前：

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

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

好了，至此，你應(yīng)該學(xué)會(huì)如何利用 Google 表格來快速的實(shí)現(xiàn)前端數(shù)據(jù)發(fā)送到指定郵箱，如果你對(duì)本文的內(nèi)容感興趣，不妨親自動(dòng)手嘗試一下！