在網頁中串接 Google 表單
日期：2020/4/11
講者：王婕瑜
大綱
- 前言
- 建立表單
- 使用 JavaScript 串接
- 參考資源
前言
用 Google Form 當後端
透過前端就在網路上送出並儲存表單資料
- 懂 HTML 即可
- 寫出喜歡的樣式
建立表單
建立一個 Google Form
建議先以簡答、段落為回答類型
在 HTML 中建立表單
提交表單時向某處傳送表單資料
<form id="survey-form" action="javascript:GoogleForm();">
<!-- 表單內容 -->
</form>欄位要跟 Google Form 裡的一樣
E-mail <input type="email" name="E">What would you like to see improved?
<select name ="I">
<option disabled selected value>choose one!</option>
<option value="Front-end Projects">Front-end Projects</option>
<option value="Back-end Projects">Back-end Projects</option>
<option value="Data Visualization">Data Visualization</option>
</select>使用 JavaScript 串接
導入 jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>- 到官網下載檔案
2. 使用 Google 的 CDN
<script src="jquery.min.js檔案的位置"></script>兩種方式擇一即可：
開始寫 jQuery
function GoogleForm() { // 這裡要對應到自己的 javascript 名稱
// 宣告欄位
var field1 = $("[name='Name']").val();
var field2 = $("[name='Tel']").val();
// 接下來從這邊開始寫
}宣告欄位
$.ajax({
url: "", //Google Form 裡面的 form action 網址
data: { //Google Form 裡面的欄位 name
"entry.000000": field1,
"entry.000000": field2
},
type: "POST",
dataType: "xml",
});取得表單資料
statusCode: {
0: function() {
alert("已送出!"); //完成送出表單的警告視窗
window.location.assign("http://google.com"); //送出表單後的導向
},
200: function() {
alert("已送出!"); //完成送出表單的警告視窗
window.location.assign("http://google.com"); //送出表單後的導向
}
}送出表單的警告視窗
完成
測試看看吧
問題
- 禁止跨域請求
- google表單的回答欄位，若設成簡答以外的格式就會接收不到資料
其他做法
參考資源
- 姚韋禎（2020）。只懂前端也可以做出能線上傳送的表單。檢索自：https://bit.ly/3t4fZzo。
- CSScoke（2018）。金魚都能懂網頁設計入門：JQuery入門（鐵人賽第二十六天）。檢索自：https://bit.ly/3g5icH9。
Thanks for listening.
在網頁中串接 Google 表單
By juliewah
在網頁中串接 Google 表單
SIRLA 109-2 This 15 Speech
