다단계 랜딩 페이지 양식
긴 랜딩 페이지 양식을 여러 단계로 나누고, 각 단계에 고유한 필드를 배치하여 사용자가 한 단계씩 양식을 진행하도록 할 수 있습니다. 모든 다단계 양식에는 잠긴 확인 단계가 포함되어 있어, 사용자가 제출 후 항상 확인 화면을 볼 수 있습니다.
사전 요구 사항
랜딩 페이지 빌더에 접근하려면 특정 권한이 필요합니다. 접근 권한이 없는 경우, Braze 관리자에게 도움을 요청하세요.
또한 랜딩 페이지 양식 블록에 대해 숙지해야 합니다.
다단계 양식의 작동 방식
다단계 양식을 만들려면 빌드 패널의 레이아웃 섹션에서 양식 행을 추가하세요. 양식 행에는 실행 버튼과 다단계 지원이 기본으로 포함되어 있으므로 행 구조를 직접 조립할 필요가 없습니다.
랜딩 페이지당 양식 행은 하나만 추가할 수 있습니다. 페이지로 드래그하면 단일 단계와 제출 후 실행되는 잠긴 확인 단계가 함께 표시됩니다.
양식 행은 자체적으로 다단계 탐색을 관리하므로, 모든 단계가 한 페이지의 단일 행 안에 포함됩니다. 이는 단일 단계 양식을 만들고 제출 버튼을 별도의 확인 랜딩 페이지에 연결하는 기본 방식과 다릅니다. 자세한 내용은 4단계: 확인 페이지 만들기를 참조하세요.
다단계 양식 추가
- 랜딩 페이지 편집기에서 빌드 패널로 이동하여 레이아웃을 선택합니다.
- 양식 행을 페이지로 드래그합니다.
- 양식 행이 선택된 상태에서 오른쪽 속성 패널의 단계 섹션을 사용하여 양식을 구성합니다.
- 양식 블록(이메일 캡처, 전화번호 캡처, 입력 필드, 드롭다운, 체크박스 또는 체크박스 그룹 등)을 1단계에 추가합니다.
- 단계 추가를 선택하여 추가 단계를 만들고, 각 단계에 양식 블록을 추가합니다.
예를 들어, 3단계 양식에서는 1단계에서 이름을, 2단계에서 전화번호를 입력받은 후, 확인 단계에서 사용자에게 제출에 대한 감사 메시지를 표시할 수 있습니다.
편집 중 단계 간 이동
편집기에서 단계 간 이동하는 방법은 두 가지가 있습니다.
| 방법 | 사용법 |
|---|---|
| 단계 탐색기 | Canvas에서 Step X of Y 컨트롤을 사용하여 이전 또는 다음 단계로 이동합니다. |
| 단계 패널 | Form 행을 선택한 다음 오른쪽 속성 패널의 Steps 섹션을 사용하여 Confirmation 단계를 포함한 특정 단계로 바로 이동합니다. |
단계 관리
양식 행의 속성 패널에서 단계 섹션을 사용하여 단계를 추가, 제거, 재정렬할 수 있습니다.
| 작업 | 방법 |
|---|---|
| 단계 추가 | Add step을 선택합니다. 새 단계는 기존 단계 다음, Confirmation 단계 앞에 추가됩니다. |
| 단계 제거 | 제거하려는 단계 옆의 휴지통 아이콘을 선택합니다. Confirmation 단계에는 휴지통 아이콘이 없으며 제거하거나 재정렬할 수 없습니다. 이 단계는 사용자가 이전 단계를 완료한 후 항상 마지막에 실행됩니다. |
| 단계 재정렬 | 단계 옆의 드래그 핸들을 사용하여 순서를 변경합니다. |
확인 단계 사용자 지정
모든 다단계 양식에는 단계 섹션의 제출 후 아래에 확인 단계가 포함되어 있습니다. 이 단계는 잠겨 있어 삭제할 수 없으므로, 사용자가 양식을 제출한 후에는 항상 확인 화면이 표시됩니다.
확인 단계는 삭제할 수 없지만, 다른 단계와 마찬가지로 사용자 지정할 수 있습니다. 단계 섹션에서 해당 단계를 선택한 다음 블록을 추가하고 스타일을 지정하여 확인 메시지를 작성하세요.
양식 블록 스타일 지정
양식 행이 선택된 상태에서 다단계 양식 패널의 스타일 섹션을 사용하여 양식 컨테이너를 커스터마이즈하세요.
| 컨트롤 | 설명 |
|---|---|
| 배경 이미지 | 양식 뒤에 이미지를 추가합니다. 이미지 크기, 위치, 반복 설정도 조정할 수 있습니다. |
| 배경색 | 양식 컨테이너의 배경색을 설정합니다. |
| 테두리 스타일 | 양식 컨테이너의 테두리를 실선, 파선 또는 점선 중에서 선택합니다. |
| 테두리 색상 | 양식 컨테이너의 테두리 색상을 설정합니다. |
| 테두리 반경 | 양식 컨테이너의 모서리를 둥글게 처리합니다. |
| 패딩 | 양식 컨테이너 가장자리와 콘텐츠 사이의 간격을 조정합니다. |
이러한 스타일은 확인 단계를 포함하여 모든 단계에 걸쳐 양식 컨테이너에 적용됩니다.
부분적으로 완료된 양식의 데이터 추적
사용자가 확인 단계에 도달하기 전에 양식을 떠나더라도, Braze는 완료한 단계의 데이터를 고객 프로필에 저장합니다. 랜딩 페이지 양식 제출 이벤트는 사용자가 모든 단계를 완료하고 확인 단계에 도달할 때까지 기록되지 않습니다.
리타겟팅 및 트리거 전송은 랜딩 페이지 양식 제출 이벤트에 의존합니다. 일부 단계만 제출하고 전체를 완료하지 않은 사용자의 데이터는 프로필에 저장되지만, 부분 데이터가 캡처되었더라도 해당 이벤트에는 포함되지 않습니다.
이는 최종 단계에 도달하지 않은 사용자가 부분 제출로 추적되는 랜딩 페이지 설문조사와는 다릅니다.
제한 사항 및 고려 사항
- 랜딩 페이지는 하나의 Form 행만 지원하므로, 모든 단계와 확인 단계가 해당 행 하나에 포함됩니다.
- 데이터 수집 단계는 최대 10개까지 추가할 수 있습니다. Confirmation 단계는 이 제한에 포함되지 않습니다.
- 각 단계에는 다음 단계로 이동하도록 클릭 동작이 설정된 기본 버튼이 포함되어 있습니다. 이 동작은 현재 단계의 입력을 검증하고 저장하며, 마지막 데이터 수집 단계에서는 Submitted a Landing Page form 이벤트를 기록하고 Confirmation으로 이동합니다. 단계가 연결되어 있지 않은 경우, 버튼이 다음 단계로 이동하도록 클릭 동작을 추가하세요. 자세한 내용은 편집기 블록의 버튼을 참조하세요.
- 확인 경험을 위해 별도의 랜딩 페이지를 만들거나 링크할 필요가 없습니다. Confirmation 단계가 Form 행에 내장되어 있기 때문입니다.
- Layout 아래에 Form 행이 표시되지 않는 경우, Braze 계정 매니저에게 문의하세요.