如何用快速建立網站聯絡表單?(Google Doc 應用)

一般很多網站都會出現一個叫做「聯絡表單」的玩意,就是給網友問問題,以提交表單服務的模式,避免網站站長信箱曝光或是方便網友不用開email可以快速提交。不過以前要弄這樣的東西通常都是要懂些PHP或是html才有辦法自己製作表單,現在我們可以利用「Google Doc」的試算表服務就可以輕鬆達成!

Google Doc堪稱是線上版的Office,有文件試算表簡報PDF等等的功能,而我們接下來介紹的就是利用Google Doc中的試算表功能製作出專屬於自己的服務表單,你再也不必要懂一堆東西來自己寫服務表單,滑鼠點一點、字打一打就可以完成了!

事實上這服務網路上應該有,但大多數都是英文的,對於中文使用者在使用上會比較有點語言隔閡,大家想使用的服務一定都是中文介面的,才能快速、方便上手!而這製作出來的表單是一種框架頁面的東西,你只要把產生出來的表單語法貼在在你要顯示的地方就可以囉!

製作個人表單-17
網站名稱:Google Doc (表單製作)
網站網址http://spreadsheets.google.com/newform

一、製作個人網站專屬聯絡表單

第1步 首先來到「表單製作」網頁,進入後在最上方欄位輸入你此表單名稱,第二空位輸入此表單的說明文字,再來下方會出現一個「問題標題」請在上面輸入「您的姓名」,然後「說明文字」可留白也可以加入說明,再來「問題類型」部分選擇【文字】,接著下方的「Make this a required question(標記為必填選項)請打勾,最後點擊[完成]。

製作個人表單-1

第2步 當第一個欄位問題設定完畢後,接著點擊「新增問題」,繼續新增下一個問題,可以按照上一步驟的模式,新增「您的信箱」欄位!

製作個人表單-2

第3步 為了方便我們辨識問題類行,我們可以設定一下類型選項,讓網友選擇。請先按「新增問題」,接著在「問題標題」中輸入「問題類型」,而說明文字部分可以略過,在表單中「問題類型」部分選擇【從清單中選擇】,將它變成「下拉式清單」,方便網友選擇,當然你也可以選擇其他模式囉!

製作個人表單-3

第4步 接著依序輸入您的問題類型,然後勾選下方的「Make this a required question(標記為必填選項),最後點擊[完成]。

製作個人表單-4

第5步 最後再新增一個欄位,可以讓網友填入文字的大欄位。一樣先按「新增問題」,接著在「問題類型」中選擇【段落文字】,然後你就會發先框位變大囉!最後勾選下方的「Make this a required question(標記為必填選項)並點擊[完成]。

製作個人表單-5

第6步 而當你新增完問題後,發現排序好像不太妥,可以將滑鼠移到問題前方,前方會出先上與下箭頭,可以點擊箭頭移動位置。

製作個人表單-6

第7步 當所有問題都設定好後,點擊下方的[儲存]按鈕,當然也可以每次編輯完一個題目就點擊一次。

製作個人表單-7

第8步 當所有問題確定都設定完畢後,請點擊[下一步,選擇收件者]。

製作個人表單-8

第9步 接著在左下勾選「自訂訊息」,並在框中輸入當使用者提交表單後,會顯示的提示訊息。然後再到網頁右上角,點擊「以內嵌」,然後會出現一串語法,那串就是表單語法,請貼在你要顯示表單的地方。

製作個人表單-9

二、公開、張貼你的網站聯絡表單

要設定一個網頁來顯示聯絡表單的話,可以用frontpage新增網頁,在把語法貼入並上傳到網站中,但是如果你是部落格就可以更方便了,可以在某一篇文章中貼上語法,把該頁面變成服務表單,聽起來很方便很可惜無名小站Yahoo部落格似乎不支援。

但話說回來,如果你和本站一樣是使用WordPress的話,可以新建立一個分頁,把語法貼入新分頁中及可,輕輕鬆鬆就擁有個人網站的聯絡表單。那該WordPress的使用者該如何新增呢?請繼續看下去囉!

