圖解-自製樣板的 google form


google form強大的統計功能讓人愛不釋手,舉凡統計、問卷、調查只要透過它,輕輕鬆鬆的就可以是一片小蛋糕,但是google form本身提供的樣版,老實說不美,而且也沒有特殊的介面提供來新增或是修改,一直以來都在等什麼時候可以推出新的服務,讓我可以換一下樣板,但是就是遲遲沒著落,所以今天做了一個小小的實驗。

實驗的內容,就是試著把GoogleForm的原始碼貼到網頁上,然後再嘗試自己設計網頁版面樣式,嘻。直接看圖說故事好啦~


上面的程式碼截圖可以分成幾個部分來說明,最重要的就是上面那段
<form action="https://docs.google.com/a/mail.phc.edu.tw/spreadsheet/formResponse?pli=1&amp;hl=zh_TW&amp;formkey=dHpjdnRaN2ZXRV82SkFYQzhEWVRGcVE6MQ&amp;ifq" method="POST" id="ss-form">

這行決定了文件的來源和輸入方式,雖然他在表單裡並沒有顯示出來,但是如果要自製表單可以順利運作,還是要把它複製起來。下面的程式碼就如同圖上所指及標示,他們分別代表在後台製作表單的時候所要輸入的項目,其實還滿好懂的。但是要複製的只有下面的方格程式碼。
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1">

只要把這裡複製出來,就可以進行接下來的設計工作。當然不是只有複製這一條啦,還有其他的題目方格程式碼也要一併複製出來。

上圖就是GoogleForm原本的樣子,沒有套用樣板的純白介面,乾淨簡單。

經過一些些調教之後的GoogleForm

後來試著輸入資料還真的可以用說。^^

這個網誌中的熱門文章

【Google Site】用html小工具做出marqueer效果