如何用快速建立網站聯絡表單?(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了,謝謝回應