ฟอร์ม

ฟอร์ม ติดต่อ, ขอใบเสนอราคา, จองคิว, และ ลงทะเบียน ที่สร้างไว้พร้อมใช้งาน AI วางให้ด้วย component เดียว — ไม่ต้องเขียน submit handler เอง — และทุก submission จะไปอยู่ใน submissions inbox ของแอปคุณ

ฟอร์มบน Proyecta ถือเป็น ความสามารถ (capability) ไม่ใช่สิ่งที่ AI เขียนโค้ดขึ้นมาเองทีละบรรทัด เมื่อแอปของคุณต้องการช่องทางให้ผู้เยี่ยมชมติดต่อกลับ ไม่ว่าจะเป็นฟอร์มติดต่อ การขอใบเสนอราคา การนัดหมาย หรือการลงทะเบียนกิจกรรม — Proyecta จะจัดเตรียม form definition ที่พร้อมใช้งานและ render ผ่าน block ที่เป็นของ template โดยตรง การ validate, สถานะสำเร็จ, การเก็บ submission และการแจ้งเตือนเจ้าของแอป ล้วนมีให้ครบโดยไม่ต้องตั้งค่าเพิ่ม

ฟอร์มสำเร็จรูป

ฟอร์มทุกรูปแบบเริ่มต้นจาก preset สำเร็จรูปห้าแบบ อธิบายฟอร์มที่คุณต้องการ แล้ว Proyecta จะเลือก (และปรับแต่ง) ให้เหมาะสม — คุณไม่ต้องสร้าง field ขึ้นมาเองเลย

Preset	form api id	ใช้สำหรับ	เหมาะคู่กับ
Contact	contactForm	“ติดต่อเรา” ทั่วไป: ชื่อ, อีเมล, เบอร์โทร (ไม่บังคับ), ข้อความ	ข้อมูลธุรกิจ
Quote	quoteForm	ขอใบเสนอราคา: ข้อมูลติดต่อ + บริการที่ต้องการ + รายละเอียดงาน	บริการ
Booking	bookingForm	นัดหมาย: บริการ, วันและเวลาที่ต้องการ, ข้อมูลติดต่อ	บริการ
Registration	registrationForm	ลงทะเบียนกิจกรรมหรือคอร์ส (RSVP): ข้อมูลผู้เข้าร่วม + หมายเหตุ	กิจกรรม
Order	orderForm	รับออร์เดอร์: ลูกค้าต้องการอะไร, ข้อมูลติดต่อ, หมายเหตุ	เมนู, แคตตาล็อก

คุณมีหลายฟอร์มในแอปเดียวกันได้ (เช่น ฟอร์มติดต่อและฟอร์มจองคิว) และ AI สามารถเพิ่ม เปลี่ยนชื่อ หรือปรับ field ในฟอร์มใดก็ได้

วิธีที่ AI เชื่อมต่อฟอร์ม

AI จะไม่สร้างฟอร์มหรือ submit handler ขึ้นมาเอง แต่จะวาง <FormBlock/> ที่เป็นของ template และชี้ไปยังฟอร์มด้วย id หรือ api id:

import { FormBlock } from '@/components/blocks/FormBlock';

// ใส่บนหน้า public ได้เลย — ส่วน contact, แผง "ขอใบเสนอราคา" ฯลฯ
<FormBlock form="contactForm" />;

<FormBlock/> ดูแลทุกอย่างด้วยตัวเอง:

