ไฟล์และโค๊ดสำหรับการสร้างแบบฟอร์มนั้นมีหลายโฟลเดอร์ คือ genner สำหรับเก็บไฟล์ออกแบบสร้างฟอร์ม images สำหรับเก็บไฟล์ภาพที่เกี่ยวข้อง js สำหรับเก็บไฟล์ JavaScript ที่เรียกใช้งานทั้งตัวสร้างฟอร์มและแบบฟอร์ม temp สำหรับเก็บไฟล์ชั่วคราวขณะสร้างแบบฟอร์ม และสุดท้าย test สำหรับเก็บแบบฟอร์มที่สร้างขึ้น

ไฟล์ที่ใช้ในการสร้างฟอร์มสำหรับท่านที่ใช้งานโค๊ดแบบออนไลน์ จะมีเพียงหนึ่งโฟลเดอร์หลักและภายในบรรจุ 3 โฟลเดอร์เท่านั้น คือ genform สำหรับเก็บโฟลเดอร์ 3 โฟลเดอร์ (images, js, test) ซึ่งสามารถดาวน์โหลดได้ที่นี่ (เมื่อแตกไฟล์ .zip ออกมาจะได้โฟลเดอร์ทั้งสาม) สามารถเปลี่ยนชื่อโฟลเดอร์ได้ตามต้องการครับ แต่ระวังต้องแก้ในโค๊ดให้ตรงด้วยเดี๋ยวจะไม่ทำงานเข้าให้

ในไฟล์ที่ให้ดาวน์โหลดมานั้นจะมีโฟลเดอร์ tmp แถมมาด้วย โฟลเดอร์ที่ต้องเอาไปใช้งานจริงๆ นั้นใช้ทั้งหมด ยกเว้นโฟลเดอร์ temp เอาไว้เป็นไฟล์ต้นฉบับในภายหลังได้ครับ

• การใช้งานแบบออนไลน์ท่านจะต้องมีโปรแกรม Dreamweaver หรือ EditPlus หรือ web editor ตัวอื่นๆ ที่ท่านถนัดในการแก้ไขไฟล์ html, php แล้วเปิดไฟล์ชื่อ quiztemp.html หรือ quizfrom.html หรือชื่ออื่นๆ ตามที่คุณเปลี่ยนไปตามชอบขึ้นมารองรับ
• เปิดหน้าเว็บไซต์นี้ขึ้นมา http://www.krumontree.com/genform/genner/genquizform.html ขอย้ำต้องใช้ Firefox เท่านั้นนะครับ บราวเซอร์อื่นถ้าไม่ทำงานตามสั่ง อย่าว่ากัน (ฟรีอยู่แล้วไปดาวน์โหลดมาเถอะ คลิกเลย)
• เปิดไฟล์แบบสอบถามที่คุณมีอยู่แล้ว เช่น เอกสารในโปรแกรมประมวลผลคำ (word, page, notepad, writer etc.) ขึ้นมารอไว้เลย จะได้ไม่ต้องพิมพ์ให้เมื่อยมือ เราจะใช้วิธีการลากดำ สำเนา และวางลงในฟอร์มเลย

• เรามาเริ่มกันที่การทดลองสร้างแบบฟอร์มสอบถามเรื่องเพศของผู้ตอบแบบสอบถาม จากภาพบน เราจะใส่ชื่อในหัวข้อเป็น เพศ และชื่อตัวแปรคือ sex ข้อความที่แสดงเมื่อผู้ตอบแบบสอบถามไม่กรอกข้อมูล ในตัวอย่างใส่ประโยค "โปรดระบุเพศของคุณ" และประเภทตัวแปรเป็นแบบตัวเลือก คือให้เลือกระหว่าง 1 กับ 2 ซึ่งจะแปลความหมาย 1 เป็น ชาย 2 เป็น หญิง (ถ้ามี 3 ก็อาจจะแปลเป็น ชักสับสนในตนเอง ก็เป็นได้)

• เมื่อคลิกที่ สร้างแบบฟอร์ม จะได้หน้าต่างใหม่แสดงผลดังภาพบน ให้คลิกเมาส์ขวาเลือก View Page Source จะพบหน้าต่างแสดงโค๊ดจากระบบดังภาพล่าง ก็คัดลอกเอาฟอร์มที่ระบายดังภาพล่างไปวางในไฟล์ quizform.html ที่คุณเปิดรอไว้แล้ว

• วางที่ใต้บรรทัดทัดสีเทาดังภาพล่าง สามารถปรับขยายตาราง กำหนดตำแหน่งวางให้สวยงามได้ ใส่สีสันให้ช่องตารางตามชอบนะครับ ดังภาพล่าง ยังเหลือโค๊ดสคริปต์อีกบรรทัดหนึ่งด้านล่างก็เอาไปวางในไฟล์เดียวกันส่วนล่างที่กำหนดไว้ให้แล้ว

