Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

8 changes: 4 additions & 4 deletions content/docs/en/help-center/create-forms/grouping-fields.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ description: The former multi-field feature has been replaced by field groups, w
## How Groups Work

- Groups simply bundle questions together; logic is still applied to each question individually.
- `Page breaks`, which are used in vertical view, cannot be used inside a group. You can only separate pages with questions that are outside the group.
- `Page breaks`, which are used in Standard View, cannot be used inside a group. You can only separate pages with questions that are outside the group.

## Display in Horizontal and Vertical Views
## Display in Grouped and Standard Views

- In horizontal view, questions normally appear one per page, but questions bundled into a group are shown together on the same page.
- In vertical view, all questions are normally shown on a single page, but by placing `page breaks` before and after a group, you can visually separate it by scroll.
- In Grouped View, questions normally appear one per page, but questions bundled into a group are shown together on the same page.
- In Standard View, all questions are normally shown on a single page, but by placing `page breaks` before and after a group, you can visually separate it by scroll.

<Callout title="Note">
Field groups help you organize your survey flow more cleanly and make complex question structures easier to scan at a glance.
Expand Down
4 changes: 2 additions & 2 deletions content/docs/en/help-center/create-forms/rejection-field.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ description: "The rejection field ends the survey without collecting a response
## Where to Place It

- We recommend placing it at the very end of the survey.
- In vertical view, all questions appear on a single page, so a rejection field placed in the middle can immediately end the survey as soon as the page loads.
- In horizontal view, placing it at the very beginning can reject respondents right when they start.
- In Standard View, all questions appear on a single page, so a rejection field placed in the middle can immediately end the survey as soon as the page loads.
- In Grouped View, placing it at the very beginning can reject respondents right when they start.
- It's a good idea to add a `page break` before a rejection field.

## Examples
Expand Down
2 changes: 1 addition & 1 deletion content/docs/en/help-center/create-forms/team-template.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
</Step>
<Step>
### Configure options
Optionally set whether to import as a copy, the preview orientation (horizontal/vertical), and a template description.
Optionally set whether to import as a copy, the preview orientation (grouped/standard), and a template description.
</Step>
<Step>
### Save
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';

## Customizing the Next Button

- By default, horizontal-view surveys display one question at a time, and a 'Next' button appears when moving to the next question.
- By default, grouped-view surveys display one question at a time, and a 'Next' button appears when moving to the next question.
- To hide this button:

<Steps>
Expand Down
6 changes: 3 additions & 3 deletions content/docs/en/help-center/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
A rejection field is used to stop respondents who don't qualify for the survey from continuing — responses routed to a rejection field are not saved. If you want to show a message after submission, we recommend using an ending field instead. We also recommend deleting any rejection field, or using logic settings so that it isn't connected to preceding questions.
</Accordion>

<Accordion title="What's the difference between horizontal view and vertical view?">
Horizontal view shows one question (one field group) per page, while vertical view shows all questions on a single page.
<Accordion title="What's the difference between Grouped View and Standard View?">
Grouped View shows one question (one field group) per page, while Standard View shows all questions on a single page.
</Accordion>

<Accordion title="I'd like multiple questions to appear on one page.">
In horizontal view, you can use field groups to display multiple questions together on a single screen. In vertical view, you can add `Page Break` between questions to split the page however you like.
In Grouped View, you can use field groups to display multiple questions together on a single screen. In Standard View, you can add `Page Break` between questions to split the page however you like.
</Accordion>

<Accordion title="I opened the form, but it won't move to the next question.">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
</Step>
<Step>
### Choose a view mode
Select either horizontal or vertical view first and save — the setting is applied immediately without needing to click Publish again.
Select either Grouped or Standard View first and save — the setting is applied immediately without needing to click Publish again.
</Step>
</Steps>

Expand Down
6 changes: 3 additions & 3 deletions content/docs/en/help-center/share-forms/page-breaks.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: "Page Breaks"
description: "When a vertical-view survey gets too long, page breaks let you split it up so respondents can follow along more easily."
description: "When a standard-view survey gets too long, page breaks let you split it up so respondents can follow along more easily."
---

<video src="/videos/page-break.mp4" autoPlay muted loop playsInline style={{ width: "100%", borderRadius: "8px", marginBottom: "24px" }} />

## Adding a Page Break
- Use this in vertical view (scrollable surveys) when there are a lot of questions and a single page becomes too long.
- Use this in Standard View (scrollable surveys) when there are a lot of questions and a single page becomes too long.
- Hover between the fields where you want to split, and a 'Page break' button will appear.
- Click it to insert a page break at that position.
## How Page Breaks Work
- When you share the survey in vertical view, a 'Next' button is automatically added at the bottom of the last question before each page break.
- When you share the survey in Standard View, a 'Next' button is automatically added at the bottom of the last question before each page break.
- Respondents click 'Next' to move on to the following page and continue the survey.
14 changes: 7 additions & 7 deletions content/docs/en/help-center/share-forms/sharing-your-survey.mdx
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
title: "Sharing Your Survey (URL, QR Code, Embed)"
description: "Once you've built your survey, it's time to share the URL with respondents. Walla lets you share surveys in two view styles: horizontal view and vertical view."
description: "Once you've built your survey, it's time to share the URL with respondents. Walla lets you share surveys in two view styles: Grouped View and Standard View."
---

