วิธีสร้างโปรแกรมสร้างฟอร์ม

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

คุณต้องการตัวสร้างหรือไม่

ตัวสร้างเป็นโปรเจกต์ที่ใหญ่กว่าฟอร์มทั่วไป เพราะทุกประเภทของฟิลด์ต้องทำงานได้ทั้งในตัวแก้ไข ฟอร์มสาธารณะ การตรวจสอบ การจัดเก็บ การแจ้งเตือน และการส่งออก

โปรแกรมสร้างฟอร์มต้องมีอะไรบ้าง

นิยามฟอร์ม

เก็บแต่ละฟอร์มเป็นรายการฟิลด์ที่บันทึกเป็นข้อมูลที่มีโครงสร้าง (JSON ในคอลัมน์ของ Postgres ใช้ได้ดี) ฟิลด์หนึ่งอาจมีลักษณะดังนี้

• id เป็น ID ที่คงที่และไม่เปลี่ยน แม้ป้ายกำกับจะเปลี่ยน
• type เช่น ข้อความ อีเมล ตัวเลข ข้อความยาว ตัวเลือก ช่องทำเครื่องหมาย วันที่ ไฟล์
• label และ help text (ข้อความช่วยเหลือ)
• required (จำเป็นหรือไม่), min / max, allowed file types (ประเภทไฟล์ที่อนุญาต)
• options สำหรับฟิลด์แบบตัวเลือก
• order (ลำดับ) และอาจมี condition (“แสดงเฉพาะเมื่อฟิลด์ X เป็น Y”)

ตัวแก้ไขจะแก้รายการนี้ ส่วนฟอร์มสาธารณะจะอ่านจากรายการนี้ นี่คือหัวใจทั้งหมด คือไม่ต้องเขียนโค้ดใหม่สำหรับแต่ละฟอร์ม

การส่งคำตอบ

• Submissions คือ ฟอร์ม เวอร์ชันของฟอร์ม เวลาที่ส่ง คำตอบที่ใช้ ID ของฟิลด์เป็นคีย์ และสถานะ (ใหม่ อ่านแล้ว เก็บถาวร)
• Files ไฟล์ที่อัปโหลดต้องอยู่ในที่เก็บไฟล์ โดยรายการคำตอบเก็บเพียงการอ้างอิง ไม่ควรเก็บไว้ในแถวของฐานข้อมูล

หน้าต่างๆ

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

การตัดสินใจและข้อแลกเปลี่ยน

การกำหนดเวอร์ชัน อีกไม่นานมีคนเปลี่ยนชื่อ “Phone” เป็น “Mobile number” หลังจากมีคำตอบไปแล้ว 200 รายการ หากเก็บคำตอบด้วย ID ของฟิลด์และแต่ละคำตอบบันทึกเวอร์ชันของฟอร์ม คำตอบเก่าก็ยังแสดงได้ถูกต้อง ถ้าไม่ทำอย่างนั้น ข้อมูลของคุณจะเพี้ยนไปเงียบๆ

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

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

การแจ้งเตือน “ส่งอีเมลถึงฉันเมื่อมีคนส่งฟอร์ม” เป็นสิ่งที่คาดหวังกัน ต้องใช้ผู้ให้บริการอีเมลและ API key ดูวิธีส่งอีเมลจากแอปของคุณ

สแปม ฟอร์มสาธารณะจะถูกบอตค้นพบ ใช้ฟิลด์ honeypot (ซ่อนจากคน บอตจะกรอกให้) จำกัดอัตราต่อ IP ตรวจสอบฝั่งเซิร์ฟเวอร์ และถ้าจำเป็นให้ใช้บริการ CAPTCHA

การฝัง การฝังด้วย iframe เป็นวิธีที่ง่ายและปลอดภัยที่สุดในการนำฟอร์มไปไว้บนเว็บไซต์ของคนอื่น การฝังด้วยสคริปต์ดูเป็นธรรมชาติกว่า แต่สร้างและรักษาความปลอดภัยได้ยากกว่า

ตรรกะแบบมีเงื่อนไข “แสดงฟิลด์นี้เฉพาะเมื่อ…” เป็นที่นิยม แต่ทำให้ต้องทดสอบเพิ่มขึ้นหลายเท่า ควรเพิ่มหลังจากพื้นฐานมั่นคงแล้ว

พรอมต์แรกที่ใช้ได้จริง

