[Open-source tool] 可搭配PHP和SQL的表單開源工具_Form tools(2):Add Form by External Direct Type

延續<[Open-source tool] 可搭配PHP和SQL的表單開源工具_Form tools(1):簡介和建置>一文，完成建置後，接著是在Form tools管理後台內新增表單(Add Form)，方便管理不同的回填表單。新增表單分別有Internal, External和Form Builder三種型態供挑選，同時External又可區分為Direct和Code兩種方式，其中Direct是以指向Form tools內process.php的方式進行; Code則是以Form tools API方式引入。由於External方式較為彈性且靈活，本文以External Direct Type來建立表單，同時以報名表網頁為範例來測試。

假設使用情境為讓使用者可在網頁上填入報名資訊，當使用者填妥報名表並點選提交按鈕後，頁面顯示"報名成功"。因此準備兩個簡易網頁檔案來測試，一個為報名表單，另一個為重導向到顯示"報名成功"的頁面。接著，即可開始進行下列初始化表單的建置流程。

a.依照External Direct的頁面引導，首先需要填寫Form Name、Form URL和Redirect URL等等表單資訊，其中Form URL即是上述報名表單網頁檔案，Redirect URL重導向到顯示"報名成功"頁面，如下圖所示。

b.在"Test Submission"步驟，需要將紅框內程式碼加入到報名表單中，讓報名表單提交時可指向process.php，同時在後端SQL建立對應ID的數據表，以下圖程式碼為例，建立在SQL的數據表的ID為3。加入程式碼後，即可填寫和測試報名表單，若順利初始化報名表單，其網頁會轉到process頁面，再依其指示回到"Test Submission"頁面點選Refresh和Next STEP按鈕。

c.在"Database Setup"步驟，即是建立SQL的數據表，剛進到該步驟的紅色填滿處為空白，可點選"Smart Fill"按鈕自動填入文字內容，亦可自行定義文字內容。另外，該數據表也自動生成上傳時間(submission_date)、最後修改時間(last_modified)和上傳IP位址(ip_address)欄位。

d.在"Field type"步驟，則是定義數據表的格式內容，包含資料格式(string or number)和資料長度(<=256 chars)，亦可選擇點選"Smart Fill"按鈕自動填入文字內容。

e.在"Finalize Form"步驟，須將在b.步驟新增的第二行程式碼(同下圖紅框處)從報名表單檔案中移除，如下圖說明內容。該步驟即是完成表單初始化的工作。

f.完成後，即可在Forms頁面看到已建立的表單，其中ID=3即是對應b.的程式碼建置內容。

完成上述Form tools表單建置後，可以使用者角度來測試報名表單，如下。

提交上述兩筆報名表單後，可在Form tools管理後台界面看到對應筆數，如下圖紅框。

點選View後，可看到兩筆資料內容，同時可選擇在網頁上呈現或是匯出成Excel檔案，進一步讀取上傳時間和IP位址等等資訊。

上述是藉由簡易報名表範例說明External Direct type新增表單方式，除此之外，其尚可進一步設定驗證碼，來區分人類或是機器人輸入資訊，可自行玩玩看。

Reference:

1.Add a POST form

2.Adding CAPTCHAs to your POST form