May 28, 2019

google form 表單收集資料 | 無須資料庫

前端儲存資料的好幫手


文 / Siddharam 西打藍

前言


最近一個案子需要儲存用戶的電子郵件,對方 PM 說,不管存在哪裡都可以,於是我找到存在 Google Form 表單的方法,以下就來演示吧。

下列將會提到:

1. 取得表單 form POST
2.取得表單項目 name
3. 發送 AJAX

取得表單資訊


首先,我們需要取得兩個值:一是發送 POST 的位置,二是表格中的 name。

此外,我們在設計 google form 內容時,不能勾選「required」,並需將內文設置成一般狀態,如 Paragragh:

google form 範例。


接著我們可以發送表單給自己,打開來後,開啟開發者模式(dev tool),如果不熟悉的人可以參考 這一篇

在 Elements 中搜尋(ctrl + F) <form ,就可以在 action 中取得 AJAX 連結:

搜尋取得 action 中的連結。


接著點擊 input 框,裡頭的 textarea 可以取得 name:

取得 name,以我為例是 entry.239322164。


最後就能從自己的網站,發送表單資料啦:



    var data = {
      'entry.239322164': email
    };
    $.ajax({
      type: 'POST',
      url: 'https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      data: data,
      contentType: 'application/json',
      dataType: 'jsonp',
      complete: function() {
        alert('表單已送出')
      }
    });




閱讀量




技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: