美化 Google 表單樣式

Google 表單，簡單易用，回應數據會自動整理並顯示在 Google 試算表中，便於分析和視覺化處理，可以設置自動化回應確認電子郵件、計分測驗等功能，不用寫程式，不用自建資料庫。


雖然有那麼多優點，不過天生長像不討喜，如果、你對他不滿意，可以依照自己的想法，

打造成更有你個人風格的表單。

 Google 表單能進行簡單資料收集、 匯出， 然而面對一些比較特殊欄位，需要做、時間選擇、 較複雜演算以及驗證判斷， 就無法符合需求，於是、我們需要客製化表單。

現在、就讓我來告訴你，要如何把 Google 表單，改造成你心中想要的樣貌 ...

步驟 一. 建立一個表單，就是進到 Google 雲端硬碟後，新增一個 Google Forms，然後就用他所見即所得的設計方式，表單拉一拉後，就可以使用了。


步驟 二. 點按回覆

勾選連結到試算表，然後、點按旁邊的3個點，勾選送出電子郵件

Form 的運作是在按下 submit 時會發一個 POST 請求到後端 API，再將資料儲存到後端資料庫裡。

接下來、我們要在 Google 表單裡取得2項資料，1. 接收表單的 URL，2. 所有欄位的名稱。



步驟 三 . 按下上方那個眼睛 ( 預覽 )，打開 Google 表單

按下功能鍵 F12 或按滑鼠右鍵 ( 檢查 )，叫出 ( Devtools ) 設計輔助(偵錯)窗框，再按 Ctrl + F，在搜尋框內輸入 ~ <form

找到 action = 後面的 URL 網址

再次在搜尋框內輸入 entry 找出各欄位 input  name 的值，(name="entry.0000")

拿到這2項資料後，就可以把它填入，我們自製的 <Form> 表單裡了。

<form id="myform" action="https://docs......" method="post"  target="_link">

<input id="p_name" minlength="2" type="text" placeholder="幸運大名" name="entry.0000"  style="width:5em" required>

<input id="prize" type="text" placeholder="獲獎獎項" name="entry.0000"  style="width:10em;background:white" disabled>

<input id="p_mail" minlength="5" maxlength="256" type="email" placeholder="E-mail" name="mail" style="width:15.5em" required>

<button type="submit">結果登記</button>

<input id="quest" type="hidden" name="entry.0000">

</form>

下面為經過排版美化的自製表單。

    客製化的 Google 表單❤️效果展示

幸運中大獎

Banner
八五折券

DM
八折券

MG動畫
八五折券

名片設計
八五折券

Logo設計
五折券

Line 圖文選單
七折券

菜單設計
八五折券

海報
八五折券

剪輯設計
九折券