如何用快速建立網站聯絡表單?(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預覽模式會把框架語法吃掉,而造成表單無法正常顯示喔!

延伸閱讀

  1. 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. 2008-07-29 @ 09:12:22 | 3樓

    我上榜了XD
    很用心喔

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

  4. 2008-07-29 @ 13:01:37 | 4樓

    wo~

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

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

  5. 2008-07-29 @ 18:25:11 | 5樓

    Google大GJ~
    還有這種東西阿

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

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

  6. 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. 2008-10-14 @ 23:33:31 | 8樓

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

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

    香腸回應:
    Google超強大:p

  9. 2008-11-13 @ 16:02:03 | 9樓

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

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

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

  10. 2008-12-20 @ 16:09:50 | 10樓

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

    香腸回應:
    :)

  11. 2009-01-06 @ 13:38:50 | 11樓

    绝对细心的人···

    香腸回應:
    @@?

  12. 2009-01-07 @ 12:03:43 | 12樓

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

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

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

    比如我要增加問題等等

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

  13. 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~

    香腸回應:
    謝謝你~ :)

  1. 2008-07-29 @ 10:27:52
  2. 2008-08-16 @ 21:53:52

    [...] █ 作者:Horse | blog: http://horse.yo2.cn █ 版权声明:本文采用创作共享版权协议,欢迎非商业转载,请保留此信息并注明原文链接,谢谢! 让我们省略前戏直奔主题吧——谁的电脑上有微软Office请举手;谁电脑上的Office是正版的?请举手。相信会是怎样的情景大家都能想象到…… 诚实地说,我的电脑上也有盗版软件(Windows是最大一条)。但是在网络时代,我们能够方便地获取很多和收费软件一样优秀的免费软件,也可以使用到很多免费的在线服务,所以比起以前,我电脑中盗版软件的数量大大减少。比如现在我的电脑中就没有微软Office,我安装的是金山公司免费的个人版WPS Office,但是我已经很少用到它了。因为我把我的文档都放到了Google Docs(Google文件,下文简称GDocs)上。 微软Office的特点一是价格贵,一套正版的Office要几千块;二是占用大量硬盘空间;三是运行时好像占用内存不少,我印象中打开Word要等好一会(也可能是那时用的电脑太烂了)。而GDocs在这三点上几乎都优于微软Office:免费;在线使用,比本地使用更方便,像访问网页一样,无需安装程序,几乎不占用硬盘空间;占用内存少(似乎也有人不这么认为)。 自06年Google收购了在线文档编辑网站Writely之后,又将其与自家实验室产品Google Spreadsheet(电子表格,相当于Excel)整合,再经过不断地改进,就成了现在我们看到的GDocs——文档、电子表格、演示文稿分别对应微软Office的Word、Excel、PowerPoint三项产品,此外还能上传和查看PDF文件(暂时无法编辑PDF),前不久又推出了“表单”功能用于建立如调查问卷之类的表单…… [...]

  3. 2008-10-30 @ 22:41:13

    [...] 自從在「香腸炒魷魚」那兒看見「如何用快速建立網站聯絡表單」這篇文章,無法顯示網頁馬上就想到有朝一日小米明信片完成〈心虛〉之後,使用這個功能就可以讓大家很快速地完成小米明信片的線上申請動作,你說 … 是不是光用想的就覺得很酷呢? [...]

  4. 2009-01-09 @ 17:47:30



(若看不到驗證碼,請重新整理網頁。)


(留言時請保持尊重,必填欄位請確實填寫,否則將刪除留言。)

訂閱本站最新文章:  (如何訂閱?)