作者：劉早起
來源：早起Python
大家好，我是早起。
經常在很多網站上都能看到類似的表單信息功能，用戶只需要填寫相關內容，點擊提交按鈕，就可以將表單內容發送到管理員郵箱。
恰好最近在折騰我的網站時，也想添加一個這樣的功能，但是搜了一圈後，這樣的功能要麼是使用 Wordpress 構建的網站，後台有現成的功能，要麼就是使用 php 或者 C# 作為後端實現的，而我的網站是基於原生H5寫的，沒有相關後端與資料庫交互，該怎樣實現呢？
稍加思考後，就會發現，本質上就是要將點擊按鈕和發送郵件功能進行綁定，那麼有沒有什麼簡單的方法呢？本文就將介紹如何使用 Google Apps 來實現網站發送表單數據到郵箱
「後端」操作（Google Apps ）
雖然本文介紹的方法比較簡單， 無需寫一行代碼，但是仍需要你進行一些「後端」的操作，來將前後按鈕和發送郵件功能進行綁定。
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 文件，按照如下提示進行修改
現在，任何人都可以填寫對應表格內容，並點擊發送
你的 Google 表格中就會增加一條數據
並且你的郵箱中也會收到一封新增內容的郵件
至此，我們僅通過 Google 表格與簡單的腳本修改就完成的 html 表單數據發送至郵箱！
8.（可選）使用 Ajax
雖然我們的需求已經實現，但是在剛剛點完發送之後，會跳轉到一個新的頁面
為了頁面不修改，我們需要使用 AJAX 提交表單，首先需要從下面的連結中下載對應的 js 文件到項目目錄
https://github.com/dwyl/learn-to-send-email-via-google--html-no-server/blob/master/form-submission-handler.js
並將下方代碼添加到網頁文件中
< data-cfasync="false "type="text/java "src="form-submission-handler.js "> >
刷新頁面，現在我們可以直接在當前頁面提交表單！
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 表格來快速的實現前端數據發送到指定郵箱，如果你對本文的內容感興趣，不妨親自動手嘗試一下～
點這裡關注我，記得標星哦~
CDA課程諮詢