建站
咨詢
售后
建站咨詢
新聞中心
經(jīng)常在很多網(wǎng)站上都能看到類似的表單信息功能，用戶只需要填寫相關內容，點擊提交按鈕，就可以將表單內容發(fā)送到管理員郵箱。
恰好最近在折騰我的網(wǎng)站時，也想添加一個這樣的功能，但是搜了一圈后，這樣的功能要么是使用Wordpress構建的網(wǎng)站，后臺有現(xiàn)成的功能，要么就是使用php或者C#作為后端實現(xiàn)的，而我的網(wǎng)站是基于原生H5寫的，沒有相關后端與數(shù)據(jù)庫交互，該怎樣實現(xiàn)呢？
稍加思考后，就會發(fā)現(xiàn)，本質上就是要將點擊按鈕和發(fā)送郵件功能進行綁定，那么有沒有什么簡單的方法呢?本文就將介紹如何使用Google Apps Script來實現(xiàn)網(wǎng)站發(fā)送表單數(shù)據(jù)到郵箱。
“后端”操作(Google Apps Script)
雖然本文介紹的方法比較簡單，無需寫一行代碼，但是仍需要你進行一些“后端”的操作，來將前后按鈕和發(fā)送郵件功能進行綁定。
1. 制作存儲表格
首先我們需要登陸Google表格并創(chuàng)建一個用于存儲郵件信息的電子表格，注意需要設置好你需要的字段：
當然可以直接打開下面的模版來創(chuàng)建一個副本：
https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy
2. 創(chuàng)建腳本
現(xiàn)在，我們進入剛剛創(chuàng)建的表格來啟動Apps腳本：
3. 修改目標郵箱
現(xiàn)在我們需要修改剛剛打開的js文件中的參數(shù)來指定發(fā)送郵箱：
注如果你不修改這行參數(shù)的話，只要別人進入你的網(wǎng)站，F(xiàn)12修改相關參數(shù)即可將郵件數(shù)據(jù)發(fā)送至他的郵箱！
當然，你也可以在不在這里指定發(fā)送郵箱，反之將這個關鍵詞做為表單選項，來在填寫時指定！
修改之后，保存即可。
4. 發(fā)布 Web 程序
現(xiàn)在，我們需要發(fā)布并部署腳本：
需要注意的是，要將權限設置為所有人：
5. 授權腳本發(fā)送郵件
現(xiàn)在，我們已經(jīng)創(chuàng)建了一個能夠發(fā)送郵件的腳本，下一步需要對它進行授權：
點擊后按照提示進行授權：
最后，你會得到一串網(wǎng)站，將它復制保存：
到這里，我們“后端”操作就完成了！雖然步驟有些復雜，但是比 php 或者 C# 等代碼實現(xiàn)還是要簡單很多。
前端操作
6. 修改 form 標簽參數(shù)
現(xiàn)在，可以打開我們表單所在的html文件，按照如下提示進行修改：
- 每個表單元素的name屬性都必須與Google表格中的列名相同
- 表格class必須是gform，即
- action修改為剛剛復制的鏈接
7. 發(fā)送表單數(shù)據(jù)
現(xiàn)在，任何人都可以填寫對應表格內容，并點擊發(fā)送：
你的 Google 表格中就會增加一條數(shù)據(jù)：
并且你的郵箱中也會收到一封新增內容的郵件：
至此，我們僅通過 Google 表格與簡單的腳本修改就完成的 html 表單數(shù)據(jù)發(fā)送至郵箱！
8. (可選)使用 Ajax
雖然我們的需求已經(jīng)實現(xiàn)，但是在剛剛點完發(fā)送之后，會跳轉到一個新的頁面：
為了頁面不修改，我們需要使用AJAX提交表單，首先需要從下面的鏈接中下載對應的js文件到項目目錄：
https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/form-submission-handler.js
并將下方代碼添加到網(wǎng)頁文件中：
刷新頁面，現(xiàn)在我們可以直接在當前頁面提交表單！
9. (可選)添加感謝
如果你想在用戶提交表單后發(fā)送一段感謝語，可以將下面的內容插入在form標簽結束之前：
當然你也可以使用CSS、JS來讓你的表單更加酷炫，但這不是本文要討論的主要內容。
好了，至此，你應該學會如何利用 Google 表格來快速的實現(xiàn)前端數(shù)據(jù)發(fā)送到指定郵箱，如果你對本文的內容感興趣，不妨親自動手嘗試一下！
網(wǎng)頁題目：不寫一行代碼，如何實現(xiàn)前端數(shù)據(jù)發(fā)送到郵箱？
本文路徑：http://www.dlmjj.cn/article/ccogjcc.html
