完全客製Google 表單，美化表單樣式 - Let's Write

Google Forms 會提供的就是action 的URL，以及各input 的name。

製作後的Demo 如下：. 表單製作完後，記得回覆那邊要按下「建立試算表」 ... 跳至主要內容 完全客製Google表單，美化表單樣式 2022-07-062019-08-01/August 本篇大綱 Google表單很方便，但可以更好的使用設計所需欄位，用Google表單製作從GoogleForms裡拿必要資訊取POST的URL取各欄位的name–1取各欄位的name–2建立一個網頁的表單客製表單+GoogleForms的值POST到GoogleForms Englishversion：FullycustomizableGoogleForms 2020.07.30更新：因為Google表單有變動，因此新增「取各欄位的name–2」段落來因應抓name值的部份。

2019.10.12更新客製表單+GoogleForms的值程式碼部份 Google表單很方便，但可以更好的使用 一般人使用Google表單（以下稱呼統一用GoogleForms），就是進到Google雲端硬碟後，新增一個GoogleForms，然後就用他所見即所得的設計方式，表單拉一拉後，就直接使用了。

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

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

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

本篇用的素材有以下： 表單內容：Google表單表單樣式：用Skeleton製作本站範例的原始碼：GitHub 設計所需欄位，用Google表單製作 這篇示範怎麼用GoogleForms當作網頁的form，網頁的form常用的東西有： input、radio、select、textarea 因此，示範的欄位就用以下： 這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 姓名（input）、性別（radio）、詢問類別（select）、詢問內容（textarea） GoogleForms基本上不太需要教學，但要注意的是： 不論設計的欄位是input，還是radio、select、textarea，在製作表單時都要選擇「簡答」的格式。

用GoogleForms最後都是傳單一的值到GoogleSheets裡，因此各項欄位的值實際上是頁面的form去抓，而不用透過GoogleForms去抓。

GoogleForms會提供的就是action的URL，以及各input的name。

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

從GoogleForms裡拿必要資訊 一般頁面上的form，如果要能傳資料到後端，需要2樣東西： POST的URL各欄位的name GoogleForms在表單建立後，就會有這2樣東西，只要在表單上用開發人員工具看就可以了。

取POST的URL 對著GoogleForms點右鍵，接著選擇「檢查」，Windows系統也可以直接按下「F12」即可，就會看到以下畫面： 這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 開啟開發人員工具 左邊是原本表單的頁面，右邊就是程式碼。

滑鼠隨便在程式碼的地方點一下，就會看見選到的行數反白，如下： 右邊藍底白字的部份就是選到的程式碼 接著，Windows系統的話按下crtl+F，Mac系統則是按下cmd+F，就會看見搜尋框，如下： 展開搜尋框 在搜尋框裡輸入「