English version：Fully customizable Google Forms
2020.07.30更新：因為Google 表單有變動，因此新增「取各欄位的name – 2」段落來因應抓 name 值的部份。
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」開頭的這行，會看到「action=」這段，請對裡面的網址點兩下後，複製存下來，這就是第一個要取的post url。本篇demo取得的url就是：
https://docs.google.com/forms/d/e/1FAIpQLSeTgHEpVpuV_OHakO-25X-O7I4T1tIzIAUqHWLRvUqG9e6TvQ/formResponse
取各欄位的 name – 1
先點擊下圖中「1」的按鈕，接著滑鼠移到表單姓名的地方，直到上面顯示的是「input」開頭的位置，按下左鍵：
就會看見右邊程式碼的部份，有一段code反白：
這段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中。
取各欄位的 name – 2
2020.07.30，今天在做別的案子，也是想客製Google表單時，發現name值被移動了，如果看了上面一段的方式找不到「name」的話，可以改用這段的方法。
一樣是按下「F12」後出現看到原始碼的區塊，隨便點擊原始碼的一行，接著Mac的話按下「cmd+F」，windows的話按下「control+F」，會出現一個搜尋框：
在搜尋框裡輸入「entry.」，就會看見原始碼的地方跳到有一排 input type="hidden" 的，這一排 input 的 name 就是我們要找的 name 值：
原則上這些 input 的順序，就是我們題目的順序，如果不確定的話，我們只需要在表單上填上值，就會看見這些 input 的 value 也跟著改，就能確定哪個 input 是哪一題了：
建立一個網頁的表單
本篇直接用Skeleton簡單的製作一個，一般會有設計師設計美美的表單出來，這篇是示範用，就看上去不醜就好XD~
建立完的表單如下：
可以看到，雖然在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回應表
以下是留言，但關於留言的部份必需先讓你們知道：
本站的文章都是 Augustus 因為覺得有趣，才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，
Sorry~ 除非那修改是 Augustus 也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外，公開信箱是為了讓金流驗證用，
因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。
因此決定不再回覆信件，有疑問就利用留言功能囉。