폼 템플릿 소개

[renato (Renato Atilio)]

이 기능은 더 이상 실험적이지 않습니다!

이 기능에 대해 자세히 알고 싶거나 커뮤니티에서 사용하는 방법을 확인하려면 여기를 클릭하세요: Creating form templates

Discourse Meta 커뮤니티 여러분, 안녕하세요!

새로운 실험적 기능인 **폼 템플릿(form templates)**을 소개하게 되어 기쁩니다. 이 기능을 사용하면 토픽 생성 흐름의 일부로 데이터 유효성 검사가 포함된 구조화된 폼을 적용할 수 있습니다.

기능 활성화

이 기능은 사이트 전체 실험 플래그 뒤에 숨겨져 있습니다. 활성화하려면 관리자 ▸ 설정에서 experimental_form_templates 사이트 설정을 켜면 됩니다.

템플릿 관리

폼 템플릿은 관리자 ▸ 커스터마이즈 ▸ 템플릿(/admin/customize/form-templates/)에서 생성, 편집 및 삭제할 수 있습니다.

여기서는 포럼에 존재하는 템플릿 목록이 표로 표시됩니다. 기존 템플릿을 편집, 삭제, 미리보기하거나 새 템플릿을 만들 수 있습니다. 표에는 각 템플릿이 현재 활성 상태인 카테고리도 표시됩니다.

템플릿은 YAML 구조로 정의됩니다. 직접 입력하거나 상단의 “추가” 버튼을 사용하여 특정 입력 유형을 정의하는 예제 YAML 코드 조각을 끝에 추가할 수 있습니다.

모든 필드 유형을 포함한 완전한 YAML 예제는 다음과 같습니다:

- type: input
  id: name
  attributes:
    label: "Full name"
    placeholder: "eg. John Smith"
    description: "What is your full name?"
  validations:
    required: true
    minimum: 2
    maximum: 100
- type: textarea
  id: introduction
  attributes:
    label: "Introduction"
    placeholder: "A short introduction"
    description: "Write a short introdution about yourself"
  validations:
    required: true
    minimum: 10
    maximum: 500
- type: dropdown
  id: fav-animal
  attributes:
    label: "Favorite animal"
    description: "Select your favorite animal"
    none_label: "Select an option"
  choices:
    - "Dog"
    - "Cat"
    - "Other"
  validations:
    required: true
- type: multi-select
  id: comm-channel
  attributes:
    label: "Communication channels:"
    description: "Select your preferred communication channels:"
    none_label: "Select an option"
  choices:
    - "Email"
    - "Phone"
    - "Messenger"
- type: upload
  id: cat-photo
  attributes:
    label: "Cat photo"
    description: "Send a photo of your cat (or any cat)"
    file_types: ".jpg, .png"
    allow_multiple: false
- type: checkbox
  id: accept-terms
  attributes:
    label: "I have read and I agree to the terms"
    description: "You need to accept terms to continue"
  validations:
    required: true

유효성 검사(Validations)

각 필드에 대해 폼을 생성하려면 통과해야 하는 유효성 검사 옵션을 추가할 수 있습니다. 사용 가능한 유효성 검사 목록을 보려면 코드 에디터 위 Validations 버튼을 클릭하세요. 그러면 각 유효성 검사 옵션의 문법과 의도된 사용법이 설명됩니다.

유효성 검사 옵션

