美化 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 表單化妝前的鬼樣子請到「這裡」瞧瞧。


* 必要欄位

姓  名: *
電子郵件: *
性  別: 男性 女性 *



19 則留言 On 美化 Google Docs 表單

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


  • 應該是要開放登記了^^

  • 你是不是有很多可愛的娃娃? 😳

  • 台塑工讀妹

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

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

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

  • 請問是否有可以上傳文件/圖片的功能?

  • 出現亂碼?

    請問一下,使用之後提交的表單內容
    中文字都會出現亂碼耶???
    如何解決??麻煩大大幫忙了!!

    • 我的也會出現亂碼耶@@ 有解決的方式嗎??
      直接用google的表單是沒問題,但美化過後放進網頁中輸入的資料就會> <

      希望有可以解決的方式,感謝!!!

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

  • 您好
    不好意思想請教一下,
    怎樣可以讓按出submit之後不會跳到google表單的頁面,
    1.送出後跟這網頁一樣不會跳到其他訊息頁
    2.如果有設定必填項目但忘了填,整個版面會直接跳到醜醜的google表單頁面跟你說哪些沒填,
    想要讓他繼續留在這漂亮的頁面裡要怎麼做呢?
    謝謝您

    • 您好,
      1. 送出表單不要跳至其他訊息頁,我是在 Redirect to 欄位直接填入表單的網址。
      2. 之前我沒有設定欄位必填的選項,所以一直沒有這樣的困擾,不過我剛剛重新將表單加入必填的設定,怪了 … 倒是沒有您所述的問題耶?或許您可以再試試看,不好意思喔!

  • 您好,不好意思有個問題想請教…
    試著用您的方法將Google表單嵌入了公司網頁中,
    不料送出訊息時老是跳出「404 Not Found」錯誤訊息…
    這邊使用的方式是將 Google Docs Form Tool 生成的html只保留body遂直接貼入網頁表格中,
    顯示上看不出有什麼問題 ((Google表單可以接收資訊、但送出訊息時就是會跳出錯誤網頁…
    真的是找不出原因了,不知道您有沒有頭緒?QxQ
    以上,期待您的回覆。

  • 不好意思我是超級超集初學者…
    改好了CSS要怎麼把它存檔匯出呢?

  • 請問文章上提到的『透過FORMOTOOL得到HTML後,將這些原始碼貼到你要用來顯示可自訂 CSS 標籤的表單文章中』是指把這HTML碼貼到網頁上嗎? 就是獨立的一個Page, 然後可以自行安排版面? 所以需要有可以支援CSS的網站頁面上?
    謝謝!

發表迴響

Site Footer