สร้างเว็บแอปโปรแกรมสร้างฟอร์มให้ทีมของฉัน ผู้ใช้ที่เข้าสู่ระบบสร้างฟอร์มในตัวแก้ไขที่มีพรีวิวสด ประเภทฟิลด์: ข้อความสั้น ข้อความยาว อีเมล ตัวเลข วันที่ ตัวเลือกเดียว ช่องทำเครื่องหมาย และอัปโหลดไฟล์ แต่ละฟิลด์มี ID ที่คงที่ ป้ายกำกับ ข้อความช่วยเหลือ ธงจำเป็น และกฎเฉพาะประเภท (min/max ตัวเลือก ประเภทไฟล์ที่อนุญาต และขีดจำกัดขนาด 10 MB) บันทึกนิยามฟอร์มเป็น JSON พร้อมหมายเลขเวอร์ชันที่เพิ่มขึ้นทุกครั้งที่เผยแพร่ แต่ละฟอร์มได้ลิงก์สาธารณะและโค้ด iframe สำหรับฝัง ตรวจสอบคำตอบที่เซิร์ฟเวอร์เทียบกับเวอร์ชันที่เผยแพร่ บันทึกคำตอบโดยใช้ ID ของฟิลด์เป็นคีย์พร้อมเวอร์ชันของฟอร์ม และเก็บไฟล์ที่อัปโหลดไว้ในที่เก็บไฟล์ส่วนตัว เพิ่มฟิลด์ honeypot ที่ซ่อนไว้และขีดจำกัดอัตราต่อ IP เจ้าของฟอร์มเห็นตารางคำตอบพร้อมสถานะ (ใหม่ อ่านแล้ว เก็บถาวร) มุมมองรายละเอียด และการส่งออก CSV เก็บทุกอย่างในฐานข้อมูล ตรรกะแบบมีเงื่อนไขและการแจ้งเตือนทางอีเมลไว้ทำทีหลัง

ขั้นตอนการสร้าง

1. ตัวแก้ไขและนิยาม สร้างฟอร์มที่มีทุกประเภทของฟิลด์ และดู JSON ที่บันทึกไว้กับเอเจนต์ มันสะอาดและคงที่หรือไม่
2. ฟอร์มสาธารณะ กรอกบนโทรศัพท์ ตรวจข้อความการตรวจสอบและหน้ายืนยัน
3. การตรวจสอบฝั่งเซิร์ฟเวอร์ ให้เอเจนต์ส่งคำตอบที่ละเมิดกฎไปยังเซิร์ฟเวอร์โดยข้ามหน้าเว็บ ควรถูกปฏิเสธ
4. การกำหนดเวอร์ชัน เปลี่ยนชื่อและจัดลำดับฟิลด์หลังจากมีคำตอบไม่กี่รายการ คำตอบเก่าควรยังแสดงคำตอบที่ถูกต้อง
5. การอัปโหลด ลองไฟล์ที่ใหญ่เกินไปและไฟล์ประเภทผิด ยืนยันว่าคนแปลกหน้าไม่สามารถเปิดไฟล์ที่อัปโหลดได้ด้วยการเดาลิงก์
6. ตารางคำตอบและการส่งออก ตรวจการส่งออก CSV ด้วยคำตอบที่มีเครื่องหมายจุลภาค การขึ้นบรรทัดใหม่ และอักษรที่มีวรรณยุกต์หรือเครื่องหมายกำกับ
7. การแจ้งเตือน การฝัง และตรรกะ เพิ่มทีละอย่าง

ข้อผิดพลาดที่พบบ่อย

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

เมื่อผลิตภัณฑ์สำเร็จรูปเป็นทางเลือกที่ดีกว่า

เครื่องมือฟอร์มแบบโฮสต์ดีมากและมีราคาถูกสำหรับความต้องการส่วนใหญ่ เครื่องมือเหล่านี้แก้ปัญหาการฝัง สแปม การชำระเงิน การเชื่อมต่อ และการเข้าถึงสำหรับประเภทฟิลด์หลายสิบแบบมาแล้ว ถ้าทีมของคุณต้องการแค่ฟอร์ม ก็ใช้เครื่องมือเหล่านั้น ดูทางเลือกแทน Typeform และทางเลือกแทน Google Forms

สร้างเองเมื่อคำตอบต้องอยู่ร่วมกับข้อมูลของคุณเอง (ป้อนข้อมูลให้ CRM หรือพอร์ทัลลูกค้าที่คุณดูแลเอง) เมื่อคุณต้องการขั้นตอนการทำงานหลังการส่งที่เครื่องมือทำไม่ได้ เมื่อที่ตั้งหรือความเป็นเจ้าของข้อมูลเป็นข้อกำหนด หรือเมื่อฟอร์มเป็นฟีเจอร์ของผลิตภัณฑ์ที่คุณขายอยู่

การสร้างด้วย Mythex

บน Mythex คุณอธิบายตัวสร้างในแชต และทดสอบตัวแก้ไขกับฟอร์มสาธารณะเคียงข้างกันในพรีวิวสด Mythex เพิ่มฐานข้อมูล โดยเฉพาะสำหรับนิยามฟอร์มและคำตอบ และเปิดใช้ที่เก็บไฟล์ โดยอัตโนมัติเมื่อแอปต้องการการอัปโหลด (จำกัดที่ 1 GB ในแพ็กเกจ Free) อีเมลแจ้งเตือนส่งผ่านผู้ให้บริการที่คุณเชื่อมต่อด้วยคีย์ของคุณเอง เผยแพร่แอปไปยังลิงก์ mythex.ai หรือโดเมนของคุณเองในแพ็กเกจ Pro แล้วลิงก์ฟอร์มสาธารณะจะใช้งานได้จากที่นั่น

คำถาม