美化 Google Docs 表單

自從在「香腸炒魷魚」那兒看見「如何用快速建立網站聯絡表單」這篇文章,無法顯示網頁馬上就想到有朝一日小米明信片完成〈心虛〉之後,使用這個功能就可以讓大家很快速地完成小米明信片的線上申請動作,你說 … 是不是光用想的就覺得很酷呢?

無法顯示網頁就是因為覺得很酷,所以當下就跑到 Google Docs 弄了一個表單並把表單給黏到文章中測試。誰曉得預覽文章的時候才驚覺,對吼 … 因為 Google 是採用 <iframe> 框架讓使用者將表單崁入文章,所以使用者根本沒辦法使用自訂的 CSS 標籤來美化表單。

無法顯示網頁可是非常堅持「美觀」這兩個字,這該怎麼辦呢?呼 … 幸好這個世界上還有許多像我一樣有著這種堅持的龜毛人,如今無法顯示網頁才得以透過某些方式讓 Google Docs 也能夠使用自訂的 CSS 標籤來美化表單,實在是太開心了,喔耶!

想了解怎麼讓 Google Docs 也能夠使用自訂的 CSS 標籤來美化表單嗎?
首先,請把你的 Google Docs 表單崁入語法複製下來:

將 http://spreadsheets.google.com/embeddedform?key=xxxxxxx-xxxxxxx 這行另外複製並貼到 Google Docs Form ToolURL 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

Related Posts with Thumbnails

相關文章

  • No Related Post

Tags:



RSS feed | Trackback URI

8 Comments »

MyAvatars 0.2 Comment by 無限台南

多學到一樣.
這篇使預告小米明信片要寄了嗎? :lol:


我現在不敢預告任何事情了,
因為我好像都會跳票 … 哈哈哈 … :mrgreen:

 
 
MyAvatars 0.2 Comment by helenna


應該是要開放登記了^^


等有個譜的時候再來開放登記好了,
不然 … 又會再讓大家失望一次,哈哈 … :mrgreen:

 
 
MyAvatars 0.2 Comment by shen

你是不是有很多可愛的娃娃? :oops:


改天我在拍一下我那個放娃娃的櫃子給你瞧瞧,
希望你不會覺得我很娘,哈哈哈~ :oops:

 
 
MyAvatars 0.2 Comment by 台塑工讀妹

照片裡那是…女生雜誌的回函吧


哇 … 被你發現,
沒錯,照片裡面的確是女生雜誌的回函,哈哈哈~
唉唷 … 沒辦法,我總覺得每篇文章都要放一張符合文章的照片,
這篇文章不曉得該用什麼照片,只好拍一下「回函」這種跟「表單」很類似的照片。

對了 … 我從你的網誌看你自從當個正職的大學生開始,
每天都過得好愉快,愉快到一個爆炸 … 我看了很不爽!
為什麼你可以去當大學生,而我還是得努力上班? :cry:

 
 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.