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

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

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

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

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

文章目錄
  1. 一、製作個人網站專屬聯絡表單
  2. 二、公開、張貼你的網站聯絡表單
  3. 三、設定表單即時通知服務
  4. 四、接收通知已提交的表單
  5. 五、修改表單選項與內容

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

第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預覽模式會把框架語法吃掉，而造成表單無法正常顯示喔！

延伸閱讀

在Google News上追蹤我們最新文章
標籤
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學，默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了，別叫我阿腸，請叫我香腸，這樣我才知道你看我部落格長大的。

文章: 1781

相關文章

40 則留言

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

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

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

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

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

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

    感謝您的回覆
    2011快樂 :)

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

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

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

    感謝您的熱心分享!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    香腸回應：
    謝謝你~ :)

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

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

  22. 灰常感謝香腸大，

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

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

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

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

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

    比如我要增加問題等等

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

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

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

    香腸回應：
    Google超強大:p

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

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

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

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

  30. Google大GJ~
    還有這種東西阿

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

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

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

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

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

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

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

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

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。