完全客製google表單,美化表單樣式

完全客製google表單,美化表單樣式

English version:Fully customizable Google Forms

2019.10.12更新客製表單 + google forms的值程式碼部份

google表單很方便,但可以更好的使用

一般人使用google表單(以下稱呼統一用google forms),就是進到google雲端硬碟後,新增一個google forms,然後就用他所見即所得的設計方式,表單拉一拉後,就直接使用了。

當然,這是最快速的方式,但就是醜。

即便google forms把material design用進了UI裡,也可以自行上傳表單的主視覺圖,一樣比不上經過設計師設計過的樣子。

最近比較常碰到需要存資料的問題,免費的資料庫除了firebase外,如果只是存簡單的欄位,google excel是個好選擇,在寫下一篇如何用google excel當資料庫之前,這篇先寫如何用google forms來當作頁面上的form,會實作頁面常見的「聯絡我們」表單當範例。

本篇用的素材有以下:


設計所需欄位,用Google表單製作

這篇示範怎麼用google forms當作網頁的form,網頁的form常用的東西有:

input、radio、select、textarea

因此,示範的欄位就用以下:

姓名(input)、性別(radio)、詢問類別(select)、詢問內容(textarea)

google forms基本上不太需要教學,但要注意的是:

不論設計的欄位是input,還是radio、select、textarea,在製作表單時都要選擇「簡答」的格式。

用google forms最後都是傳單一的值到google excel裡,因此各項欄位的值實際上是頁面的form去抓,而不用透過google forms去抓。google forms會提供的就是action的url,以及各input的name。

製作後的demo如下:

表單製作完後,記得回覆那邊要按下「建立試算表」,建一個google excel出來,才能看到資料是否有確實進來。


從google forms裡拿必要資訊

一般頁面上的form,如果要能傳資料到後端,需要2樣東西:

  • post的url
  • 各欄位的name

google forms在表單建立後,就會有這2樣東西,只要在表單上用開發人員工具看就可以了。

取post的url

對著google forms點右鍵,接著選擇「檢查」,windows系統也可以直接按下「F12」即可,就會看到以下畫面:

開啟 開發人員工具
開啟 開發人員工具

左邊是原本表單的頁面,右邊就是程式碼。

滑鼠隨便在程式碼的地方點一下,就會看見選到的行數反白,如下:

右邊藍底白字的部份就是選到的程式碼
右邊藍底白字的部份就是選到的程式碼

接著,windows系統的話按下crtl+F,mac系統則是按下cmd+F,就會看見搜尋框,如下:

展開搜尋框
展開搜尋框

在搜尋框裡輸入「<form」,就會看見程式碼的部份有一塊黃底出現在搜尋的結果上:

搜尋到form的部份
搜尋到form的部份

在「<form」開頭的這行,會看到「action=」這段,請對裡面的網址點兩下後,複製存下來,這就是第一個要取的post url。本篇demo取得的url就是:

https://docs.google.com/forms/d/e/1FAIpQLSeTgHEpVpuV_OHakO-25X-O7I4T1tIzIAUqHWLRvUqG9e6TvQ/formResponse

取各欄位的name

先點擊下圖中「1」的按鈕,接著滑鼠移到表單姓名的地方,直到上面顯示的是「input」開頭的位置,按下左鍵:

詢找input
詢找input

就會看見右邊程式碼的部份,有一段code反白:

被選取的input被反白
被選取的input被反白

這段input的code如下:

<input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="姓名" aria-describedby="i.desc.1144308577 i.err.1144308577" name="entry.248434920" value="" required="" dir="auto" data-initial-dir="auto" data-initial-value="">

裡面就有我們要的name:

name="entry.248434920"

其他三項也是同樣處理,整理摘出來的name各自如下:

  • 姓名:entry.248434920
  • 性別:entry.1569038925
  • 詢問類別:entry.1509045370
  • 詢問內容:entry.758411200

有了post的url、各input的name,就可以客製自己的表單,然後測試submit時資料是否有進到google excel中。


建立一個網頁的表單

本篇直接用Skeleton簡單的製作一個,一般會有設計師設計美美的表單出來,這篇是示範用,就看上去不醜就好XD~

建立完的表單如下:

客製表單demo
客製表單demo

可以看到,雖然在google forms製作的階段,每一題都是用最基本的簡答樣式,但在客製form時,可以區分出input、radio、select、textarea的。只要最後能抓到值,並post出去,就可以確保資料有收到。


客製表單 + google forms的值

有了從google forms抓到的url、name,也有了自己寫的form,下一步就是把name塞進form的name裡。

name值對應的是google excel裡的欄位,塞值的方式有2種:

第一種是直接把google forms抓到的name,寫在客製表單的name裡,url也直接寫在form action裡,最後的送出按鈕type設成submit,一樣可以送出,也一樣可以看到google excel裡有收到資料。

第二種是採用post的方式,直接post到google forms的url,data的key值就是name。

本篇會用第二種的方式,所以會需要一點寫code的基礎。

如果對code不熟,可以直接採用第一種的方式。以下列出如果是第一種方式,code會變成以下:


POST到google forms

整理一下從google forms拿到的url、name:

  • url:https://docs.google.com/forms/d/e/1FAIpQLSeTgHEpVpuV_OHakO-25X-O7I4T1tIzIAUqHWLRvUqG9e6TvQ/formResponse
  • 姓名name:entry.248434920
  • 性別name:entry.1569038925
  • 詢問類別name:entry.1509045370
  • 詢問內容name:entry.758411200

除了radio用name抓value外,其他欄位都用id來抓值。

各欄位目前的html如下:

這邊偷懶直接用jQuery來寫(頁面裡記得要引用),首先是抓各個input的值:

一般表單都會驗證是否各欄都有填寫,或是格式對不對,這篇主要是講怎麼客製google forms的部份,就不寫驗證了,直接沒填寫的值都用成「未填寫」。

抓完值以後,接著就是要post到google forms上:

data裡的key,就是從google forms拿到的name。

ajax裡的url,就是從google forms拿到的url。

js寫完後,就可以來測試資料有沒有進到表單裡。

先填寫表單
先填寫表單
資料進來了!
資料進來了!

測試成功,資料有順利進到google excel裡。

本篇使用的原始碼在這,歡迎下載取用:

https://github.com/letswritetw/letswrite-customize-google-form

另外也提供測試的頁面:客製表單

這邊可以看到資料有沒有送出:google excel回應表


Summary
完全客製google表單,美化表單樣式
Article Name
完全客製google表單,美化表單樣式
Description
本篇大綱:google表單很方便,但可以更好的使用、實作1:設計所需欄位,用Google表單製作、實作2:從google forms裡拿必要資訊 url / name、實作3:建立一個網頁的表單、實作4–1:客製表單+google forms的值、實作4–2:POST到google forms
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *