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)、平面設計、網站工程需求,皆可以來信詢問,在關於下方有參考作品。

或是想分享心情、聊聊天、交朋友,可以來秘密通道讓我知道唷。

Email: aaa24295234@gmail.com