# 주제를 생성할 때 사용자가 양식을 작성하도록 할 수 있나요?

**URL:** https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378
**Category:** Feature
**Tags:** completed
**Created:** [8월 28, 2020, 7:08오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378 "2020-08-28T19:08:29Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [8월 28, 2020, 7:08오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/1 "2020-08-28T19:08:29Z")

</div>

토픽을 생성할 때 사용자가 양식을 작성하도록 할 수 있을까요? (즉, 토픽 생성 창을 열면 토픽 안에 사용자가 채워야 하는 양식이 표시되도록 하는 것입니다)

카테고리를 생성할 때 토픽 템플릿을 사용하면 사용자가 입력해야 할 항목에 대한 안내 문구를 넣을 수 있습니다. 하지만 이것은 양식과는 다릅니다. 안내 문구는 삭제할 수 있으므로(초보 사용자는 어떻게 해야 할지 모를 수 있습니다), 같은 페이지에 여러 개의 안내 문구가 있으면 화면이 혼잡해집니다.

토픽 생성 시 사용자가 몇 가지 핵심 정보만 입력하도록 하고 싶다면, 양식이 더 깔끔하고 단순한 사용자 경험을 제공합니다.

이것이 가능한가요? 이 [테마 컴포넌트](https://meta.discourse.org/t/discourse-placeholder-forms-theme-component/113533/30)를 찾았지만, 정확히 어떤 기능을 하는지는 아직 모르지만 제가 원하는 것을 달성하지 못할 것 같습니다. 몇 년 전 이 [요청](https://meta.discourse.org/t/visual-form-entry-topic-templates/47677)도 보았는데, 조치된 것 같지 않습니다.

또한, Custom Wizard 플러그인이 사용자가 작성할 양식을 만들 수 있다는 것은 알고 있지만, 이 경우 양식이 Discourse 토픽 내부에 있어야 합니다(태깅, 답변 등 관련 기능과 함께 토픽으로 표시되도록 하기 위함입니다). 그리고 사용자 경험이 명확하게 앱 내에서 유지되어야 합니다(Custom Wizard 플러그인은 다른 메뉴 등이 있는 별도 페이지로 이동시킨다고 생각합니다)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8월 31, 2020, 2:28오전 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/2 "2020-08-31T02:28:44Z")

</div>

이러한 기능은 테마 컴포넌트에서 기술적으로 충분히 가능합니다.

---

<div class="post-metadata">

### Author: ![rizka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rizka/32/79717_2.png) [@rizka](https://meta.discourse.org/u/rizka)
#### Post date: [8월 31, 2020, 10:38오전 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/3 "2020-08-31T10:38:31Z")

</div>

관심 있는 분들을 위해 매우 관련이 있는 오래된 주제입니다:

> [@Visual form entry topic templates?](https://meta.discourse.org/t/visual-form-entry-topic-templates/47677):
>
> Topic templates are a great feature of Discourse. The Markdown however, makes them visually non-appealing and even difficult to understand for a non-tech user. \*\*Movie title:\*\* Enter movie title here \*\*IMDB link\*\* Copy paste link here http://imdb.com/... \*\*Comments on the movie:\*\* Type here your comments and observations of the movie \*\*Movie rating\*\* [poll type=number min=0 max=10][/poll] Here is an imaginary example for a movies community. It would be great if templates were like web form…

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [8월 31, 2020, 12:01오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/4 "2020-08-31T12:01:25Z")

</div>

감사합니다.

> [@sam](#):
>
> 이러한 기능은 테마 컴포넌트에서 기술적으로 확실히 가능합니다.

어떻게 작동할 수 있을지 어떻게 생각하시나요?

아직 해결해야 할 질문이 남아있지만, 제가 가진 몇 가지 아이디어를 공유합니다:

> **현재 존재하는 기본 요소: 플레이스홀더. 하지만 지금은 '전체 또는 아무것도 아닌(all or nothing)' 방식입니다**
>
> 폼 동작을 모방하기 위해 제가 떠올릴 수 있는 가장 단순한 구조는 편집기에서 "폼"이 표시되는 방식입니다. (즉, `create topic`을 누르면 나타나는 "d-editor"입니다.)
> 
> 이 편집기에서 다음과 같은 다른 "섹션"을 제공할 수 있습니다:
> 
> 이름
> 
> * * *
> 
> 위치
> 
> * * *
> 
> 문제
> 
> * * *
> 
> 각 섹션 제목은 플레이스홀더가 되어야 하므로, 사용자가 제목(예: 이름)을 클릭하면 해당 제목이 사라집니다.
> 
> 지금까지 이 설정은 [플레이스홀더 텍스트 테마 컴포넌트](https://meta.discourse.org/t/topic-template-placeholder-text-theme-component/149053/47)를 통해 가능합니다.
> 
> 하지만–폼과 유사한 동작을 완전히 구현하기에는 다소 부족합니다. 왜냐하면 현재 존재하는 플레이스홀더들은 다음에 설명하듯이 “전체 또는 아무것도 아닌(all or nothing)” 방식으로 나타나기 때문입니다.

* * *

> **플레이스홀더를 사용한 폼과 유사한 동작. 하지만 편집기에서 div에 어떻게 접근하나요?**
>
> 이것을 더 폼처럼 보이게 하려면 각 섹션이 독립적으로 작동해야 합니다.
> 
> 현재 플레이스홀더 텍스트 테마 컴포넌트를 사용하면 ‘전체 또는 아무것도 아닌(all or nothing)’ 방식입니다–사용자가 편집기를 클릭하면 모든 플레이스홀더 제목이 사라집니다.
> 
> 따라서 기본적인 폼 동작을 위해, 모든 제목이 나타나거나 사라지는 대신 각 플레이스홀더 제목 섹션이 독립적으로 작동해야 합니다. 즉, 사용자가 플레이스홀더 "이름"을 클릭하면 해당 플레이스홀더만 사라지고, 다른 플레이스홀더("위치"와 “문제”)는 그대로 유지되어야 합니다.
> 
> 이것은 각 플레이스홀더가 텍스트 편집기 내에서 고유한 id를 가진 자신의 div의 일부가 될 수 있다면 가능합니다. 그런 다음 jquery를 사용하여 사용자가 해당 영역을 클릭했는지 여부에 따라 플레이스홀더를 표시하거나 숨길 수 있습니다. 이것은 현재 textarea 내에 별도의 div를 추가해야 하는데, 어떻게 해야 할지 확실하지 않습니다.
> 
> _ **이 접근 방식에 대한 질문: 사용자가 클릭했을 때 조치를 취할 수 있도록 편집기의 textarea 내부의 div에 어떻게 접근할 수 있나요?** _

* * *

> **대안: 기존 템플릿 텍스트 옵션 사용. 하지만 텍스트를 편집 불가능하게 만드는 방법은?**
>
> 대안으로, 사용자가 클릭할 때 섹션 헤더가 “사라지지” 않는 방식일 수 있습니다. 즉, 섹션 헤더(예: 이름, 위치, 문제)는 페이지에 남아 있는 텍스트가 됩니다. 현재 기본 주제 템플릿 기본값과 비교하여 더 폼처럼 보이게 하려면:
> 
> 1. 섹션 헤더 텍스트는 사용자가 편집할 수 없어야 합니다 (즉, `contenteditable="false"`)
> 2. 섹션 구분점은 사용자가 제거할 수 없어야 합니다
> 3. 섹션 헤더 아래에 사용자가 입력할 수 있는 명확한 공간이 있어야 합니다. 현재 기본 템플릿에서는 텍스트가 있는 위치로 가서 `return`을 눌러 입력 공간을 만들어야 합니다.
> 
> _**이 접근 방식에 대한 질문: 템플릿 텍스트를 입력하되 (i) 사용자가 그 텍스트를 편집할 수 없게 하고 (ii) 각 텍스트 아래에 사용자가 정보를 입력할 명확한 장소를 만드는 방법은 무엇인가요?**_

* * *

아마도 폼과 유사한 동작을 얻는 더 나은 방법이 있을 수 있습니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [9월 4, 2020, 3:55오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/5 "2020-09-04T15:55:50Z")

</div>

> [@JQ331](#):
>
> 이 방식에 대한 질문입니다: 템플릿 텍스트를 입력하되, (i) 사용자가 해당 텍스트를 편집할 수 없도록 하고 (ii) 각 텍스트 아래에 사용자가 정보를 입력할 명확한 장소를 마련하는 방법은 무엇인가요?

대단히도 단일한 텍스트 영역 대신 더 복잡한 입력 필드 세트를 렌더링하기 전에 템플릿에 대한 패스(pass)를 수행해야 할 것입니다.

그런 다음 후처리(post process)를 통해 텍스트를 올바른 위치에 삽입해야 합니다.

제목/텍스트 입력 지점을 식별하기 위한 어떤 마크업 표준이 필요할 것입니다 …

모든 것이 프론트엔드 영역에 유지되므로(결국 모든 것이 단일 텍스트 포스트로 저장됩니다) 더 가벼운 솔루션이 될 수 있습니다.

다만, 이 방식의 주요 단점은 검색 및 집계(aggregation)가 훨씬 더 어려워진다는 점입니다 …

재미있는 프로젝트가 될 것 같습니다 🙂

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [9월 4, 2020, 4:47오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/6 "2020-09-04T16:47:43Z")

</div>

> [@merefield](#):
>
> 모든 것이 프론트엔드 영역에서 처리되므로, 더 가벼운 솔루션이 될 수 있습니다.

현재로서는 프론트엔드에 머물러 있는 것을 찾고 있습니다. 이 시점에서는 그리고 대부분의 사용 사례에서 양식의 다른 부분을 파싱하거나 검색할 필요는 없습니다. 이는 사용자가 일관된 방식으로 응답을 입력하도록 하는 것에 관한 것입니다.

다음의 의미에 대해 이해하지 못하겠습니다:

> [@merefield](#):
>
> 그런 다음 템플릿에 대한 패스(pass)를 수행해야 할 것입니다.

> [@merefield](#):
>
> 그 후 후처리(post-process)를 해야 합니다.

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [3월 12, 2021, 12:51오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/7 "2021-03-12T12:51:48Z")

</div>

이 문제를 다시 살펴보고 싶습니다. 프론트엔드에서 사용자가 (사용자에게는) 양식처럼 보이는 내용을 입력할 수 있는 방법이 있는지 궁금합니다. 예를 들어, 사용자가 주제를 생성할 때 다음과 같은 것을 보게 됩니다:

“이름”

* * *

“위치”

* * *

“문제”

* * *

이 모든 것은 프론트엔드에 그대로 두면 됩니다. 사용자가 제출하는 내용에서 서로 다른 섹션을 파싱할 필요는 없습니다(있으면 좋겠지만, 지금은 필요하지 않습니다). 현재와 마찬가지로 모든 것을 제출할 수 있습니다. 목표는 사용자가 더 균일하게 제출하도록 하고, 서로 다른 프롬프트가 있을 때 사용자에게 깔끔한 UI를 제공하는 것입니다.

> **현재 주제를 템플릿을 추가하여 사용할 수 있는 것과 이 방식의 차이점:**
>
> 1. 사용자가 이러한 프롬프트를 삭제할 수 없습니다(예: “이름”, “위치”, "문제"를 삭제할 수 없음).
> 
> 2. 이상적으로는 양식과 같은 스타일링을 추가하여 사용자가 어디에 입력해야 하는지 더 명확하게 보여줄 수 있으면 좋겠습니다. 서로 다른 프롬프트가 있는 경우 주제를 생성하는 사용자에게 더 깔끔한 UI를 제공하기 위함입니다. 주제 템플릿을 사용하는 경우, 사용자는 각 프롬프트에 대한 응답을 입력하기 위해 자신의 공간을 직접 만들어야 합니다. 또한, 현재 주제 템플릿을 사용할 때 서로 다른 프롬프트가 여러 개 있으면 주제 생성 창이 꽤 혼잡해 보입니다.

@sam은 이전에 다음과 같이 답변했습니다:

> [@sam](#):
>
> 이러한 것은 기술적으로 테마 컴포넌트에서 가능합니다.

실제로 이것이 가능해야 할 것 같습니다. 제 가장 큰 문제점: 테마 컴포넌트(또는 플러그인)에서 주제 생성 창 안에 표시되는 내용을 어떻게 변경합니까? 현재 제가 시도해 본 결과, iframe 블랙박스처럼 보입니다.

주제 템플릿이 하는 일과 [placeholder 플러그인](https://meta.discourse.org/t/topic-template-placeholder-text-theme-component/149053)이 하는 일을 고려할 때, 거기에 접근하는 방법이 있을 것 같습니다. 하지만 그들이 어떻게 하는지 파악하지 못했습니다.

주제 생성 창 안에 있는 것을 변경하기 위해 코드로 할 수 있는 일에 대한 팁이 있을까요?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [3월 12, 2021, 1:12오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/8 "2021-03-12T13:12:29Z")

</div>

[디스커스 테마 개발자 가이드](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)를 확인해 보세요. 거기서 시작하면 됩니다.

사용자 이름과 위치를 말씀하시는 거라면, 사용자 프로필에 이미 포함되어 있으므로 굳이 필요하지 않을 수도 있습니다.

---

<div class="post-metadata">

### Author: ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)
#### Post date: [3월 12, 2021, 1:29오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/9 "2021-03-12T13:29:56Z")

</div>

답변해 주셔서 감사합니다. 테마와 플러그인 개발 방법은 잘 알고 있습니다. 제가 여기에서 찾고 있는 것은 주제 생성 폼의 I-frame에 접근하기 위한 구체적인 코드에 대한 안내입니다. 모든 것을 상세히 알려달라는 것은 아니지만, 어떤 형태의 안내라도 감사하겠습니다. 이전에 그 폼에 변경 사항을 적용하는 방법을 찾는 데 어려움을 겪었습니다.

이름, 위치 등을 예로 든 것은 일반적인 폼에 대한 가상의 사례일 뿐입니다. 제 경우엔 다른 프롬프트가 필요합니다.

---

<div class="post-metadata">

### Author: ![Fares\_Droubi1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fares_droubi1/32/193803_2.png) [@Fares\_Droubi1](https://meta.discourse.org/u/Fares_Droubi1)
#### Post date: [9월 14, 2022, 3:53오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/11 "2022-09-14T15:53:33Z")

</div>

토픽 생성 시 사용자가 입력하도록 유도하는 폼 형태의 솔루션에도 관심이 있습니다. 일부 필드를 필수로 설정할 수 있는 옵션이 있으면 좋겠습니다. 이 데이터 중 일부는 민감할 수 있으므로, 토픽의 사용자 정의 필드에 저장하고 싶습니다.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [10월 16, 2023, 7:13오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/12 "2023-10-16T19:13:34Z")

</div>

[Introducing Form Templates](https://meta.discourse.org/t/introducing-experimental-form-templates/278631?u=falco%EB%A5%BC) 확인해 보세요.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [10월 16, 2023, 7:13오후 UTC](https://meta.discourse.org/t/have-users-complete-form-when-creating-a-topic/162378/13 "2023-10-16T19:13:38Z")

</div>


