2008年1月26日

設計報名問卷的畫面

上一篇的文章裡面,我們已經先為問卷設計好我們要的欄位,這些欄位也就是我們要蒐集的資料,下一步驟我們要進行畫面的設計。如果使用過論壇的人應該對於BBCode很熟悉,我們這裡使用的就是這種概念,要叫他ISUCode嗎?大概只有我們自己看得懂囉。

1. 設計報名或者填寫畫面

點選填寫畫面時候,可以看到畫面分成兩個部份。一個是網頁編輯器,畫面拉到下方則是系統已經替你預先填好的「自由欄位」

SNAG-0014
上半部:網頁編輯器
 

SNAG-0015
下半部:自由欄位

操作的方法就是將自由欄位內的文字貼到編輯區,再依照需要排版報名畫面可以使用報名系統了。將自由欄位內的文字貼到編輯區就像以下的畫面。

SNAG-0016

完成後他所呈現的報名表格式就會以線上報名表的方式呈現,不過畫面設計就還是要靠一些美工技巧囉。

SNAG-0017

 

2.設計成功畫面

設計成功畫面的功能是用在使用者完成資料填寫之後出現的成功畫面。但在成功畫面的地方多了兩個自由欄位分別是[報名序號]與[修改密碼]。這兩個欄位是在使用者填寫完資料之後,系統自動產生的序號。

SNAG-0018

報名序號:系統自動產生,給系統辨識用的獨立代碼,也就是日後使用者需要返回登錄資料時候的登錄帳號。

修改密碼:系統自動產生,使用者返回系統時候需要的密碼。由系統自動產生不重複的獨立密碼。 如果要讓使用者可以查詢密碼的話,則在自由欄位設計時候務必記得設計email欄位讓使用者填寫,系統才能夠寄送回函。

完成成功畫面之後,使用者填寫完資料之後就可以看到下圖的成功畫面。

SNAG-0019

沒有留言: