在網頁中串接 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>
  1. 到官網下載檔案

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"); //送出表單後的導向
     }
    }

送出表單的警告視窗

完成

Demo

參考程式碼

測試看看吧

問題

  1. 禁止跨域請求
  2. google表單的回答欄位，若設成簡答以外的格式就會接收不到資料

寫給純前端，讓 Google Sheets 當你的後端完成寫入功能

其他做法

參考資源

  • 姚韋禎（2020）。只懂前端也可以做出能線上傳送的表單。檢索自：https://bit.ly/3t4fZzo。
  • CSScoke（2018）。金魚都能懂網頁設計入門：JQuery入門（鐵人賽第二十六天）。檢索自：https://bit.ly/3g5icH9。

Thanks for listening.

Made with Slides.com