폼
미리 만들어진 문의, 견적, 예약, 등록 폼. AI가 단일 컴포넌트 하나로 삽입해 드리며, submit 핸들러를 직접 작성할 필요가 없습니다. 모든 제출 내역은 앱의 제출 받은 편지함에 저장됩니다.
Proyecta의 폼은 AI가 직접 코딩하는 것이 아닌 기능(capability) 으로 제공됩니다. 방문자가 연락할 수 있는 방법이 필요할 때 — 문의 폼, 견적 요청, 예약, 이벤트 신청 등 — Proyecta가 준비된 폼 정의를 프로비저닝하고 템플릿 소유 블록을 통해 렌더링합니다. 유효성 검사, 성공 상태, 제출 내역 저장, 소유자 알림이 모두 기본으로 제공됩니다.
프리셋
섹션 제목: “프리셋”모든 폼은 다섯 가지 내장 프리셋 중 하나에서 시작됩니다. 원하는 폼을 설명하면 Proyecta가 적합한 프리셋을 선택하고 적용해 드리므로, 필드를 처음부터 만들 필요가 없습니다.
| 프리셋 | form api id |
용도 | 연관 항목 |
|---|---|---|---|
| Contact | contactForm |
일반 문의: 이름, 이메일, 선택적 전화번호, 메시지 | 비즈니스 정보 |
| Quote | quoteForm |
견적 요청: 연락처 정보 + 서비스 종류 + 작업 세부사항 | 서비스 |
| Booking | bookingForm |
예약 / 약속: 서비스, 선호 날짜 및 시간, 연락처 정보 | 서비스 |
| Registration | registrationForm |
이벤트 또는 강좌 신청 (등록 / RSVP): 참석자 정보 + 메모 | 이벤트 |
| Order | orderForm |
주문 접수: 고객이 원하는 것, 연락처 정보, 메모 | 메뉴, 카탈로그 |
하나의 앱에 여러 폼을 사용할 수 있으며 (예: 문의 폼과 예약 폼), AI가 폼을 추가하거나 필드 이름을 변경하거나 구조를 수정할 수 있습니다.
AI가 폼을 연결하는 방법
섹션 제목: “AI가 폼을 연결하는 방법”AI는 폼이나 submit 핸들러를 직접 만들지 않습니다. 템플릿 소유 <FormBlock/>을 삽입하고 id 또는 api id로 폼을 지정합니다.
import { FormBlock } from '@/components/blocks/FormBlock';
// 공개 페이지 어디에나 — 문의 섹션, "견적 요청" 패널 등<FormBlock form="contactForm" />;<FormBlock/>이 모든 것을 자동으로 처리합니다:
- 필드 유형별 렌더링 — 텍스트 / 이메일 / 전화번호는 input으로, 긴 텍스트는 textarea로, 선택 항목은 드롭다운으로, 옵트인은 체크박스로, 날짜와 시간은 네이티브 피커로, 파일 필드는 “파일 첨부” 컨트롤로 렌더링됩니다.
- 브라우저에서 유효성 검사 — 전송 전 필수 필드를 확인합니다.
- 서버에서 유효성 검사 — 서버가 값을 거부하면, 해당 필드 옆에 인라인으로 오류가 표시됩니다. (제출 누락이나 무음 실패 없음)
- 성공 상태 표시 — 제출 후 폼이 친절한 확인 메시지(폼 자체의 확인 메시지)로 교체되며, 추가 응답을 보낼 수 있는 옵션이 제공됩니다.
- 안전한 실패 처리 — 폼이 존재하지 않거나 비활성화된 경우 블록은 아무것도 렌더링하지 않으므로, 공개 페이지가 깨지는 일이 없습니다.
블록이 템플릿 소유이기 때문에, AI가 할 일은 블록을 배치하고 주변 섹션을 스타일링하는 것뿐입니다. 내부 동작은 고정되어 있고 올바르게 구현되어 있습니다.
파일 첨부
섹션 제목: “파일 첨부”폼에서 파일 업로드를 받을 수 있습니다 (영수증, 참고 사진, 브리프 등). 파일 필드는 “파일 첨부” 버튼을 렌더링하고, 파일을 스토리지에 업로드한 후 공개 URL을 제출 내역에 포함합니다. 제한 사항은 자동으로 적용됩니다:
- 이미지 및 PDF만 허용, 최대 5 MB (큰 이미지는 브라우저에서 먼저 축소됩니다).
- 파일 업로드 중에는 submit 버튼이 비활성화되므로, 제출이 절반만 완료된 상태로 전송되는 일이 없습니다.
제출 내역이 저장되는 곳
섹션 제목: “제출 내역이 저장되는 곳”모든 제출 내역은 저장되며, 앱의 제출 받은 편지함 — 관리자 패널의 일부로, 템플릿의 <SubmissionsInbox/>를 통해 렌더링됩니다 — 에 표시됩니다. 여기서 소유자는 다음을 할 수 있습니다:
- New / Read / Archived 탭별로 제출 내역을 탐색하며, New 탭에는 읽지 않은 건수 배지가 표시됩니다.
- 제출 내역을 열어 제출된 필드 값, 출처 페이지, 날짜를 확인합니다.
- 제출 내역을 read로 표시하거나, new로 되돌리거나, archive합니다.
- 받은 편지함을 특정 폼으로 필터링하거나, 모든 폼의 제출 내역을 한 목록에서 확인합니다.
받은 편지함은 관리자 전용이며, 관리자 계정으로 로그인해야 합니다 (서버에서 강제 적용).
제출마다 이메일 알림 받기
섹션 제목: “제출마다 이메일 알림 받기”누군가 폼을 제출할 때마다 이메일로 알림을 받을 수 있습니다. 소유자 알림을 켜고 수신할 이메일 주소를 설정하면, 앱을 열지 않아도 받은 편지함에서 리드를 확인할 수 있습니다. 이메일 자체는 Proyecta의 이메일 기능을 통해 전송되므로, 별도 설정 없이 바로 사용할 수 있습니다.
자주 사용하는 패턴 (AI에게 맡기세요)
섹션 제목: “자주 사용하는 패턴 (AI에게 맡기세요)”"푸터에 이름, 이메일, 메시지 필드가 있는 문의 폼을 추가하고, 누군가 제출할 때마다 hello@mybiz.com으로 이메일을 보내줘.""각 서비스 페이지에 필요한 서비스와 작업 세부사항을 묻는 '견적 요청' 폼을 추가해줘.""고객이 선호 날짜와 시간으로 예약을 요청할 수 있는 예약 폼을 추가해줘.""워크숍 페이지에 이벤트 등록 폼을 만들고 참석자가 PDF를 첨부할 수 있게 해줘.""제출 받은 편지함에서 아직 읽지 않은 것만 보여줘."