美化 Google Docs 表單

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

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

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

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

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

將 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:

This entry was posted on Thursday, October 30th, 2008 at 10:41 pm and is filed under 網際網路應用. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to 美化 Google Docs 表單

  1. Comment by 無限台南

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

  2. Comment by helenna


    應該是要開放登記了^^

  3. Comment by shen

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

  4. Comment by 台塑工讀妹

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

    • Comment by 無法顯示網頁

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>