1. 首頁
  2. »
  3. 軟體
  4. »
  5. 全客製化 Google 2016 新版表單的CSS版面樣式教學

全客製化 Google 2016 新版表單的CSS版面樣式教學

2017/07/18

梅問題-自訂新版Google表單CSS版面設定

  Google 表單有多方便、多好用,相信用過的朋友知道,而在舊版的Google表單時,可以直接將iframe中的表單內容直接拷出來,就可自行的設計表單的版面,
讓表單與整體的頁面風格更一致、更漂亮,就不用再受限於Google表單內建的醜醜樣式,當把表單複製出來後,所有的Google表單結構是完整的,因此只需具備CSS的能力,就能快速的修改成自己所需的版型。


  而這個方法相信許多朋友知道,但到換成新版的Google表單後,會發現這方法卻失效了,主要的原因就在於,新版的Google表單,已不再用input的輸入框標籤,而是改採用javascript的方式來進行傳送,所以會發現到新版的Google表單,與舊版的Google表單,兩個版型差異相當大,而新版的Google表單難不成不行自訂版面嗎?這當然也是可以的,只不過與舊版相比,稍稍的麻煩一些,因為所有的輸入框,就得自己重新建立,至於要如何自訂新版的Google表單的版面樣式,現在就一塊來看看吧!


Step1

首先,進到已建立好的表單畫面,再按右上的預覽圖示。
梅問題-自訂新版Google表單CSS版面設定


取得表單ID:
Step2

接著每個表單,都有各自獨立的表單ID,而表單的ID就是上方網址未端,兩斜線之間。
梅問題-自訂新版Google表單CSS版面設定


取得表單輸入框ID:
Step3

接著在表單的預覽畫面中,按滑鼠右鍵,選擇「檢視原始碼」選項。
梅問題-自訂新版Google表單CSS版面設定


Step4

接著得花時間找一下,分別會看到剛所建立表單的元素,同時在[]中括弧裡,同時會看到一長串的字數,前方的數字就是,表單輸入框的ID名稱。
梅問題-自訂新版Google表單CSS版面設定


Step5

接著新版的Goolge表單的規則如下。
梅問題-自訂新版Google表單CSS版面設定


Step6

當輸入完畢,按下Enter後,資料就會寫入表單中,當寫入完成後,就會跳出Google完成的表單畫面。
梅問題-自訂新版Google表單CSS版面設定


Step7

這時再到Google的回應試算表中,就會看到剛所輸入的資料。
梅問題-自訂新版Google表單CSS版面設定


Step8

接著就可自行設計表單的版面風格,當版面設計好後,再透過javacript的方式,把表單的值組合起來並送出,就跟步驟5一樣,只不過變成javascript來傳送。
梅問題-自訂新版Google表單CSS版面設定


Step9

當把資料填寫完畢,按下送出,當資料寫入完成,一樣也會跳出,表單輸入完成的畫面。
梅問題-自訂新版Google表單CSS版面設定


Step10

接著再到表單的回應試算表中,就會看到自己所設計的表單內容,成功的將值寫回試算中啦!而完成畫面是否也能自訂,當然是可以的,下回再與大家分享,如何自訂Google表單的送出後的完成畫面。
梅問題-自訂新版Google表單CSS版面設定