# 웹 양식
**웹 양식**은 입력 필드가 있는 웹 콘텐츠입니다: 이메일 필드, 답변을 태그에 저장하는 필드, 동의 체크박스, 제출 버튼. 팝업 또는 인라인 [웹 캠페인](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)에 표시하면 별도의 구독 양식을 설정하지 않고도 방문자를 이메일에 구독시키고 방문자가 알려준 정보를 프로필에 저장할 수 있습니다.
## 웹 양식의 작동 방식
방문자가 양식을 제출하면 Pushwoosh는 다음 작업을 순서대로 수행합니다:
1. **Tag input** 필드에 입력된 각 답변을 방문자의 브라우저 디바이스에 있는 해당 태그에 즉시 기록합니다. 방문자가 웹 푸시를 구독하지 않은 경우에도 마찬가지입니다. 비어 있는 답변은 태그의 현재 값을 그대로 둡니다.
2. 양식에 **Email input**이 있으면 이메일 주소를 이메일에 구독시키고 동일한 태그 값을 가진 이메일 디바이스를 생성합니다. [더블 옵트인](#confirm-emails-with-double-opt-in)이 켜져 있으면 방문자는 먼저 확인 이메일을 받습니다.
3. Pushwoosh가 제출을 수락하면 양식의 [Success 페이지](#design-the-success-page)를 표시합니다.
요금제에 웹 플랫폼이 포함되어 있지 않으면 태그는 저장되지 않지만 제출은 그대로 수락됩니다. **Email input**이 없는 양식은 브라우저 디바이스에 태그만 저장합니다. 예를 들어 방문자에게 관심사를 물어볼 때 사용합니다.
## 웹 양식 만들기
양식을 만들려면 양식을 생성하고, 필드를 추가하고, Success 페이지를 디자인한 다음 저장합니다. 양식이 길면 여러 페이지로 나눕니다.
### 웹 양식 생성하기
1. **콘텐츠 → 웹 콘텐츠**로 이동합니다.
2. **만들기**를 클릭하고 **웹 양식** 유형을 선택합니다.
3. 템플릿을 선택합니다:
- **Email subscription:** 제목, 이메일 필드, 동의 체크박스, **Submit** 버튼, "Thank you!" Success 페이지가 있는 가입 양식.
- **Blank form:** 제목과 **Submit** 버튼만 있는 빈 양식.
4. 상단 바에서 이름을 클릭하고 양식 이름을 입력합니다. 방문자에게는 보이지 않습니다. 이름이 없으면 양식을 저장할 수 없습니다.
### 양식 필드 추가하기
웹 양식에는 **Text**, **Button**, **Icon** 블록과 네 가지 양식 블록인 **Email input**, **Tag input**, **Consent**, **Submit**이 있습니다.
1. 오른쪽의 **Elements** 탭을 엽니다.
2. 블록을 양식으로 드래그하거나 클릭하여 현재 페이지에 추가합니다.
3. 양식에서 블록을 선택합니다. 블록의 옵션이 **Settings** 탭에서 열립니다.
- 블록을 위나 아래로 이동하려면 **POSITION** 화살표를 사용합니다.
- 블록을 제거하려면 삭제 아이콘을 클릭합니다.
양식에는 **Email input**과 **Submit**이 각각 하나만 있을 수 있으므로, 양식에 이미 있으면 해당 타일을 사용할 수 없게 됩니다.
실행 취소 및 다시 실행은 웹 콘텐츠에서와 동일하게 작동합니다. [실행 취소 및 다시 실행](/ko/product/content/web-popup-content/web-content/#undo-and-redo)을 참조하세요.
각 블록 설정에 대한 자세한 내용은 [블록](/ko/product/content/web-popup-content/blocks/)을 참조하세요.
### Success 페이지 디자인하기
모든 웹 양식은 **Success** 페이지로 끝나며, 방문자는 Pushwoosh가 제출을 수락한 후 이 페이지를 봅니다. 이 페이지는 삭제하거나 시작 페이지로 지정할 수 없습니다.
1. **+ 페이지 추가** 다음의 마지막 탭인 **Success** 탭을 클릭합니다.
2. 다른 페이지와 마찬가지로 편집합니다. 예를 들어 할인 코드가 포함된 감사 메시지에 **Text**, **Button**, **Icon** 블록을 사용합니다. **Submit** 버튼은 여기에 배치할 수 없습니다.
### 긴 양식을 여러 페이지로 나누기
한 번에 묻는 질문 수를 줄이려면 페이지를 추가합니다.
1. **+ 페이지 추가**를 클릭합니다. 새 페이지는 현재 페이지 다음에 추가되며, **Success** 페이지 다음에는 추가되지 않습니다.
2. 방문자를 다음 단계로 이동시키려면 **Go to page** 액션이 있는 버튼을 추가합니다.
**Success** 페이지로 바로 이동하는 버튼은 양식을 제출합니다. 페이지를 추가, 복제, 삭제하는 방법은 [여러 페이지](/ko/product/content/web-popup-content/multi-page/)를 참조하세요.
복제된 페이지는 양식 블록 없이 복사됩니다. 양식에는 **Email input**과 **Submit**이 각각 하나만 있으며, 각 태그는 한 번만 사용할 수 있습니다.
#### 다중 페이지 양식의 제출 방식
양식의 유일한 **Submit** 버튼이 모든 페이지를 함께 전송합니다.
양식이 전송되기 전:
- 현재 페이지의 필드가 유효하지 않으면 방문자는 다음으로 이동할 수 없습니다. 이전으로 돌아가는 것은 항상 가능합니다.
- 제출 시 양식은 먼저 브라우저에서 모든 페이지를 확인합니다. 다른 페이지의 필드가 유효하지 않으면 양식은 해당 페이지로 전환하여 그 필드의 오류 텍스트를 표시하고, 아무것도 전송하지 않습니다.
양식이 전송된 후:
- Pushwoosh가 이메일 주소를 거부하면 양식은 **Email input**이 있는 페이지로 전환하여 해당 필드의 **Invalid email text**를 표시합니다.
- Pushwoosh가 다른 이유로 제출을 거부하면(예: 필드가 저장된 양식과 더 이상 일치하지 않는 경우) 방문자는 현재 페이지에 머무르며 **Submit error text**를 보게 됩니다.
### 양식 저장하기
저장하기 전에 양식을 전체 크기로 보려면 **미리보기**를 클릭합니다. 미리보기에서는 아무것도 전송되지 않으므로 양식은 사이트에서 테스트하세요.
1. 상단 바에서 **저장**을 클릭합니다.
2. **The form can't be saved yet** 배너가 열리면 배너에 나열된 각 문제를 수정합니다. [양식을 저장할 수 없는 경우](#if-the-form-cant-be-saved)를 참조하세요.
3. **저장**을 다시 클릭합니다.
#### 양식을 저장할 수 없는 경우
**The form can't be saved yet** 배너에는 저장을 막는 모든 문제가 나열됩니다. 표에서 해당 메시지를 찾아 안내대로 조치하세요.
| 배너의 메시지 | 조치 방법 |
|---|---|
| **Add an Email input or a Tag input** | 필드를 하나 이상 추가합니다. |
| **The form needs exactly one Submit button, not on the success page** | **Success**가 아닌 페이지에 **Submit** 버튼을 하나만 둡니다. |
| **A form with an Email input needs a Consent block with a privacy policy URL** | **Consent** 블록을 추가하고 **Privacy policy URL**을 입력합니다. |
| **The privacy policy URL must start with https:// or / — otherwise the site shows no link** | URL을 `https://…` 형식 또는 `/`로 시작하는 사이트 내 경로로 입력합니다. |
| **Keep only one Email input** | 추가된 **Email input**을 삭제합니다. |
| **Choose a tag in every Tag input** | 각 **Tag input**에서 태그를 선택하거나 빈 필드를 삭제합니다. |
| **Tag “…” is chosen in more than one field** | 필드 중 하나에서 다른 태그를 선택합니다. |
| **“…” is a reserved tag — a form can't write `PW_FF_*` tags** | 다른 태그를 선택합니다. |
| **The form needs exactly one success page** | **Success** 페이지를 하나만 둡니다. |
저장할 때 Pushwoosh는 선택된 각 태그도 확인합니다. 태그가 삭제되었거나 숨겨져 있거나 이름이 `PW_FF_`로 시작하면 양식이 저장되지 않으며, 오류 메시지에 해당 태그가 표시됩니다. 예: `Tag "City" must be an existing, non-hidden tag, not PW_FF_*, used once`. 해당 필드에서 다른 태그를 선택하세요.
## 사이트에 양식 표시하기
양식은 활성 웹 캠페인 안에서만 사이트에 나타납니다. 하나의 양식을 여러 캠페인에서 사용할 수 있습니다. **팝업** 캠페인은 양식을 페이지 위에 표시하고, **인라인** 캠페인은 페이지 요소 안의 블록으로 표시합니다.
시작하기 전에 개발자에게 다음을 요청하세요:
- 사이트에서 [Web SDK](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#inline-campaigns-and-web-forms) 3.99.0 이상이 실행되는지 확인합니다. 이전 버전의 Web SDK는 필드 없이 양식을 표시합니다.
- **인라인** 캠페인을 계획하는 경우 캠페인이 배치될 페이지 요소를 추가합니다. [CSS 선택자](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/#css-selector)를 참조하세요.
그런 다음 캠페인을 만듭니다:
1. **캠페인 → 웹 캠페인**으로 이동합니다.
2. **캠페인 만들기**를 클릭하고 **팝업** 또는 **인라인**을 선택합니다.
3. **웹 콘텐츠**에서 양식을 선택합니다. 양식은 이름 아래에 **웹 양식**이 표시됩니다.
4. 잠재고객 및 표시 설정을 구성합니다.
5. 캠페인을 시작합니다.
모든 단계는 [웹 팝업 캠페인 만들기](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)를 참조하세요.
## 더블 옵트인으로 이메일 확인하기
프로젝트에서 더블 옵트인이 켜져 있으면 이메일을 제출한 방문자는 확인 이메일을 받고, 이메일의 링크를 클릭한 후에만 구독됩니다. 확인 링크는 24시간 동안 유효합니다. Pushwoosh는 방문자가 확인할 때 해당 이메일 주소에 대한 양식의 태그 값을 저장합니다.
- 확인되지 않은 상태에서 방문자가 같은 캠페인에서 같은 주소를 다시 제출하면 Pushwoosh는 확인 이메일을 다시 보내며, 최대 5분에 한 번 보냅니다. 가장 최근 이메일의 링크만 작동합니다.
- 프로젝트의 웹 캠페인을 통해 이미 확인된 주소는 추가 확인 이메일 없이 바로 구독됩니다. **잠재고객 → 구독 양식**의 구독 양식을 통한 확인은 여기에 포함되지 않습니다.
- 확인 이메일에는 인증된 발신 도메인이 필요합니다. 계정에 인증된 도메인이 없는 동안 Pushwoosh는 확인 이메일을 보내야 하는 모든 제출을 거부하며, 방문자는 **Submit error text**를 보게 됩니다.
- 요금제에 이메일이 포함되어 있지 않으면 방문자가 링크를 클릭해도 주소가 구독되지 않고 확인되지 않은 상태로 남습니다. 이 실패는 캠페인의 실패한 제출에 표시되지 않습니다.
더블 옵트인은 프로젝트의 구독 양식과 웹 캠페인 양식에 공통으로 적용되는 하나의 설정입니다. [더블 옵트인으로 구독자 확인하기](/ko/product/audience-data-and-segmentation/subscription-forms/double-opt-in/)를 참조하세요.
## 양식 결과 추적하기
**캠페인 → 웹 캠페인**에서 캠페인 통계를 열어 양식을 제출한 방문자 수와 제출 실패 이유를 확인하고 구독자를 내보냅니다.
3. 템플릿을 선택합니다:
- **Email subscription:** 제목, 이메일 필드, 동의 체크박스, **Submit** 버튼, "Thank you!" Success 페이지가 있는 가입 양식.
- **Blank form:** 제목과 **Submit** 버튼만 있는 빈 양식.
4. 상단 바에서 이름을 클릭하고 양식 이름을 입력합니다. 방문자에게는 보이지 않습니다. 이름이 없으면 양식을 저장할 수 없습니다.
### 양식 필드 추가하기
웹 양식에는 **Text**, **Button**, **Icon** 블록과 네 가지 양식 블록인 **Email input**, **Tag input**, **Consent**, **Submit**이 있습니다.
1. 오른쪽의 **Elements** 탭을 엽니다.
2. 블록을 양식으로 드래그하거나 클릭하여 현재 페이지에 추가합니다.
3. 양식에서 블록을 선택합니다. 블록의 옵션이 **Settings** 탭에서 열립니다.
- 블록을 위나 아래로 이동하려면 **POSITION** 화살표를 사용합니다.
- 블록을 제거하려면 삭제 아이콘을 클릭합니다.
양식에는 **Email input**과 **Submit**이 각각 하나만 있을 수 있으므로, 양식에 이미 있으면 해당 타일을 사용할 수 없게 됩니다.
실행 취소 및 다시 실행은 웹 콘텐츠에서와 동일하게 작동합니다. [실행 취소 및 다시 실행](/ko/product/content/web-popup-content/web-content/#undo-and-redo)을 참조하세요.
각 블록 설정에 대한 자세한 내용은 [블록](/ko/product/content/web-popup-content/blocks/)을 참조하세요.
### Success 페이지 디자인하기
모든 웹 양식은 **Success** 페이지로 끝나며, 방문자는 Pushwoosh가 제출을 수락한 후 이 페이지를 봅니다. 이 페이지는 삭제하거나 시작 페이지로 지정할 수 없습니다.
1. **+ 페이지 추가** 다음의 마지막 탭인 **Success** 탭을 클릭합니다.
2. 다른 페이지와 마찬가지로 편집합니다. 예를 들어 할인 코드가 포함된 감사 메시지에 **Text**, **Button**, **Icon** 블록을 사용합니다. **Submit** 버튼은 여기에 배치할 수 없습니다.
### 긴 양식을 여러 페이지로 나누기
한 번에 묻는 질문 수를 줄이려면 페이지를 추가합니다.
1. **+ 페이지 추가**를 클릭합니다. 새 페이지는 현재 페이지 다음에 추가되며, **Success** 페이지 다음에는 추가되지 않습니다.
2. 방문자를 다음 단계로 이동시키려면 **Go to page** 액션이 있는 버튼을 추가합니다.
**Success** 페이지로 바로 이동하는 버튼은 양식을 제출합니다. 페이지를 추가, 복제, 삭제하는 방법은 [여러 페이지](/ko/product/content/web-popup-content/multi-page/)를 참조하세요.
복제된 페이지는 양식 블록 없이 복사됩니다. 양식에는 **Email input**과 **Submit**이 각각 하나만 있으며, 각 태그는 한 번만 사용할 수 있습니다.
#### 다중 페이지 양식의 제출 방식
양식의 유일한 **Submit** 버튼이 모든 페이지를 함께 전송합니다.
양식이 전송되기 전:
- 현재 페이지의 필드가 유효하지 않으면 방문자는 다음으로 이동할 수 없습니다. 이전으로 돌아가는 것은 항상 가능합니다.
- 제출 시 양식은 먼저 브라우저에서 모든 페이지를 확인합니다. 다른 페이지의 필드가 유효하지 않으면 양식은 해당 페이지로 전환하여 그 필드의 오류 텍스트를 표시하고, 아무것도 전송하지 않습니다.
양식이 전송된 후:
- Pushwoosh가 이메일 주소를 거부하면 양식은 **Email input**이 있는 페이지로 전환하여 해당 필드의 **Invalid email text**를 표시합니다.
- Pushwoosh가 다른 이유로 제출을 거부하면(예: 필드가 저장된 양식과 더 이상 일치하지 않는 경우) 방문자는 현재 페이지에 머무르며 **Submit error text**를 보게 됩니다.
### 양식 저장하기
저장하기 전에 양식을 전체 크기로 보려면 **미리보기**를 클릭합니다. 미리보기에서는 아무것도 전송되지 않으므로 양식은 사이트에서 테스트하세요.
1. 상단 바에서 **저장**을 클릭합니다.
2. **The form can't be saved yet** 배너가 열리면 배너에 나열된 각 문제를 수정합니다. [양식을 저장할 수 없는 경우](#if-the-form-cant-be-saved)를 참조하세요.
3. **저장**을 다시 클릭합니다.
#### 양식을 저장할 수 없는 경우
**The form can't be saved yet** 배너에는 저장을 막는 모든 문제가 나열됩니다. 표에서 해당 메시지를 찾아 안내대로 조치하세요.
| 배너의 메시지 | 조치 방법 |
|---|---|
| **Add an Email input or a Tag input** | 필드를 하나 이상 추가합니다. |
| **The form needs exactly one Submit button, not on the success page** | **Success**가 아닌 페이지에 **Submit** 버튼을 하나만 둡니다. |
| **A form with an Email input needs a Consent block with a privacy policy URL** | **Consent** 블록을 추가하고 **Privacy policy URL**을 입력합니다. |
| **The privacy policy URL must start with https:// or / — otherwise the site shows no link** | URL을 `https://…` 형식 또는 `/`로 시작하는 사이트 내 경로로 입력합니다. |
| **Keep only one Email input** | 추가된 **Email input**을 삭제합니다. |
| **Choose a tag in every Tag input** | 각 **Tag input**에서 태그를 선택하거나 빈 필드를 삭제합니다. |
| **Tag “…” is chosen in more than one field** | 필드 중 하나에서 다른 태그를 선택합니다. |
| **“…” is a reserved tag — a form can't write `PW_FF_*` tags** | 다른 태그를 선택합니다. |
| **The form needs exactly one success page** | **Success** 페이지를 하나만 둡니다. |
저장할 때 Pushwoosh는 선택된 각 태그도 확인합니다. 태그가 삭제되었거나 숨겨져 있거나 이름이 `PW_FF_`로 시작하면 양식이 저장되지 않으며, 오류 메시지에 해당 태그가 표시됩니다. 예: `Tag "City" must be an existing, non-hidden tag, not PW_FF_*, used once`. 해당 필드에서 다른 태그를 선택하세요.
## 사이트에 양식 표시하기
양식은 활성 웹 캠페인 안에서만 사이트에 나타납니다. 하나의 양식을 여러 캠페인에서 사용할 수 있습니다. **팝업** 캠페인은 양식을 페이지 위에 표시하고, **인라인** 캠페인은 페이지 요소 안의 블록으로 표시합니다.
시작하기 전에 개발자에게 다음을 요청하세요:
- 사이트에서 [Web SDK](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#inline-campaigns-and-web-forms) 3.99.0 이상이 실행되는지 확인합니다. 이전 버전의 Web SDK는 필드 없이 양식을 표시합니다.
- **인라인** 캠페인을 계획하는 경우 캠페인이 배치될 페이지 요소를 추가합니다. [CSS 선택자](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/#css-selector)를 참조하세요.
그런 다음 캠페인을 만듭니다:
1. **캠페인 → 웹 캠페인**으로 이동합니다.
2. **캠페인 만들기**를 클릭하고 **팝업** 또는 **인라인**을 선택합니다.
3. **웹 콘텐츠**에서 양식을 선택합니다. 양식은 이름 아래에 **웹 양식**이 표시됩니다.
4. 잠재고객 및 표시 설정을 구성합니다.
5. 캠페인을 시작합니다.
모든 단계는 [웹 팝업 캠페인 만들기](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)를 참조하세요.
## 더블 옵트인으로 이메일 확인하기
프로젝트에서 더블 옵트인이 켜져 있으면 이메일을 제출한 방문자는 확인 이메일을 받고, 이메일의 링크를 클릭한 후에만 구독됩니다. 확인 링크는 24시간 동안 유효합니다. Pushwoosh는 방문자가 확인할 때 해당 이메일 주소에 대한 양식의 태그 값을 저장합니다.
- 확인되지 않은 상태에서 방문자가 같은 캠페인에서 같은 주소를 다시 제출하면 Pushwoosh는 확인 이메일을 다시 보내며, 최대 5분에 한 번 보냅니다. 가장 최근 이메일의 링크만 작동합니다.
- 프로젝트의 웹 캠페인을 통해 이미 확인된 주소는 추가 확인 이메일 없이 바로 구독됩니다. **잠재고객 → 구독 양식**의 구독 양식을 통한 확인은 여기에 포함되지 않습니다.
- 확인 이메일에는 인증된 발신 도메인이 필요합니다. 계정에 인증된 도메인이 없는 동안 Pushwoosh는 확인 이메일을 보내야 하는 모든 제출을 거부하며, 방문자는 **Submit error text**를 보게 됩니다.
- 요금제에 이메일이 포함되어 있지 않으면 방문자가 링크를 클릭해도 주소가 구독되지 않고 확인되지 않은 상태로 남습니다. 이 실패는 캠페인의 실패한 제출에 표시되지 않습니다.
더블 옵트인은 프로젝트의 구독 양식과 웹 캠페인 양식에 공통으로 적용되는 하나의 설정입니다. [더블 옵트인으로 구독자 확인하기](/ko/product/audience-data-and-segmentation/subscription-forms/double-opt-in/)를 참조하세요.
## 양식 결과 추적하기
**캠페인 → 웹 캠페인**에서 캠페인 통계를 열어 양식을 제출한 방문자 수와 제출 실패 이유를 확인하고 구독자를 내보냅니다.