Key	Type	Description
required	boolean	폼 제출을 위해 필드 입력을 필수로 합니다
minimum	integer	텍스트 필드의 경우 허용되는 최소 글자 수를 지정합니다
maximum	integer	텍스트 필드의 경우 허용되는 최대 글자 수를 지정합니다
pattern	regex string	텍스트 필드의 경우 허용되는 입력을 지정하는 정규식입니다
type	string	입력 필드의 경우 예상되는 입력 유형(text

카테고리에 템플릿 적용

폼 템플릿을 생성한 후에는 해당 템플릿을 카테고리에 적용하고 싶을 것입니다. 이렇게 하려면 템플릿을 적용하려는 카테고리의 설정으로 이동하세요.

Template 메뉴를 선택한 후 오른쪽에서 스위치를 사용하여 폼 템플릿을 켜세요. 활성화되면 드롭다운을 사용하여 카테고리에 하나 이상의 템플릿을 추가할 수 있습니다.

폼 작성

템플릿이 카테고리에 적용되면, 해당 템플릿이 있는 카테고리를 선택하여 토픽을 생성할 때 템플릿의 폼이 자동으로 표시됩니다. 카테고리에 두 개 이상의 템플릿이 할당된 경우, 사용 가능한 템플릿 간을 전환하는 선택기도 볼 수 있습니다.

폼을 작성할 때 폼 템플릿 정의에 지정된 유효성 검사를 따르며, 유효해져야만 토픽 생성을 눌러 모든 입력 필드로부터 토픽 내용을 생성할 수 있습니다.

마지막으로, 제출 후 토픽 내용은 모든 입력된 필드로 구성됩니다:

폼 값 사전 입력(Pre-filling)

폼 템플릿에 정의된 필드 ID와 일치하는 매개변수를 사용하여 /new-topic을 호출함으로써 폼 값을 사전으로 입력할 수도 있습니다. 예를 들어, 이전에 예제로 사용된 템플릿의 경우:

/new-topic?name=John%20Smith&favorite-animal=Cat

로드맵

• 토픽 생성 시 토픽 데이터에 JSON 출력을 저장
• 폼 템플릿이 있는 카테고리에서 자유 형식 작성기를 선택하여 사용할 수 있도록 하는 토글 추가

도움을 주실 수 있는 방법

이 새로운 기능에 대한 여러분의 피드백을 듣고 싶습니다. 관리자이시며 포럼에서 시도해 보고 싶으시다면 experimental_form_templates 설정을 켜고 바로 사용하실 수 있습니다!

경험을 공유하거나 버그를 보고하거나 제안을 제공하기 위해 form-templates 태그가 붙은 새 토픽을 시작해 주세요.

Discourse를 더 좋게 만드는 데 도움을 주셔서 감사합니다!

[packman (Chris McMahon)]

This looks very useful and I’ll definitely be enabling it to experiment.

One thing I’d find useful is the ability to link a template field to a user custom field. For example, in a support category the first couple of questions usually asked by the support guys are “Model of equipment” and the associated “Web site URL”. With this template feature I can now ask for this info as ech new topic is created

These two bits of info are also generally of interest to other users so they’re defined as custom user fields - which sometimes get filled in. If template fields could be populated from a linked custom user field (if it has a value in it) then for frequent flyers they can fill in their user fields and not have to fill in the template fields in every time. Occasional flyers can just fill in the template fields as and when they need support.

As a further suggestion, the icing on the cake would be for the link to work in reverse. If someone enters data onto the template that’s not in the linked custom user field then the custom field is updated when the topic is posted.

[Don]

Hello

This is one of the best improvement. It gives so many opportunities.

Some notes:

1. It seems the form_templates.errors.valueMissing.number is a missing string.

2. It seems the tel validation is not working.

3. On mobile the form template in composer is not scrollable.

4. On mobile when the form template is available the footer buttons doesn’t do anything. I think it would be good to hide these.
   

+ Would be useful to add validation to prevents negative numbers to number type. Use case (price)

+ Would be also useful to add dynamic conditional fields feature.

---

Thanks

[Simon_Manning]

As already mentioned, this will be very handy for support contexts and I particularly like the suggestions from @packman regarding custom user fields.

Is adding form templates to groups also on the roadmap (or could it be)? Where messaging a group is used for private support, this will be especially useful for front-loading questions before a member of staff arrives.

---

@packman

If someone enters data onto the template that’s not in the linked custom user field then the custom field is updated when the topic is posted.

Depending on the visibility of the custom field, this could have privacy implications. For example, the user might choose to share the information via a form template in a private category but not want to share that information with the wider community via their profile.

Depending on the nature of the information, it might also have one value that is appropriate for their profile and/or most forms but they might want to provide a different value in a particular instance.

I like the idea of filling in the form from those fields and being able to update the fields if the entered values differ but perhaps that should be a prompt. This is a really quick and dirty mock-up but maybe something along these lines after creating the topic (only if a value differs and possibly only if non-empty):

[pgr]

My feature request for this great new feature, is, I believe, common in software support forums.

People neglect to specify their version of the software. That’s it. Simple, but it is the cause of many, many useless back-and-forth posts that are tiresome to the people who help out a lot of people (and we don’t want to tire the most important people in the Community).

So I would want a form to ask

• Your FabulousApp version is… (dropdown with options)
• Your PHP version is… (dropdown with options)

Now, suppose that someone posts frequently on the forums. This information does not change frequently, although it might change say, once a month.

The form should keep that values that this same user selected in their previous post, as defaults, that’s my feature request right there. What do you think?

[Canapin (Coin-coin le Canapin)]

I think that in some cases, having a pre-filled field may lead to users overlooking it and not changing the value when it’s needed.

Purely speculating, though.

[Simon_Manning]

@pgr

So I would want a form to ask

• Your FabulousApp version is… (dropdown with options)

@Don

+ Would be also useful to add dynamic conditional fields feature.

These two combined is what I would like to see for my use case. With multiple apps, I want the user to be able to select their app, then select their version from a list that corresponds to that app.

@Canapin

I think that in some cases, having a pre-filled field may lead to users overlooking it and not changing the value when it’s needed.

This is certainly my experience for choices. With a default value on an email contact form, the vast majority of submissions have that default value regardless of which app or version they’re actually using.

[packman (Chris McMahon)]

@Simon_Manning

the vast majority of submissions have that default value

That’s probably true for default values but in what I envisaged the field values would be those previously entered by the user in their custom fields. These could be old/outdated but I think in my use case there would be far fewer wrong values than there are currently no values.

[Simon_Manning]

@packman

These could be old/outdated but I think in my use case there would be far fewer wrong values than there are currently no values.

Absolutely. To my mind these are mostly two different categories of information: state at a point in time and user preference/identity/etc. What I was referring to with my experience of default values was more about the former.

[huh.how (Thomas Ingram)]

Two requests!

1. A code field that automatically fences the content with ```
   • It could have a language dropdown, with a default.
2. An attribute that allows users to duplicate a field (I picture a + button below that field).
   • Imagine if a user wants to post two codeblocks, or multiple images. They can input one, click the + and add another.

[tomve (Tom)]

This is a great new feature, and potentially well timed for a project I’m working on.

After playing about with it briefly I have two questions:

1. Currently when the user edits a topic post they have created through a form template it just shows the default post editor.
   Are there plans to also show the form template editor when editing a post?

2. Will there be an option to add custom input types?
   I’m thinking about a map where a user can select their location by dropping a pin on the map. So it would be good to have the option to define such custom field types.

[jerlendds]

This is perfect timing for my use case! I’m wondering if there’s plans to eventually allow customization for how a form template ends up being rendered in a topic.

e.g. In the following image the checkbox field type is rendered as the text on:

Would someone eventually be able to map the form field types to customized output?

e.g. In my case I want a checked/on checkbox to map to the checkbox formatting, [x], and the lack of a check/off state to []

I might have to start learning ruby and hacking around on this project, this form update has given me lots of neat ideas. Thanks for the great work guys!

[iamntz (Ionuț Staicu)]

This is absolute great way to enforce some behaviour in a particular category (my painpoint was job posting, where everyone posted however they feel like )!

A bunch of features extra would be nice:

• the ability to „switch to no template” (optional). This would be nice to be limited by users, by level, by group etc; Some kind of „trust me bro, I know what I’m doing!”
• multiple fields on the same row (think first name + last name). A good enough fix would be to allow admins to set a class name for the form template;
• a repeater (i.e. group a bunch of fields and let users to add more of those);

[huh.how (Thomas Ingram)]

It would be good to have the ability to:

• Paste content into an Upload field^[1].
• Add a composer in addition to the textarea, where users have access to the normal suite of features.^[2]

---

1. The upload functionality in Discourse posts is great. This one’s more difficult to use, requiring images already be saved to disk for example. ↩︎

2. If I want a user to select a dropdown in addition to a post, with the current approach (a textarea) I dramatically decrease their ability to create their post normally; no pasting images, no edit bar, etc. ↩︎

[Arkshine]

I tried the form here to report a bug about the theme. Here is my feedback:

• The form itself is a great idea
• No formatting tool is a big miss.
  • Even if markdown syntax is basic, selecting and using the toolbar is often easier/faster. It helps in making a readable message.
  • This can work if the report is a simple but advanced issue; you might need to hide details or insert a table.
• No inline upload is not convenient.
  • E.g., showing a problem step by step, before/after results, etc.
  • In case of multiple screenshots, you must explain what screenshots you should look at.
• Same as Thomas, pasting an image would be welcomed. It took me some time to figure out where my screenshots were saved.
• Conditional input – when selecting “other,” it would be nice to have an input appearing for that.

Overall, really nice! I’m looking forward to how it will be improved.

[Truong_Jennifer]

If you have multiple forms enabled for a single category, it isn’t intuitive that there is a dropdown for you to select a form. When you create a new topic, it automatically populates the first form template, which again, if you don’t know what you’re looking at, then you wouldn’t realize there could be other forms.

When you deselect the form, you do see the text “Select form templates” which is clear to me that there is a list of form(s) that I choose from. The composer still shows the form even though one is not selected. This is where I would second, @iamntz about having the option to switch to no template.

[Truong_Jennifer]

Just want to add on to my previous reply and to give a bit more context to our specific use case. We’re looking to implement this in our Site Feedback category. Ideally, we want form templates for things like requesting tags, and keep the default composer (no template option), if the form does not exist or won’t do the job properly.

So, what we’re envisioning would be to create new topic in category and see this:

From there, see “Select form templates”, where from there you can either compose normally or see that form(s) do exist in this category for standardized requests/feedback.

I can see the argument that some users won’t see or use the form template, if they can compose, but I was trying to stay within the current styling with the placeholder text within the field instead of a label outside of the field. But that’s why it could be an optional feature where the admins enable/disable it.

[sunjam (james.network)]

@Truong_Jennifer

I can see the argument that some users won’t see or use the form template

If the selection button was clearly highlighted it would be much easier to encourage users to click it, similar to your Create Topic button

[Truong_Jennifer]

After playing around with the forms more, we discovered a workaround for a “no template” option would be to create a simple “free response” form that can serve as a no template (as seen in the screenshot below).

@sunjam

If the selection button was clearly highlighted it would be much easier to encourage users to click it, similar to your Create Topic button

Adding to this idea, if we didn’t want to change the color to highlight the dropdown, I think adding a down arrow would be a helpful indicator that there is a drop-down selection, just like the categories drop-down.

We discovered that the forms are ordered alphabetically. It would be amazing to have the option to reorder the forms or the option to select the default form that should appear when creating a new topic.

Needless to say, we like what this feature has to offer, and would be excited for such enhancements to it.

[Tris20 (Tristan)]

Perhaps I’ve missed it, but is there any way to have a hyperlink in a form? For example, say we had a checkbox for the terms and conditions. In the description it would be useful to have a hyperlink to the actual terms and conditions.

Is this already possible?

Is there also any way to automatically populate the title field when the user creates a new post, such as with their username, or even just some default title?