/* syntax highlight */ /* end of syntax highlight */

2011年2月8日 星期二

Google Docs Form Tool 客製化 google 表單

Bookmark and Share

image

google 表單真的很棒,雲端使用,還可以自動輸出成 excel 表單

但許多人都因為它的客製化變化程度不夠,而改成自行開發表單程式的方式

例如不夠美觀、Submit 後跳的頁面不是期待的頁面等等問題

 

偶然間在網路上看到了  Google Docs Form Tool  這項線上服務,這項服務最好的優點有

(1) 可以幫我們達到客製化 google 表單的效果 (自訂 CSS)

(2) 自行選擇送出後跳到的頁面

(3) 移除 google 的 footer 資訊

 

就讓我們來使用看看吧

首先請到這邊:http://sneakysheep.com/google-docs-form-tool.php

會看到兩個欄位

image

 

請在 URL to live form 的地方輸入 google 表單的網址,例如下面

https://spreadsheets.google.com/viewform?hl=zh_TW&formkey=xxxxxx#gid=0

 

Rediret to 則是帶往你期待它 Submit 後會跳到的頁面,例如

http://google.com.tw/

 

 

按下 Submit 後,它會給你一段程式碼,請選擇 Select 並 Copy 嵌到你的 Html 當中

image

 

注意其中有一行

<link href='css/xxxxx.css' type='text/css' rel='stylesheet'>

 

可以連結到我們自己寫的 CSS 檔

所以我們可以建立一個 CSS 的檔案夾,並在裡面新增一個 xxxxx.css'  的檔案

 

例如 html 當中可能有一個欄位是

<div class="ss-form-entry"><label class="ss-q-title" for="entry_0">您的姓名<br>

 

則你可以在 CSS 檔當中,使用下面的 CSS 來客製化你的表單的長像

.ss-q-title {
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #000000;
}

 

而由於所有的欄位都已經被重新 render 過

所以你也可以任意的新增圖片或是文字,甚至改變順序等等

重點是原本的 google 問卷下面會有

 

技術提供:Google 文件檢舉濫用情形 - 服務條款 - 其他條款

 

也可以直接手動 delete 掉,是不是很棒 !

分享給大家

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...