<video src="/videos/share-qr.mp4" autoPlay muted loop playsInline style={{ width: "100%", borderRadius: "8px", marginBottom: "24px" }} />

## Horizontal View
## Grouped View

- Questions are displayed one at a time, in order.
- Respondents click the `Next` button to move to the next question.
- Great for helping respondents focus on one question at a time.
## Vertical View
## Standard View

- All questions are laid out vertically on a single page, so respondents can see everything at once.
- Good for quickly scanning the whole survey, but long surveys can lead to very long pages.
## Showing Multiple Questions on One Page

- ### Horizontal View + Field Groups
- Bundle multiple questions into a field group, and they'll appear together on the same page even in horizontal view.
- ### Grouped View + Field Groups
- Bundle multiple questions into a field group, and they'll appear together on the same page even in Grouped View.

- ### Vertical View + Page Breaks
- When sharing in vertical view, add `page breaks` to split questions into digestible sections.
- ### Standard View + Page Breaks
- When sharing in Standard View, add `page breaks` to split questions into digestible sections.
- A `Next` button appears at the bottom of each page, letting respondents move through the survey naturally.

This file was deleted.

30 changes: 12 additions & 18 deletions content/docs/ko/help-center/create-forms/grouping-fields.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,28 @@ title: 필드 그룹으로 묶기
description: 기존의 다중필드가 필드 그룹으로 변경되었어요. 필드 그룹은 여러 문항을 한 번에 묶어서 관리할 수 있는 기능이에요.
---

import { Step, Steps } from 'fumadocs-ui/components/steps';

## 필드 그룹 만들기

<Steps>
<Step>
### 필드 하단에 마우스 올리기
프로젝트 편집 화면에서 필드 하단으로 마우스를 가져가면 `추가하기` 버튼이 나타납니다. 이 버튼을 눌러 새 문항을 추가하면 자동으로 필드 그룹이 생성됩니다.
프로젝트 편집 화면에서 필드 하단으로 마우스를 가져가면 `추가하기` 버튼이 나타납니다. 이 버튼을 눌러 새 문항을 추가하면 자동으로 필드 그룹이 생성됩니다.

<img src="/images/guides/manage-forms/field-group-add-button.png" alt="필드 하단에 마우스를 올리면 표시되는 추가하기 버튼과 필드 그룹으로 묶인 1-1, 1-2 문항" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />

## 그룹명 입력하기

<img src="/images/guides/manage-forms/field-group-add-button.png" alt="필드 하단에 마우스를 올리면 표시되는 추가하기 버튼과 필드 그룹으로 묶인 1-1, 1-2 문항" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
<Step>
### 그룹 안에 문항 넣기
원하는 문항을 선택해 그룹 안에 넣을 수 있습니다.
- 필드가 2개 이상 들어있는 그룹은 그룹명을 입력할 수 있습니다.
- 입력한 그룹명을 응답자에게는 보이지 않고, 프로젝트 편집 화면에서만 확인할 수 있습니다.

<img src="/images/guides/manage-forms/field-group-new-item.png" alt="필드 그룹 1-3 위치에 새 문항이 추가되어 강조된 편집 화면" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
</Steps>
<img src="/images/guides/manage-forms/field-group-name.png" alt="그룹 상단의 그룹명 입력란과 좌측 필드 목록의 페이지 구분에 표시된 그룹명" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />

## 그룹 동작 방식

- 그룹은 단순히 문항을 묶는 역할만 하며, 각 문항별 로직은 개별적으로 적용할 수 있어요.
- 세로보기에 사용되는 `페이지 나누기`는 그룹 안에서는 사용할 수 없고, 그룹 밖의 문항에서만 페이지를 구분할 수 있습니다.
- 기본 보기에 사용되는 `페이지 나누기`는 그룹 안에서는 사용할 수 없고, 그룹 밖의 문항에서만 페이지를 구분할 수 있습니다.

## 가로보기·세로보기에서의 표시
## 기본 보기·그룹별 보기에서의 표시

- 가로보기에서는 원래 한 페이지에 한 문항씩 표시되지만, 그룹으로 묶은 문항들은 한 페이지에 함께 표시됩니다.
- 세로보기에서는 기본적으로 모든 문항이 한 페이지에 보이지만, `페이지 나누기`를 이용해 그룹의 앞뒤를 구분하면 중간에 스크롤이 나뉘어 문항을 구분해 볼 수 있어요.
- 기본 보기에서는 기본적으로 모든 문항이 한 페이지에 보이지만, `페이지 나누기`를 이용해 그룹의 앞뒤를 구분하면 중간에 스크롤이 나뉘어 문항을 구분해 볼 수 있어요.
- 그룹별 보기에서는 원래 한 페이지에 한 문항씩 표시되지만, 그룹으로 묶은 문항들은 한 페이지에 함께 표시됩니다.

