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

作者: 香腸 | 日期: 2008-07-29 | 分類: Google, 教學文章, 網站架設

※請注意，本站文章未經授權，嚴禁轉載！謝謝。

一般很多網站都會出現一個叫做「聯絡表單」的玩意，就是給網友問問題，以提交表單服務的模式，避免網站站長信箱曝光或是方便網友不用開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預覽模式會把框架語法吃掉，而造成表單無法正常顯示喔！

延伸閱讀


標籤: , , , , , ,

相關文章



關於本文章有 24 則留言。

  1. Sango
    2008-07-29 @ 00:58:38 
    1

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

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

    這就是英雄所見略同嗎？（羞）

    版主回應：
    哈！真巧，昨天那篇文章，也是和網友有默契((羞

  2. 小島
    2008-07-29 @ 04:15:49 
    2

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

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

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

  3. 12345
    2008-07-29 @ 09:12:22 
    3

    我上榜了XD
    很用心喔

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

  4. ken8203
    2008-07-29 @ 13:01:37 
    4

    wo~

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

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

  5. c
    2008-07-29 @ 18:25:11 
    5

    Google大GJ~
    還有這種東西阿

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

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

  6. Achix1
    2008-07-30 @ 09:08:33 
    6

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

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

  7. 彥傑
    2008-08-29 @ 13:34:02 
    7

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

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

  8. yinin
    2008-10-14 @ 23:33:31 
    8

    您好！
    非常謝謝您提供這個資訊，真的幫了我一個大忙
    沒想到不需要使用資料庫，或其他軟體就能製作出表單
    小妹感激您 ｍ（＿　＿）ｍ

    ps.這跟香腸真好吃！～呵呵

    香腸回應：
    Google超強大:p

  9. terry
    2008-11-13 @ 16:02:03 
    9

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

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

    香腸回應：
    對阿，不過目前也算OK了啦！

  10. Ted
    2008-12-20 @ 16:09:50 
    10

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

    香腸回應：
    :)

  11. leesum
    2009-01-06 @ 13:38:50 
    11

    绝对细心的人···

    香腸回應：
    @@?

  12. cello
    2009-01-07 @ 12:03:43 
    12

    有人知道已經發佈的表單，要如何在修改嗎？

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

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

    比如我要增加問題等等

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

  13. cello
    2009-01-09 @ 09:39:08 
    13

    灰常感謝香腸大，

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

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

  14. cat
    2009-01-22 @ 09:54:23 
    14

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

    香腸回應：
    圖片選項？目前好像沒這麼強...

  15. David
    2009-06-23 @ 03:33:28 
    15

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

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

  16. David
    2009-06-23 @ 16:08:47 
    16

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

    香腸回應：
    謝謝你~ :)

  17. 凡絲佩
    2009-07-29 @ 18:10:12 
    17

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

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

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

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

  18. 凡絲佩
    2009-07-30 @ 09:37:12 
    18

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

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

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

  19. js
    2009-09-28 @ 21:35:46 
    19

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

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

  20. Bryant
    2009-10-01 @ 00:21:19 
    20

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

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

  21. 易春木
    2010-01-05 @ 01:01:11 
    21

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

    香腸回應：
    :)

  22. zero
    2010-01-19 @ 00:57:26 
    22

    請問香腸大！
    如果有人重複填了表單，產生了兩筆重複的表單結果...
    該如何刪除那個重複的表單？
    謝謝賜教！

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

  23. zero
    2010-02-02 @ 04:15:40 
    23

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

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

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

  24. yiting
    2010-08-25 @ 14:15:02 
    24

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

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