> 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-3.md).
# 폼 빌더로 응모 양식 설계하기
## Part 4 · 폼 빌더로 응모 양식 설계하기
응모자에게서 받을 정보를 자유롭게 설계하는 화면입니다. 캠페인 생성 다이얼로그(Part 3)의 **참가 양식** 탭에서 사용하며, 9가지 필드 타입을 조합해 원하는 만큼 질문을 만들 수 있습니다.
영역 제목은 **참가 폼 설정**, 안내 문구는 "신청자가 작성할 추가 질문을 설정하세요."로 표시됩니다.
### 4-1. 폼 빌더 화면 구성
폼 빌더는 두 영역으로 분리되어 있습니다.
| 영역 | 위치 | 역할 |
| ---------------- | ------------- | ------------------------------------------------ |
| **필드 추가** 팔레트 | 좌측 (200px 너비) | 9가지 필드 타입 버튼이 세로로 나열 — 클릭 또는 드래그 앤 드롭으로 추가 |
| **미리보기 + 편집** 패널 | 우측 (가변 너비) | 추가된 필드가 응모자 시점에서 어떻게 보이는지 실시간 미리보기 + 클릭하면 인라인 편집 |
상단에는 헤더가 있어 **현재 필드 수**(`N/20 필드`)와 우측 액션 버튼을 표시합니다.
### 4-2. 상단 헤더 — 필드 수 + 3개 액션
#### 4-2-1. 필드 카운트 배지
좌상단에 영역 제목 옆으로 **현재 필드 수 / 최대 필드 수** 배지가 표시됩니다 (예: `5/20 필드`). 최대치(20개)에 도달하면 좌측 팔레트의 필드 타입 버튼이 비활성화되고 **"최대 N개까지"** 안내가 노출됩니다.
#### 4-2-2. 우상단 3개 버튼
| 버튼 | 아이콘 | 동작 | 활성 조건 |
| ------------- | --------------- | ----------------------------------- | -------- |
| **현재 템플릿 저장** | 💾 (Save) | 지금 만들어진 양식을 템플릿으로 저장 (다음 캠페인에서 재사용) | 필드 1개 이상 |
| **템플릿 관리** | 📥 (FileDown) | 템플릿 라이브러리 다이얼로그 열기 (4-7 참고) | 항상 |
| **필드 전체삭제** | 🗑 (Trash2, 빨강) | 추가된 모든 필드를 한 번에 비움 | 필드 1개 이상 |
### 4-3. 9가지 필드 타입
좌측 팔레트의 9개 버튼은 각각 다른 입력 형식을 만듭니다.
| 라벨 | 입력 형식 | 짧은 설명 |
| ---------- | ------------ | ----------------- |
| **텍스트** | 한 줄 입력 | 짧은 텍스트 입력 |
| **장문 텍스트** | 여러 줄 입력 | 긴 텍스트 입력 (여러 줄) |
| **이메일** | 이메일 입력 | 이메일 주소 입력 (형식 검증) |
| **전화번호** | 전화번호 입력 | 전화번호 입력 |
| **숫자** | 숫자만 입력 | 숫자만 입력 |
| **날짜** | 날짜 선택기 | 날짜 선택 |
| **드롭다운** | 단일 선택 (드롭다운) | 드롭다운에서 하나 선택 |
| **라디오 버튼** | 단일 선택 (라디오) | 여러 옵션 중 하나 선택 |
| **체크박스** | 다중 선택 | 하나 또는 여러 개 선택 |
> 💡 **버튼에 마우스를 올리면** 우측에 미리보기 툴팁이 떠올라 그 필드 타입이 응모자에게 어떻게 보이는지를 한눈에 확인할 수 있습니다 (실제 입력란 모양 + 짧은 설명).
### 4-4. 필드 추가 방법
| 방법 | 동작 |
| ------------ | ------------------------------------------- |
| **클릭** | 좌측 팔레트의 필드 타입을 클릭 → 미리보기 패널 맨 아래에 새 필드가 추가됨 |
| **드래그 앤 드롭** | 좌측 팔레트의 필드 타입을 드래그해 미리보기 패널의 원하는 위치에 떨어뜨림 |
### 4-5. 필드 편집 — 인라인 편집
미리보기 패널의 각 필드를 **클릭하면 그 자리에서 바로 편집**할 수 있습니다 (별도 다이얼로그 없이 인라인 편집).
#### 4-5-1. 공통 입력란
| 입력 | 의미 |
| ------- | ------------------------------ |
| **레이블** | 응모자에게 보일 질문 (예: "이름을 입력해 주세요") |
| **도움말** | 라벨 아래 작은 글씨로 노출되는 추가 설명 |
#### 4-5-2. 필드 타입별 추가 입력란
| 필드 타입 | 추가 입력란 |
| ------------------------------ | ---------------------------- |
| 텍스트 / 장문 텍스트 / 이메일 / 전화번호 / 숫자 | **플레이스홀더** (입력란에 흐리게 보이는 예시) |
| 드롭다운 | 플레이스홀더 + **옵션 목록** |
| 라디오 / 체크박스 | **옵션 목록** (각 옵션의 라벨 입력) |
| 날짜 | 플레이스홀더 |
#### 4-5-3. 우상단 토글 두 개
각 필드 카드의 우상단에 **두 개의 작은 토글**이 있습니다.
| 토글 | 의미 |
| ------- | ----------------------------- |
| **필수** | 응모자가 반드시 입력해야 하는 필드인지 |
| **조건부** | 다른 필드의 답변에 따라 보이게 할지 (4-6 참고) |
### 4-6. 템플릿 — 양식을 저장하고 재사용하기
자주 쓰는 양식을 매번 처음부터 만들지 않도록 **템플릿**으로 저장해 두고 다음 캠페인에서 그대로 불러올 수 있습니다.
#### 4-6-1. 현재 양식을 템플릿으로 저장
폼 빌더 우상단의 **\[💾 현재 템플릿 저장]** 클릭 → 저장 다이얼로그가 열립니다.
| 입력 | 의미 |
| ------ | --------------------------- |
| **이름** | 템플릿 식별 이름 (예: "K-뷰티 기본 양식") |
| **설명** | 간단한 설명 (선택) |
다이얼로그 제목은 **"참가양식 템플릿 저장"** 입니다. 저장된 템플릿은 같은 브랜드의 모든 캠페인에서 사용할 수 있습니다.
#### 4-6-2. 템플릿 라이브러리 — 불러오기 / 관리
폼 빌더 우상단의 **\[📥 템플릿 관리]** 클릭 → **참가양식 템플릿 관리** 다이얼로그가 열립니다.
부제: "저장된 템플릿을 불러오거나 다른 폼 이벤트의 양식을 가져올 수 있어요."
**다이얼로그 구성**
| 영역 | 내용 |
| -------------------- | ------------------------------------------------------ |
| **좌측 — 템플릿 목록** | 저장된 템플릿이 카드로 나열. 클릭하면 우측에서 미리보기 |
| **우측 — 미리보기** | 선택한 템플릿의 양식을 실제 모습 그대로 표시 |
| **미리보기 모드 토글** (우상단) | **템플릿만 보기** ↔ **전체 미리보기** 전환 — 전체 미리보기는 캠페인 정보까지 합친 모습 |
**가능한 작업**
* **불러오기**: 카드를 클릭한 뒤 \[적용] 또는 더블클릭 → 현재 폼 빌더에 그 양식이 그대로 채워짐
* **삭제**: 더 이상 쓰지 않는 템플릿 제거
**빈 상태**
저장된 템플릿이 0개면 좌측에 "**저장된 템플릿이 없습니다.**", 우측에 "좌측에서 템플릿을 선택하여 전체 참가양식을 미리보기 하세요." 안내가 표시됩니다.
### 4-7. 실시간 미리보기
미리보기 패널은 **응모자가 실제로 보게 될 화면**을 그대로 보여줍니다. 필드를 추가·편집할 때마다 **즉시 반영**되므로, 양식이 너무 길지 않은지·모바일에서도 어색하지 않은지 한눈에 확인할 수 있습니다.
> 💡 응모자에게 노출되는 공개 폼 페이지의 정확한 모습은 Part 13에서 다룹니다.
---
# 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-3.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.