美化 Google Docs 表單

自從在「香腸炒魷魚」那兒看見「如何用快速建立網站聯絡表單」這篇文章，無法顯示網頁馬上就想到有朝一日小米明信片完成〈心虛〉之後，使用這個功能就可以讓大家很快速地完成小米明信片的線上申請動作，你說 … 是不是光用想的就覺得很酷呢？
無法顯示網頁就是因為覺得很酷，所以當下就跑到 Google Docs 弄了一個表單並把表單給黏到文章中測試。誰曉得預覽文章的時候才驚覺，對吼 … 因為 Google 是採用是採用 框架讓使用者將表單崁入文章，所以使用者根本沒辦法使用自訂的 CSS 標籤來美化表單。
無法顯示網頁可是非常堅持「美觀」這兩個字，這該怎麼辦呢？呼 … 幸好這個世界上還有許多像我一樣有著這種堅持的龜毛人，如今無法顯示網頁才得以透過某些方式讓 Google Docs 也能夠使用自訂的 CSS 標籤來美化表單，實在是太開心了，喔耶！
想了解怎麼讓 Google Docs 也能夠使用自訂的 CSS 標籤來美化表單嗎？
首先，請把你的 Google Docs 表單崁入語法複製下來：

1	<iframe src="http://spreadsheets.google.com/embeddedform?key=xxxxxxx-xxxxxxx" width="310" height="501" frameborder="0" marginheight="0" marginwidth="0">Loading...</< font>iframe>

將 http://spreadsheets.google.com/embeddedform?key=xxxxxxx-xxxxxxx 這行另外複製並貼到 Google Docs Form Tool 的 URL to live form 欄位，接著在 Redirect to 欄位填上表單送出後欲自動導入的頁面名稱後，點選「Submit」按鈕。系統會根據你提交的表單自動產生一個標準的 html 頁面原始碼，將這些原始碼貼到你要用來顯示可自訂 CSS 標籤的表單文章中，如此即可隨心所欲地使用 CSS 標籤來美化 Google Docs 表單囉！
以下就是套用無法顯示網頁本身 CSS 標籤的 Google Docs 表單，看起來很不賴吧！當然，如果你想要比較一下 Google Docs 表單化妝前的鬼樣子請到「這裡」瞧瞧。
姓名
電子郵件
性別 男性 女性
Powered by Google Docs
Terms of Service | Additional Terms
-----------------------
Google 表單好像沒有上傳文件或圖片的功能
請問一下，使用之後提交的表單內容
中文字都會出現亂碼耶？？？
直接用google的表單是沒問題，但美化過後放進網頁中輸入的資料就會> <

我找到解決的方式，是編碼的問題，google的網站編碼是UTF-8，但我的編碼是Big5，把頁面編碼預設調為UTF-8就解決了。提供給有類似問題的人參考^^

教學網址：http://www.james-only.com/2008/10/30/474/