> 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에서 다룹니다.