> For the complete documentation index, see [llms.txt](https://guide.hypercape.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.hypercape.com/brand-guide/form-events/undefined-12.md).
# 응모자가 보는 공개 폼 페이지
## Part 12 · 응모자가 보는 공개 폼 페이지
응모자가 실제로 보는 화면을 운영자도 알아두면 운영 중 발생하는 문의에 정확하게 대응할 수 있습니다.
### 12-1. 공개 URL
https\://\[브랜드 도메인]/form-events/\[이벤트ID]
이 URL은 두 곳에서 빠르게 복사할 수 있습니다.
* 폼 이벤트 목록 한 행의 ⋯ 메뉴 > **링크 복사** (Live 상태일 때만 노출)
* 이벤트 상세 페이지 헤더의 🔗 **신청 링크 복사** 아이콘
### 12-2. 페이지의 5가지 상태
응모자가 URL로 접속하면 캠페인 상태와 응모 진행에 따라 **5가지 다른 화면**을 보게 됩니다.
| 상태 | 노출 시점 | 응모자가 보는 것 |
| --------------- | ---------------------- | ------------------------------- |
| **로딩** | 페이지 진입 직후 | 가운데 회전하는 로더 |
| **이벤트 없음 (에러)** | 잘못된 URL 또는 삭제된 이벤트 | "이벤트를 찾을 수 없습니다" 카드 |
| **종료됨 / 준비중** | 캠페인이 마감됐거나 시작 전 | 정보 카드 + 노랑 안내 박스 (응모 폼 없음) |
| **응모 가능** | 응모 기간 안 + 운영자가 종료하지 않음 | 정보 카드 + 동적 응모 폼 + \[참가 신청하기] 버튼 |
| **응모 완료** | 응모 제출 성공 후 | 초록 체크 + 티켓 페이지 링크 |
### 12-3. 이벤트 없음 (에러) 화면
| 표시 | 내용 |
| ----- | ----------------------------- |
| 카드 제목 | "이벤트를 찾을 수 없습니다" |
| 부제 | "요청하신 이벤트가 존재하지 않거나 종료되었습니다." |
URL이 잘못되었거나 이벤트가 삭제됐을 때 이 화면이 노출됩니다.
### 12-4. 종료됨 / 준비중 화면
응모 기간이 지났거나(종료됨) 아직 시작 전(준비중)이면 응모 폼 대신 안내가 표시됩니다.
| 영역 | 내용 |
| -------- | ------------------------------------------------------- |
| 대표 이미지 | productImageUrl이 등록되어 있으면 4:3 비율로 노출 |
| 제목 + 배지 | 이벤트 제목 + 회색 배지 (**종료됨** 또는 **준비중**) |
| 설명 | HTML 설명 |
| 노랑 안내 박스 | "이 이벤트는 종료되었습니다." 또는 "이 이벤트는 아직 시작되지 않았습니다." + 신청 기간 표시 |
### 12-5. 응모 가능 화면 — 응모자가 보는 본 화면
응모 기간이 활성일 때 보이는 화면입니다. 위에서 아래로 다음 영역이 차례대로 노출됩니다.
#### 12-5-1. 이벤트 정보 카드
| 영역 | 내용 |
| ----------- | ---------------------------------------------------------- |
| 대표 이미지 | productImageUrl 4:3 비율 |
| 제목 + 배지 | 이벤트 제목 + 초록 **🎁 신청 가능** 배지 |
| 설명 | HTML 설명 (운영자가 캠페인 설명 탭에서 작성한 본문) |
| 📅 신청 기간 박스 | 회색 박스에 시작일 \~ 종료일 |
| 콘텐츠 요구 안내 | (콘텐츠 요구 On 캠페인만) "※ 선정 시 경품 수령 후 콘텐츠(리뷰, 후기 등)를 제출해야 합니다." |
#### 12-5-2. 응모 폼 — 3개 카드 구조
응모자가 입력하는 폼은 **3개 카드**로 분리되어 있습니다.
**A. 연락처 정보**
| 필드 | 필수 | 플레이스홀더 |
| -------- | ---- | ----------------------------- |
| **이름** | ✅ | "홍길동" |
| **이메일** | ✅ | "" — 형식 검증 |
| **전화번호** | (선택) | "010-0000-0000" |
**B. 배송 주소**
| 필드 | 필수 | 플레이스홀더 |
| ----------------- | ---- | ------------------------------------------------ |
| **전체 주소 (직접 입력)** | (선택) | "도로명 주소나 지번 주소를 입력해주세요..." (자유 텍스트, 통합 주소를 한 칸에) |
| **주소** (line1) | ✅ | "도로명 주소" |
| **상세 주소** (line2) | (선택) | "아파트, 동/호수 등" |
| **도시** | ✅ | "서울시" |
| **시/도** | (선택) | "경기도" |
| **우편번호** | ✅ | "12345" |
| **국가** | ✅ | 드롭다운 ("국가 선택") — 2자리 ISO 코드 |
**C. 추가 정보**
브랜드가 폼 빌더(Part 4)로 만든 **커스텀 필드**가 여기에 노출됩니다. 폼 빌더에 추가한 필드가 0개면 이 카드 자체가 숨겨집니다.
조건부 표시(Part 4-6)가 설정된 필드는 다른 답변에 따라 보였다 숨겨졌다 합니다.
#### 12-5-3. 제출 버튼
폼 맨 아래에 큰 버튼이 있습니다.
> **참가 신청하기**
(전체 너비, 큰 사이즈. 처리 중에는 로더로 변함)
### 12-6. 응모 실패 시 메시지 (토스트)
폼 제출 시 검증·서버 응답에 따라 **빨간 토스트**로 다음 메시지가 표시됩니다.
| 사유 | 메시지 |
| ------- | -------------------------------------- |
| 중복 이메일 | "이미 동일 이메일로 신청이 접수되었습니다. 이메일을 확인해주세요." |
| 신청 기간 외 | "현재 신청 가능한 기간이 아닙니다." |
| 유효성 실패 | "입력값을 확인해주세요." |
| 기타 오류 | "일시적 오류가 발생했습니다. 잠시 후 다시 시도해주세요." |
> 💡 **응모자 문의 시** "이미 동일 이메일로 접수됐다"는 메시지를 받았다면 신청자 탭에서 검색해 본인 응모 내역을 안내하세요.
### 12-7. 응모 완료 화면 — 티켓 페이지 안내
응모 제출이 성공하면 화면이 전환되며 다음이 표시됩니다.
| 영역 | 내용 |
| ---------------- | ----------------------------------------------------- |
| 초록 체크 아이콘 | ✅ CheckCircle2 (큰 원형) |
| 제목 | "**신청 완료!**" |
| 안내문 | "신청이 정상적으로 접수되었습니다. 아래 링크로 선정 여부와 배송 현황을 확인할 수 있습니다." |
| **티켓 페이지 링크** 박스 | 회색 박스에 URL + **📋 복사** 버튼 + **\[🔗 티켓 페이지 열기]** 큰 버튼 |
| 하단 안내 | "이 링크를 저장해두세요. 선정 여부와 배송 현황을 확인할 때 필요합니다." |
| 토스트 | "신청 완료! / 신청이 정상적으로 접수되었습니다." |
### 12-8. 티켓 페이지의 의미
응모자는 **로그인하지 않고도** 본인 응모 상태를 확인할 수 있어야 합니다. 이를 위해 응모 후 응모자별 고유 **티켓 URL**(ticketUrl)이 발급됩니다.
| 특성 | 설명 |
| ------------ | ------------------------------------------------------------- |
| **발급 시점** | 응모 직후 (응모 완료 화면 + 자동 발송 메일에 포함) |
| **인증 방식** | URL 자체가 토큰 — **링크를 가진 사람은 누구든 접근 가능**하므로 응모자가 외부에 공유하지 않도록 안내 |
| **확인 가능 정보** | 본인 응모 상태(대기중·선정·미선정), 콘텐츠 제출 영역, 배송 현황 |
| **용도** | 응모자가 본인 한정으로 볼 수 있는 운영자 신청자 탭의 거울 |
### 12-9. 응모 후 백엔드 흐름 (참고)
응모자 화면 뒤에서 시스템이 다음을 처리합니다.
1. 폼 양식 + 필수 필드 + 형식(이메일·국가 코드) 검증
2. 같은 이메일 중복 응모 차단
3. 신청 기간 외 응모 차단
4. 응모 데이터 저장 + **티켓 URL 생성**
5. **신청 안내** 메일 자동 발송 (Part 10-2 참고)
6. 운영자 화면(신청자 탭)에 즉시 노출
이후 운영자가 선정/미선정/콘텐츠 요청 등을 처리하면 그에 맞는 메일이 자동으로 응모자에게 발송됩니다 — 자세한 내용은 Part 10 참고.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://guide.hypercape.com/brand-guide/form-events/undefined-12.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.