1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 網頁設計-Google Docs輕鬆製作線上報名表與訂購單

網頁設計-Google Docs輕鬆製作線上報名表與訂購單

2009/11/17

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作

  最近看到愈來愈多人使用Google Docs來製作一些表單,如:線上報名商品訂講問卷調查….等, 令梅干對於Google Docs感到更加好奇,以前梅干都是拿它來記一些資訊,沒想到現在竟然還有此功能,於是梅干就花了點時間小玩了一下,哈~真的是簡單又好用,以往只要製作像問卷調查、問題回報….等,都得仰賴程式設計人員進行開發,但現在只要花個五分鐘, 就可以打造一個屬於自已的表單,同時還提供後台隨時可觀看結果,這真得是太讚啦!


Step1
開啟瀏覽器,輸入http://docs.google.com/,進入後點選左上角【新增】/ Form,就可新增一個表單。
梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step2
進入新建的表單後,上面欄位中輸入此表單的主題名稱。
梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step3
接下來,下方就可依主題所需的問題,新增問題與選項,在選項的地方,就可設定要單選或複選。

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step4
接者選項的部分,就可依照主題自行設定,若是產品訂單的話,就可設定成顏色或尺寸之類的。

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step5
而它預設只有二組,當然二組一定不夠用,這時點下左上角的【新增項目】,就可再繼續新增題目與選項。

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step6
當表單都設計完畢後,點選右上角【更多動作】選擇編輯確認選項。

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step7
這邊主要就是用來設定,當使用者填完表單時,出現相關的感謝語。

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step8
都好了之後,所有的表單就大功告成啦!接下來就是要把這表單嵌到所需的頁面中,這時再點選右上角【更多動作】/ 已內嵌,只要把輸入框中的語法拷貝貼到頁面中就完成啦!

梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step9

梅干為了方便測試,就直接把SRC中的網址拷貝出來,直接貼到網址列中,就可直接看到剛所製作好的表單,而這是它的原形,各位只要再花點功夫,再作點邊框,整個表單就會更有特色。


梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step10

當填寫完畢後,就會出現剛所設定的感謝語。


梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


Step11
回到剛編寫表單中,選擇上方的 查看回覆 / 摘要,這時下方就會出現大餅圖與樹狀圖,真得是太人性化了。


梅問題-網頁設計教學-GoogleDocs免費線上訂購單與問卷製作


  在這不得不佩服Google工程師,真的是太厲害了,以前只要提到線上表單,都得用web端的程式再搭配資料庫,現在只要用滑鼠點一點,立即就可完成了,相信許多公司也經常辦網路活動,如:填問卷送大獎、有獎徵答、猜中得大獎, 而每個活動所需的表單與功能皆不同,這時就苦了程式設計師,每次都得依不同需求而個別的客製化,現在只要花個五分鐘,就可立即解決表單活動的問題,同時還可減輕程式設計人員的付擔。


[範例預覽]