跳到主要內容區塊

ntuccepaper2019

技術論壇

運用JotForm製作簡易表單
  • 卷期:v0002
  • 出版日期:2007-09-20

作者:張文瀞 / 臺灣大學計算機及資訊網路中心程式設計組


想知道如何快速完成一份電子表單嗎?沒有程式設計的背景沒關係,只要會上網就可以,利用這個快速又簡單的方法,可以幫您設計出一份您要的表單喔!趕快來試試這個非常容易上手又好用的JotForm(Web 2.0 的典範之一),讓你輕輕鬆鬆花10分鐘就能完成一份可以立刻運作的電子表單。

 

前言

免安裝、免架設伺服器、免申請動態網頁空間,還不用寫程式,最重要的是—竟然不用錢;只要您肯花少許的時間投資在這個簡單又容易上手的工作平台要到www.jotform.com 註冊一個帳號,就能夠快速設計出一份符合您的期待的表單,再也不用等程式師的時成了!更棒的是,您也可以將程式碼複製到你的網頁,是個非常方便又好用的表單製作工具。

 

表單樣板

連上JotForm網站,只要以您的電子郵件註冊一個帳號後,就可以登入系統使用了。版面上方是各項功能列:新增表單、開啟表單、存檔、檢視原始碼等等。板面右方是表單製作工具列,包含文字粗體、填充、上傳附加檔等等,可以說是簡單到一目瞭然。

 

2007092006001.jpg

表單元素一覽

 

2007092006002.jpg

 

表單樣板

Jotform表單製作的功能特色是提供使用者視覺化的操作介面,使用者可以用拖拉的方式將表單拉到想要的位置,就可設計需要的欄位,快速地建立一份電子表單。除了可以指定欄位名稱外,每個表單元素還可以指定欄位的大小、必要性(Required)等屬性設定,令人驚喜的是,完全不用寫程式。

 

2007092006003.jpg

 

設定表單屬性

表單設計者可以依照喜好和需求設定整個表單的屬性,隨意修改表單標題、背景顏色、文字大小及顏色。透過設定電子郵件通知欄位(Send e-mail=yes),在E-mail欄位輸入欲收件信箱;每次有人填表之後,JotForm 會將填好的表單資料寄給該email信箱,通知你某人已完成表單填寫並送出。要注意的是,如果表單上有設計上傳檔案(file)的欄位,不會用email寄過來,必須在檢視該表單的報告中才會呈現此檔案。上傳的附加檔案大小不能超過1000KB。

 

2007092006004.jpg

 

表單管理

檢視編輯及一覽所有的表單,每份表單後面的數字表示目前已回覆的表單資料份數。點選該表單即可編輯、檢視或刪除。

 

2007092006005.jpg

 

發布

可直接將JotForm的連結發布給大家填寫或利用google讓表單更美麗。連線到www.google.com,利用gmail 帳號登入(右上角) �O點選我的帳戶 �O Page Creator �O Create new page �O Edit html �O回到jotform �O view source �O 將source code複製到Page Creator �O將此 page 的URL 發布給大家,即可請大家填寫表單。

 

2007092006006.jpg

 

修改程式碼

若表單中若有 RadioButton( )或CheckBox( )的選項,最後在檢視報告時會無法呈現出填寫者選取的項目,出現空白狀態,因此必須修改程式碼,以下圖性別為男或女為例,在value=“ ” 地方加上選項名稱 value=“男”,最後在報告中才會呈現對象是男或女

2007092006008.png

 

檢視報告

可以在表單報告中顯示填寫的日期時間、姓名與回覆的IP等資訊,選取需要的條件欄位後,按下一步,即可查看關於該表單的回覆狀況。另外,也可以選擇以Web、Excel 或 CSV等方式開啟報告,如果由Excel 開啟中文編碼的表單檢視報告會變成亂碼,因此解決方式,請選取CSV開啟,然後儲存檔案,再用notepad打開,另存成ANSI即可在Excel檔上查看報告或作其他相關資料統計。

 

2007092006008.jpg

 

結論

使用這個Web2.0的典範應用,可以大幅縮減一個應用的開發週期,即時就可以完成您的需求。目前計資中心應用於非機密性及不用驗證身份的一些電子表單,例如公文傳閱及問卷調查上面,還有開會要吃什麼便當,要團購飲料等等,都可以很方便地利用這個嶄新的Web 服務,讓您完成表單設計、資料蒐集與統計的工作。唯一的缺憾就是沒有提供認證的服務,計中目前也在進行認證服務(Session Service)與電子表單結合的規劃,以提供方便又安全的服務,請大家拭目以待。