第1步 到後台新增一個分頁,然後在編輯分頁內容時,切換到「HTML」模式,並在分頁中輸入語法,而若你的分頁域設背景顏色是白色的話,那我們可以在語法中修改一下表單的大小,讓他可以和分頁更容為一體,修改width(寬)height(高)的值,可以參考我的數值設定也可以自行修改,最後點擊[發表]以新增分頁。

製作個人表單-10

第2步 再來到你新增的分頁中,你就會看到你的表單囉!

】本站聯絡表單展示:http://sofree.twbbs.org/blog/contact/

製作個人表單-11

三、設定表單即時通知服務

為了讓表單不漏接以及更有效率的接收網友最新提交的文提,我們可以到Google Doc中設定有新的資料進來時可以用郵件通知我們,讓我們即時收到網友的新訊息。

第1步 首先來到Google Doc首頁,看到你剛剛設定的表單名稱「聯絡本站」,點他進入修改通知服務。

製作個人表單-12

第2步 接著點擊右上角的【分享】,進入設定通知服務。

製作個人表單-13

第3步 再來找到下方的進階選項,勾選用 你的帳號@gmail.com 通知我」,再來下面的下拉式清單請選擇【每次試算表變更時】,這樣就可以了。當然在該下拉式清單中還有其他的通知模式,大家可以自己玩玩看,挑選一種最適合你自己的。

製作個人表單-14

四、接收通知已提交的表單

為了測試是否可以真的收到有新的資料進入表單,然後會發信通知,筆者就請朋友測試一下,果真,沒多久信箱就收到有人提交表單的訊息囉!我們可以點進去表單看一下,到底網友提交了什麼樣的問題呢?

製作個人表單-15

當然因為是請朋友測試的,所以這資料就大概是亂填的,不過還是要感謝他的幫忙。因為這表單是結合Google的試算表,因此成現出來的結果都會是以表格方式顯現,整體上看來很整齊,我們可以很快的看到訊息囉!

製作個人表單-16

五、修改表單選項與內容

當聯絡表單用一陣子後,可能會覺得某些部份需要修改,那這時我們一樣可以進行修改表單的動作喔!這時可以開啟你的表單資料統整頁面,然後點擊【更多動作】→【編輯表格】進行設定。

製作個人表單-18

製作自己網站的表單就是這麼簡單,滑鼠點一點、文字填一填,然後在把表單丟到分頁中,一個網站貼心的服務表單就這樣子完成了!不過要注意的是,當修改了表單欄位時,要記得更新一下分頁中的程式碼,要不然可能會沒更新到吧?而再次提醒,在WordPress中修改語法時,一定要切換成「HTML」模式,否則WordPress預覽模式會把框架語法吃掉,而造成表單無法正常顯示喔!