• Render field ตามประเภท — text / email / phone เป็น input, ข้อความยาวเป็น textarea, ตัวเลือกเป็น dropdown, การยืนยันเป็น checkbox, วันและเวลาเป็น native picker, และไฟล์เป็นปุ่ม “แนบไฟล์”
• Validate ในเบราว์เซอร์ — ตรวจ field ที่บังคับกรอกก่อนส่งข้อมูล
• Validate บน server — หาก server ปฏิเสธค่าใด error จะแสดงตรงข้าง field นั้นโดยตรง (ไม่มี submission หาย ไม่มี error เงียบๆ)
• แสดงสถานะสำเร็จ — เมื่อส่งแล้ว ฟอร์มจะถูกแทนที่ด้วยข้อความยืนยันที่เป็นมิตร (ข้อความยืนยันของฟอร์มนั้นๆ) พร้อมตัวเลือกให้ส่งอีกครั้ง
• Fail อย่างปลอดภัย — หากฟอร์มไม่มีอยู่หรือถูกปิดใช้งาน block จะไม่ render อะไรเลย จึงไม่มีทางทำให้หน้า public พัง

เนื่องจาก block เป็นของ template หน้าที่ของ AI คือแค่วางและตกแต่ง section โดยรอบ — ส่วน plumbing ข้างหลังนั้นถูกกำหนดไว้แล้วอย่างถูกต้อง

การแนบไฟล์

ฟอร์มรับไฟล์ที่ผู้ใช้อัปโหลดได้ (ใบเสร็จ รูปภาพอ้างอิง เอกสาร Brief) Field ประเภทไฟล์จะแสดงปุ่ม “แนบไฟล์” อัปโหลดไฟล์ไปยัง storage และเก็บ URL สาธารณะไว้ใน submission โดยมีข้อจำกัดดังนี้:

• เฉพาะรูปภาพและ PDF เท่านั้น ขนาดไม่เกิน 5 MB (รูปภาพขนาดใหญ่จะถูกลดขนาดในเบราว์เซอร์ก่อน)
• ปุ่ม submit จะถูก disable ระหว่างที่กำลังอัปโหลดไฟล์ จึงไม่มีทาง submission ออกไปแบบไม่สมบูรณ์

Submission ไปอยู่ที่ไหน

ทุก submission จะถูกเก็บไว้และปรากฏใน submissions inbox ของแอป — ซึ่งเป็นส่วนหนึ่งของ admin panel ที่ render ผ่าน <SubmissionsInbox/> ของ template จากที่นั่น คุณ (เจ้าของแอป) สามารถ:

• ดู submission ภายใต้แท็บ New / Read / Archived พร้อม badge แจ้งจำนวนที่ยังไม่ได้อ่านบน New
• เปิด submission เพื่อดูค่า field ที่ส่งมา, หน้าที่มาจาก และวันที่
• ทำเครื่องหมาย submission ว่า read, ย้ายกลับไปเป็น new หรือ archive ก็ได้
• กรอง inbox ให้แสดงเฉพาะฟอร์มเดียว หรือดู submission ทุกฟอร์มในรายการเดียวกัน

inbox นี้เข้าถึงได้เฉพาะ admin — ผู้อ่านต้องล็อกอินด้วยบัญชี admin (มีการตรวจสอบบน server)

รับอีเมลทุกครั้งที่มี submission

ฟอร์มสามารถแจ้งเตือนคุณทางอีเมลเมื่อมีคนส่งข้อมูล — เปิด owner notifications และตั้งอีเมลที่ต้องการรับ คุณจะได้รับ lead ใน inbox โดยไม่ต้องเปิดแอป อีเมลถูกส่งผ่านความสามารถ email ของ Proyecta จึงทำงานได้ทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม

รูปแบบที่ใช้บ่อย (ให้ AI จัดการให้)

• "Add a contact form to the footer with name, email, and message, and email me at hello@mybiz.com whenever someone submits."
• "Put a 'Request a quote' form on each service page that asks which service they need and the job details."
• "Add a booking form so clients can request an appointment with a preferred date and time."
• "Create an event registration form for the workshop page and let attendees attach a PDF."
• "Show me the submissions inbox and only the ones I haven't read yet."

ที่เกี่ยวข้อง

• Content Management — ฟอร์มอยู่ร่วมกับ collection ของคุณใน content model เดียวกัน
• Admin Panel — สถานที่ตรวจสอบ submission
• Emails — วิธีการส่งอีเมลแจ้งเตือนเจ้าของแอป