<Callout title="참고">
필드 그룹을 활용하면 설문 흐름을 더 깔끔하게 구성할 수 있고, 복잡한 문항 구조를 한눈에 정리하기에 편리해요.
Expand Down
4 changes: 2 additions & 2 deletions content/docs/ko/help-center/create-forms/rejection-field.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ description: "탈락 필드는 특정 조건에 해당하는 응답을 수집하
## 배치 방법

- 탈락필드를 추가한 경우에는 **반드시 로직 설정을 해야합니다.**
- 세로보기의 경우 한 페이지에 모든 문항이 보이기 때문에 탈락 필드가 로직 없이 중간에 있으면 페이지가 열리자마자 바로 탈락될 수 있어요.
- 가로보기에서도 맨 처음에 두면 설문을 시작하자마자 탈락될 수 있습니다.
- 기본 보기의 경우 한 페이지에 모든 문항이 보이기 때문에 탈락 필드가 로직 없이 중간에 있으면 페이지가 열리자마자 바로 탈락될 수 있어요.
- 그룹별 보기에서도 맨 처음에 두면 설문을 시작하자마자 탈락될 수 있습니다.
- 아래와 같이 분기 처리가 되어 있는지 반드시 확인해주세요.

<img src="/images/guides/manage-forms/rejection-field-logic.png" alt="조건에 따라 탈락 필드로 이동하도록 설정된 로직 화면 예시" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
Expand Down
35 changes: 35 additions & 0 deletions content/docs/ko/help-center/create-forms/setting-up-logic.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,41 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
</Step>
</Steps>

## 노드 활용하여 로직 설정하기

<Steps>
<Step>
### 노드와 연결선 살펴보기
로직 화면에서는 각 문항이 노드로 표시되고, 노드 사이의 연결선으로 이동 흐름을 확인할 수 있습니다. `기본 이동`은 모든 응답자가 지나는 기본 흐름을, `로직 #1`, `로직 #2`처럼 번호가 붙은 분기는 조건에 따라 갈라지는 경로를 나타냅니다.

<img src="/images/guides/create-forms/logic-node-overview.png" alt="로직 노드 화면에서 기본 이동과 로직 #1, #2, #3 분기 연결선이 강조된 모습" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
<Step>
### 기본 이동 설정하기
노드 위의 `기본 이동` 라벨을 누르면 `다음 필드`를 선택하는 드롭다운이 열립니다. 필드를 검색하거나 목록에서 골라, 조건에 해당하지 않는 응답자가 이동할 기본 문항을 지정할 수 있습니다.

<img src="/images/guides/create-forms/logic-node-default-move.png" alt="기본 이동 노드를 눌러 다음 필드를 선택하는 드롭다운과 필드 검색 목록" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
<Step>
### 로직 노드에서 조건 편집하기
`로직 #1`, `로직 #2`처럼 번호가 붙은 분기 라벨을 누르면 조건 영역이 바로 펼쳐집니다. 기준 문항과 포함 조건, 옵션을 노드 위에서 직접 수정하거나 `새로운 조건`을 추가할 수 있습니다.

<img src="/images/guides/create-forms/logic-node-condition.png" alt="로직 #3 노드를 눌러 펼쳐진 조건 영역에서 기준 문항과 옵션을 편집하는 모습" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
<Step>
### 연결선을 눌러 바로 수정하기
필드를 선택한 뒤 노드 위의 `로직`이나 `기본 이동` 라벨을 누르지 않고, 노드 사이의 연결선만 바로 눌러도 해당 흐름을 수정할 수 있습니다.

<img src="/images/guides/create-forms/logic-node-line-edit.png" alt="노드 사이의 연결선을 눌러 로직 #1 라벨이 강조되며 흐름을 바로 수정하는 모습" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
<Step>
### 노드를 드래그해 연결하기
노드 하단의 연결점을 끌어 다른 문항 노드에 놓으면 두 문항을 직접 이어 이동 흐름을 만들 수 있습니다. 연결선을 새로 그리면 응답자가 해당 경로로 이동합니다.

<img src="/images/guides/create-forms/logic-node-connect.png" alt="노드의 연결점을 드래그해 다른 문항 노드로 연결선을 그리는 모습" style={{ width: "100%", borderRadius: "8px", marginTop: "12px", marginBottom: "12px", border: "1px solid var(--border)" }} />
</Step>
</Steps>

## 로직 활용 예시

- #### 예시 1. 개인정보 동의에 따른 분기
Expand Down
Loading
Loading