延伸閱讀

  • pidano

    香腸大哥,我也是貼到google site的網頁上,但只跑出"試算表"幾個字,甚麼都沒有出現,是哪部分出了錯呢??

  • Lisa

    香腸大哥
    我已經使用您建議的方式了,也採取html模式貼語法,但是表單還是沒有出現耶!請問您知道大概是有哪幾個狀況會發生這樣的問題呢?感謝

  • 源霖

    請問表單距離能縮短嗎??因為用了6個問題,長度就接近1000了,謝謝回應

  • 台中人

    香腸大您好:
    請問目前新版的google表單還有《第3步 再來找到下方的進階選項,勾選「用 你的帳號@gmail.com 通知我」,再來下面的下拉式清單請選擇【每次試算表變更時】》的功能嗎??因為我都找不到,謝謝。

  • Nemson

    請問要怎麼在單選表單中
    可以像是有各選項叫做"其他"
    然後其他選項後面有空格可以填寫??

    香腸回應:
    你是說文字框吧~

  • 高山茶

    哇~終於找到教學了!!

    感謝分享~

    香腸回應:
    @@

  • snowcoat

    試了一下,看來只能用開新頁面作為替代方案
    如果想要自動跳轉,大概還是只能自己寫個php了

    感謝您的回覆
    2011快樂 :)

    香腸回應:
    對阿~ 這部分還是半不到的~
    新年快樂唷 ^^

  • snowcoat

    您好,意外看到這篇,相當受用
    請問在填完送出以後,出現確認信息頁面以後
    是否能設定跳轉回原來頁面呢?

    因為填完送出就跳去google doc頁面
    還得自己按上一頁,有些不便

    感謝您的熱心分享!

    香腸回應:
    這部分辦不到喔~

  • yiting

    版大您好,
    我是第一次接觸google doc的表單設計問卷…
    我的google doc的介面已經改成中文的了,但是為什麼到填問卷表單時,
    問卷表單的內容又變成英文介面,https://spreadsheets.google.com/gform?key=tt1VEKhqoARIkfCKTavjk2A&hl=zh_TW#
    該怎樣才能改為中文顯示呢??
    請幫幫我解答吧…
    感激不盡!!!

    香腸回應:
    沒有權限檢視該試算表…
    調整一下Google Docs帳戶的語言看看可否吧

  • zero

    感謝香腸大在百忙之中抽空回應~

    我的問題是
    即使刪除Excel文件裡的資料,依舊無法清除「回應摘要」裡的錯誤資料。
    http://pix.gogobox.com.tw/out.php?i=518672_002.JPG
    而Excel工具列上的「表單」旁也依舊顯示累積的問卷回應份數,
    而非刪除資料後該顯示的份數。
    http://pix.gogobox.com.tw/out.php?i=518671_001.JPG
    該怎麼做才能澈底清除錯誤的回應?
    特地附上圖片連結,跪謝香腸大的耐心回應!

    香腸回應:
    關於這部分,我都是簡單使用表單部分,統計部分我就很少去處理,可能無法回答您的問題,抱歉。

  • zero

    請問香腸大!
    如果有人重複填了表單,產生了兩筆重複的表單結果…
    該如何刪除那個重複的表單?
    謝謝賜教!

    香腸回應:
    就跟你使用Excel一樣啦~ 很直覺的~

  • 香腸介紹的很詳細!!謝謝

    香腸回應:

    :)

  • Bryant

    不知道能不能在表單內插入圖片
    單一個問題選擇也只能選一種表單工具
    嗯~還要加強喔

    香腸回應:
    功能算陽春~ 但是對於一般使用者來說算是非常足夠囉 :)

  • js

    google docs適合做線上訂購單這樣的功能嗎?

    香腸回應:
    當然可以~ 有些網站都這樣使用喔~ 因為方便

  • 凡絲佩

    非常感謝香腸先生,
    我使用GOOGLE瀏覽器看,的確恢復正常,
    我目前公司使用的是IE 6,老闆也是主要以IE 6來驗收,
    所以依舊頭痛中:)

    如果能貼圖的話,把文字改用圖片顯式或許就好了,
    只是不曉得怎麼改樣式~似乎沒有開放自由撰寫CSS

    香腸回應:
    嗯~確實沒有,只能用其它方法處理了..不過IE8使用者還算少,應該不用太擔心~

  • 凡絲佩

    您好,藉由偉大的咕狗大神指引,您的這篇教學對我來說如獲至寶,
    並順利解決公司需要回覆表單的問題,
    非常非常的感謝您!

    但目前遇到了一個棘手的小問題,
    在iframe裡面的google doc表單文字有一部分呈現???????的狀態,
    就像這樣 http://vesper.myweb.hinet.net/ohmygodwhy.gif
    我在google doc setting中嘗試設定了英文、簡中、繁中等等語系,
    並交互配合修改我自己母網頁中的utf-8或big5,
    卻無法改善。

    身為一個不是很理解程式的小美術,
    這問題對我來說實在是太困難了OTZ
    能否請香腸先生指引一條明路?
    謝謝您!

    香腸回應:
    您應該是使用IE8瀏覽,關於這部分無解唷~
    Google可能還沒發現此Bug,可能只能靜待Google解決

  • David

    香腸大:
    經過測試google 文件,共用>邀請其他使用者>進階權限>,不打勾
    會關閉邀請者共用功能中的邀請.發佈.共用連結的能力.
    跟你分享 3Q~

    香腸回應:
    謝謝你~ :)

  • David

    多謝香腸大:
    我在google docs發現,協作者也有發佈的能力
    這樣安全性是否也是一個問題呢?
    本意"非協作者邀請其他人的能力"
    3Q ^^

    香腸回應:
    安全性問題我覺得還好,東西只要一PO上網路就有他的風險。再者,你要分享觀看的人應該也是你認識的人吧@@?

  • cat

    请问怎样在google doc里做图片选项

    香腸回應:
    圖片選項?目前好像沒這麼強…

  • 灰常感謝香腸大,

    我操作時發現,Google 瀏覽器居然沒辦法執行這一個功能。回到firefox就正常。
    他會跳出新視窗,就可以編輯。
    但是Google 瀏覽器不會跳新視窗(我將設定裡面的攔截關掉也是一樣^^")

    香腸回應:
    哈~Google沒做好XD
    話說上次我好像用Google瀏覽器開Google某服務(我忘了),上面還寫說建議使用IE或Firefox哩~~

  • 有人知道已經發佈的表單,要如何在修改嗎?

    就是回到當初他編輯的那一個頁面?

    直接修改execl應該只有內容吧

    比如我要增加問題等等

    香腸回應:
    進入你的表單檢視頁面中(也就是到 doc.google.com中,開啟你的表單),進入後點擊上方的【表單】→【編輯表格】,這樣就可以修改囉!

  • 绝对细心的人···

    香腸回應:
    @@?

  • Ted

    哈,多謝香腸這篇教學啦 :grin:

    香腸回應:

    :)

  • 很好 不错。
    用在了我们企业上 http://www.picpixy.cn/index.php/contact

    如果可以更换样式就更好啦。

    香腸回應:
    對阿,不過目前也算OK了啦!

  • 您好!
    非常謝謝您提供這個資訊,真的幫了我一個大忙
    沒想到不需要使用資料庫,或其他軟體就能製作出表單
    小妹感激您 m(_ _)m

    ps.這跟香腸真好吃!~呵呵

    香腸回應:
    Google超強大:p

  • 彥傑

    請問,如果進去Google docs是英文版的,該要如何處理?
    英文我不是那麼精通…..該怎麼辦呢?

    版主回應:
    進入: http://docs.google.com/ ,點選右上角「seeting」,進入找到第一個languages選擇【繁體中文】然後按OK就可以了。

  • 香腸大啊..不小心刪了表單代碼。 。該怎麼找回來?不是要從新建立個吧?

    版主回應:
    請參考教學中的「五、修改表單選項與內容」,進入編輯表單畫面,然後切換到【預覽並傳送】畫面,你就可以找到了。

  • c

    Google大GJ~
    還有這種東西阿

    話說
    不少人拿留言版來當這用
    就是把list留言用的檔案給砍了就好XD

    版主回應:
    用這樣子的服務,可以替網站系統省不少資源呢!

  • wo~

    香腸大,你真是太帥了,連這都搞的到^^"

    版主回應:
    希望你會喜歡這樣,也可以用它來取代留言版啦XD

  • 我上榜了XD
    很用心喔

    版主回應:
    哈!真不小心讓你曝光了 ((羞
    感謝你的配合。

  • 這篇太讚了,最近剛好有應用到這種服務的需求

    這樣一來就方便多了,不需要自己拼一支程式出來

    版主回應:
    對阿!以前我就很想要有這樣的表單了,曾經去dob找看看有沒有,可是都看不懂,很難滴!

  • 我說~香腸大,咱們真是太有默契了啦!我今天動筆前也想說來寫一篇有關google doc的文章好了,焦點就在「聯絡表單」與「共同作業」兩者擇一,後來想說聯絡表單一整個感覺就是要寫很久的fu,就鎖定共同作業了。詳情請看:http://sango.twgg.org/2008/07/google-mailmail.html

    沒想到你今天發表的主題剛好就是聯絡表單了!真的是像講好的一樣!反正你們一個是香腸,一個是魷魚,那我來當「炒」好了,哈哈(誤)

    這就是英雄所見略同嗎?(羞)

    版主回應:
    哈!真巧,昨天那篇文章,也是和網友有默契((羞