• การปรับแต่งฟอร์มให้ดูดีสวยงามนั้น ขึ้นอยู่กับการจัดวางของท่านเองนะครับ ตัวระบบสร้างฟอร์มของเราสร้างแค่โค๊ดเบื้องต้นให้เท่านั้น ท่านต้องมีความรู้ความเข้าใจในการใช้ภาษา html พอสมควรนะครับ

• ตัวอย่างภาพบนนี้เป็นการสร้างฟอร์มถามอายุ ถ้าต้องการแบบเลือกช่วงอายุให้ใช้วิธีการเดียวกับข้อการเลือกเพศข้างบนนั้นได้เลย แต่ในตัวอย่างนี้จะเป็นการถามแบบจำเพาะเจาะจงใส่ตัวเลขอายุได้เลย จึงใช้แบบฟอร์มดังภาพบนนี้ เลือกเป็นประเภทข้อความสั้น

• ทำการคัดลอกโค๊ดจากการ View Page Source แต่โค๊ดสคริปท์นั้น ระบบเราให้มาสองทางเลือก ถ้าเป็นการระบุช่วงอายุเอาโค๊ดแถวบน

• ในกรณีที่เราเจาะจงให้ใส่ตัวเลข เราจะใช้โค๊ดแถวล่างที่ขีดเส้นแดงไว้ ถ้าผู้ตอบแบบสอบถามไม่กรอกตัวเลข หรือใส่ตัวอักษร ตัวฟอร์มจะเตือนให้ใส่ตัวเลขให้ถูกต้อง ก่อนส่งแบบสอบถาม
• ข้างล่างนี้เป็นแบบฟอร์มสำหรับการสร้างข้อคำถามที่ให้กำหนดน้ำหนักคำตอบ ว่า เห็นด้วยอย่างยิ่ง, เห็นด้วย, เฉยๆ, ไม่เห็นด้วย, ไม่เห็นด้วยอย่างยิ่ง หรือ มากที่สุด, มาก, ปานกลาง, น้อย, น้อยที่สุด

• เราจะกำหนดหัวข้อใหญ่ของแบบสอบถามในช่อง ชื่อ/หัวข้อ ส่วนช่องตัวแปรให้ว่างไว้ (เราจะใส่ค่าตัวแปรในฟอร์มส่วนตารางแทน กำหนดข้อความเมื่อไม่มีการตอบคำถามในข้อย่อยๆ ประเภทของตัวแปรให้เลือก ตาราง มาก -> น้อย
• รายละเอียดตาราง เราสามารถเพิ่มข้อให้เท่ากับจำนวนข้อคำถามย่อยที่ต้องการ แล้วใส่ค่าตัวแปรเป็น กลุ่มย่อยไป เช่น ชุดแรกใช้ a1, a2, a3, ..., ax ชุดต่อไปก็จะเป็น b1, b2, b3, ..., bx และ c1,c2,c3, ..., cx ไปได้ตามที่ต้องการ แล้วคลิกสร้างแบบฟอร์ม

• ทำการคัดลอกโค๊ดจากการ View Page Source และโค๊ดสคริปท์ซึ่งจะมีเท่ากับจำนวนคำถามข้อย่อย (อย่าลืมว่า โค๊ดที่ให้มายังไม่สวยงามนะครับ ท่านต้องไปตกแต่งเพิ่มเติม ขยับตารางให้เหมาะสม เช่น กำหนดความกว้างของตาราง ช่องบรรจุข้อความให้พอดีเหมาะสมอีกครั้งหนึ่งดังภาพล่าง)

• โค๊ดสคริปท์เราจะนำมาเขียนต่อกันไปตามที่กำหนดไว้ดังภาพข้างล่างนี้

• ภาพล่างนี้เราทดลองเปิดฟอร์มผ่านบราวเซอร์ ดู ยังไม่สวยงามนัก ก็ทำเป็นตัวอย่างเท่านั้น แนะนำให้ใช้วิธีการสร้างตารางซ้อนในตารางจะช่วยให้การแสดงผลยืดหยุ่นมากขึ้น

• ทดสอบด้วยการป้อนอายุลงไปในช่องแต่ไม่เลือกข้ออื่นๆ แล้วคลิกส่งแบบสอบถาม จะเกิดผลดังภาพล่างนี้ ซึ่งเป็นไปตามเงื่อนไขที่เรากำหนดก็เป็นอันว่าสำเร็จแล้วในระดับหนึ่ง

• ถ้าเป็นแบบสอบถามที่มีให้ผู้ตอบแสดงข้อคิดเห็นโดยกรอกข้อความยาวๆ หลายๆ บรรทัดก็ทำได้ เลือกแบบการเติมตัวเลขช่องอายุข้างบน แต่เราใช้แบบข้อความยาวแทน เท่านั้นเอง คงพอนึกภาพออกนะครับ ขั้นตอนต่อไปก็จะเป็นการเชื่อมโยงแบบฟอร์มเข้ากับฐานข้อมูลเพื่อบันทึกไว้และนำผลที่ได้ไปประมวลผลต่อไป...