実験的フォームテンプレートを紹介します

renato · 2023 年 10 月 16 日午後 3:28

こんにちは、Discourse Metaコミュニティ！

新しい実験的な機能、フォームテンプレートをご紹介できることを嬉しく思います。これを使用すると、トピック作成フローの一部として、データ検証を含む構造化されたフォームを強制できます。

multiple_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

検証

各フィールドには、フォームを送信する前に合格する必要がある検証オプションを追加できます。利用可能な検証のリストについては、コードエディターの上にある「検証」ボタンをクリックしてください。これにより、各検証オプションの構文が表示され、その意図された使用方法が説明されます。

検証オプション

キー	タイプ	説明
required	boolean	フォームを送信するにはフィールドを完了する必要があります
minimum	integer	テキストフィールドの場合、許可される最小文字数を指定します
maximum	integer	テキストフィールドの場合、許可される最大文字数を指定します
pattern	regex string	テキストフィールドの場合、許可される入力を指定する正規表現
type	string	入力フィールドの場合、期待される入力のタイプを指定できます（text\|email\|date\|number\|url\|tel\|color）

カテゴリへのテンプレートの適用

フォームテンプレートを作成したら、それをカテゴリに適用したくなります。これを行うには、テンプレートを適用したいカテゴリの設定に移動します。

「テンプレート」メニューを選択し、右側にあるスイッチを使用してフォームテンプレートをオンにします。有効になったら、ドロップダウンを使用して1つ以上のテンプレートをカテゴリに追加できます。

フォームへの入力

テンプレートがカテゴリに適用されると、テンプレートが適用されているカテゴリを選択してトピックを作成する際に、テンプレートのフォームが自動的に表示されます。カテゴリに複数のテンプレートが割り当てられている場合は、利用可能なテンプレートを切り替えるためのピッカーも表示されます。

フォームに入力する際、フォームテンプレート定義で指定された検証に従い、有効になった後にのみ「トピックを作成」をクリックでき、すべての入力フィールドからトピックコンテンツが生成されます。

最後に、送信後、トピックコンテンツはすべての入力済みフィールドで構成されます。

フォーム値の事前入力

フォームテンプレートで定義されたフィールドIDに一致するパラメータを使用して /new-topic を呼び出すことでも、フォーム値を事前入力できます。たとえば、以前の例として使用されたテンプレートの場合：

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

ロードマップ

トピックが作成されたときにJSON出力をトピックデータに保存する
フォームテンプレートが設定されたカテゴリで、自由形式のコンポーザーを選択して使用できるようにするトグル

協力方法

この新機能に関するフィードバックをお待ちしています。管理者の場合は、フォーラムで試してみたい場合は、experimental_form_templates 設定をオンにして、すぐに使用を開始できます！

経験を共有したり、バグを報告したり、提案を提供したりするために、form-templates タグを付けて新しいトピックを開始してください。

Discourseをより良くするためにご協力いただきありがとうございます！

packman · 2023 年 10 月 16 日午後 7:06

これは非常に便利そうで、実験のために必ず有効にします。

便利な機能として、テンプレートフィールドをユーザーカスタムフィールドにリンクする機能があればと思います。例えば、サポートカテゴリでは、サポート担当者が最初に尋ねる質問は通常、「機器のモデル」と関連する「WebサイトのURL」です。このテンプレート機能を使えば、新しいトピックが作成されるたびに、これらの情報を尋ねることができます

これらの2つの情報は、他のユーザーにとっても一般的に関心のある情報なので、カスタムユーザーフィールドとして定義されており、時には入力されています。テンプレートフィールドをリンクされたカスタムユーザーフィールド（値が入っている場合）から入力できれば、頻繁に利用するユーザーは自分のユーザーフィールドに入力しておけば、毎回テンプレートフィールドに入力する必要がなくなります。たまに利用するユーザーは、必要に応じてテンプレートフィールドに入力するだけで済みます。

さらに提案するとすれば、リンクが逆方向に機能することです。誰かがテンプレートに入力したデータが、リンクされたカスタムユーザーフィールドにない場合、トピックが投稿されたときにカスタムフィールドが更新されると、まさに「 icing on the cake 」（さらに素晴らしいこと）になります。

Don · 2023 年 10 月 17 日午前 6:10

こんにちは

これは最高の改善の1つです。多くの機会を与えてくれます。

いくつか注意点があります。

form_templates.errors.valueMissing.number は文字列が見当たらないようです。
tel の検証が機能していないようです。
モバイルでは、コンポーザーのフォームテンプレートはスクロールできません。
モバイルでは、フォームテンプレートが利用可能な場合、フッターボタンは何も機能しません。これらを非表示にするのが良いと思います。

\+ number 型に負の数を入力できないように検証を追加すると便利です。(ユースケース: 価格)

\+ 動的な条件付きフィールド機能を追加することも便利でしょう。

ありがとうございます

Simon_Manning · 2023 年 10 月 17 日午後 1:27

すでに述べたように、これはサポートのコンテキストで非常に便利であり、特に @packman によるカスタムユーザーフィールドの提案が気に入っています。

グループにフォームテンプレートを追加することもロードマップにありますか（または可能ですか）？グループへのメッセージングがプライベートサポートに使用される場合、これは、スタッフが到着する前に質問を前もって読み込むのに特に役立ちます。

カスタムフィールドの可視性によっては、プライバシーに関する影響がある可能性があります。たとえば、ユーザーはプライベートカテゴリのフォームテンプレートを介して情報を共有することを選択できますが、その情報をプロファイルを通じてより広いコミュニティと共有したくない場合があります。

情報の性質によっては、プロファイルやほとんどのフォームに適した値が1つありますが、特定のインスタンスで異なる値を提供したい場合があります。

フォームをこれらのフィールドから入力し、入力された値が異なる場合にフィールドを更新できるというアイデアは気に入っていますが、おそらくそれはプロンプトになるでしょう。これは非常に迅速かつ簡単なモックアップですが、トピックを作成した後（値が異なり、おそらく空でない場合のみ）に、これらの線のいずれかに沿ったものになるかもしれません。

pgr · 2023 年 10 月 17 日午後 2:50

この素晴らしい新機能に関する私の機能リクエストは、ソフトウェアサポートフォーラムでよくあることだと信じています。

人々はソフトウェアのバージョンを指定することを怠ります。それだけです。単純ですが、多くの、多くの無駄なやり取りの原因となり、多くの人を助けている人々（コミュニティの最も重要な人々を疲れさせたくありません）にとってうんざりするものです。

そこで、フォームで次のように尋ねたいと思います。

あなたのFabulousAppのバージョンは…（オプションのドロップダウン）
あなたのPHPのバージョンは…（オプションのドロップダウン）

さて、誰かがフォーラムで頻繁に投稿していると仮定しましょう。この情報は、たとえば月に一度変更されるかもしれませんが、頻繁には変更されません。

**フォームは、同じユーザーが以前の投稿で選択した値をデフォルトとして保持する必要があります。**それが私の機能リクエストです。どう思いますか？

Canapin · 2023 年 10 月 17 日午後 3:07

場合によっては、事前入力されたフィールドがあると、ユーザーが見落としてしまい、必要な場合に値を変更しない可能性があると思います。

あくまで推測ですが。

Simon_Manning · 2023 年 10 月 17 日午後 3:23

これら2つを組み合わせたものが、私のユースケースで実現したいことです。複数のアプリがある場合、ユーザーがアプリを選択し、そのアプリに対応するリストからバージョンを選択できるようにしたいのです。

これは確かに選択肢に関する私の経験です。メール連絡フォームのデフォルト値では、どのアプリやバージョンを使用していても、提出されたものの大多数がそのデフォルト値を持っています。

packman · 2023 年 10 月 17 日午後 3:29

デフォルト値についてはおそらくそうでしょうが、私が想定していたものとしては、フィールド値はユーザーがカスタムフィールドに以前入力した値になります。これらは古い/時代遅れである可能性がありますが、私のユースケースでは、現在値がない場合よりも間違った値がはるかに少なくなると思います。

Simon_Manning · 2023 年 10 月 17 日午後 4:01

まったくその通りです。私の考えでは、これらは主に情報の2つの異なるカテゴリです。ある時点の状態と、ユーザーの好み/アイデンティティなどです。デフォルト値に関する私の経験は、主に前者に関するものでした。

huh.how · 2023 年 10 月 19 日午前 2:09

2つのリクエストがあります！

コンテンツを ``` で自動的に囲むコードフィールド
- 言語のドロップダウンがあり、デフォルト設定も可能です。
ユーザーがフィールドを複製できるようにする属性（そのフィールドの下に + ボタンを配置することを想定しています）。
- ユーザーが2つのコードブロックや複数の画像を投稿したい場合を想像してみてください。1つ入力し、+ をクリックしてもう1つ追加できます。

tomve · 2023 年 10 月 24 日午後 4:06

これは素晴らしい新機能であり、私が取り組んでいるプロジェクトにとってタイミングも良い可能性があります。

簡単に試した後、2つの質問があります。

現在、ユーザーがフォームテンプレートを通じて作成したトピック投稿を編集すると、デフォルトの投稿エディターが表示されます。
投稿を編集する際にもフォームテンプレートエディターを表示する予定はありますか？
カスタム入力タイプを追加するオプションはありますか？
ユーザーが地図上にピンをドロップして場所を選択できる地図を考えています。したがって、そのようなカスタムフィールドタイプを定義するオプションがあると良いでしょう。

jerlendds · 2023 年 11 月 2 日午前 1:27

これは私のユースケースにぴったりです！トピックでフォームテンプレートが最終的にどのようにレンダリングされるかをカスタマイズできるようにする計画はありますか？

例えば、次の画像では checkbox フィールドタイプがテキスト on としてレンダリングされています。

将来的には、フォームフィールドタイプをカスタマイズされた出力にマッピングできるようになるでしょうか？

例えば、私の場合は、チェックされた/on のチェックボックスをチェックボックスのフォーマット [x] に、チェックされていない/オフの状態を [] にマッピングしたいです。

Rubyを学び始めて、このプロジェクトでハッキングを始める必要があるかもしれません。このフォームのアップデートは、たくさんの素晴らしいアイデアを与えてくれました。素晴らしい仕事をしてくれてありがとう！

iamntz · 2023 年 11 月 2 日午前 7:21

これは、特定のカテゴリ（私のペインポイントは求人投稿で、誰もが好きなように投稿していました）で特定の動作を強制するための絶対的に素晴らしい方法です！

追加でいくつかの機能があると嬉しいです：

「テンプレートなしに切り替える」機能（オプション）。これは、ユーザー、レベル、グループなどによって制限できると良いでしょう。「私を信じて、私は何をしているか分かっています！」のようなものです。
同じ行に複数のフィールド（例：名 + 姓）。十分な修正としては、管理者がフォームテンプレートのクラス名を設定できるようにすることです。
リピーター（つまり、フィールドのグループ化と、ユーザーがそれらをさらに追加できるようにすること）。

huh.how · 2023 年 11 月 6 日午前 4:25

以下のような機能があると良いでしょう。

アップロードフィールドにコンテンツを貼り付けられるようにする^[1]。
テキストエリアに加えて、通常の機能スイートにアクセスできるコンポーザーを追加する^[2]。

Discourseの投稿におけるアップロード機能は素晴らしいです。こちらは、例えば画像がすでにディスクに保存されている必要があるなど、使用がより困難です。 ↩︎
投稿に加えてユーザーがドロップダウンを選択するようにしたい場合、現在の（テキストエリアの）アプローチでは、画像を貼り付けたり、編集バーを使用したりできないなど、ユーザーが通常通り投稿を作成できる能力を劇的に低下させます。 ↩︎

Arkshine · 2023 年 11 月 9 日午後 1:42

フィードバックを共有するために、こちらでバグ報告フォームを試しました。以下にフィードバックを記載します。

フォーム自体は素晴らしいアイデアです
書式設定ツールがないのは大きな欠点です。
- マークダウン構文は基本的であっても、ツールバーを選択して使用する方が簡単/速い場合が多いです。これにより、読みやすいメッセージを作成できます。
- これは、レポートが単純だが高度な問題である場合に機能しますが、詳細を非表示にしたり、テーブルを挿入したりする必要がある場合があります。
インラインアップロードがないのは不便です。
- 問題をステップバイステップで表示したり、結果の前後の比較を示したりする場合など。
- 複数のスクリーンショットがある場合、どのスクリーンショットを確認すべきかを説明する必要があります。
- トーマスと同じように、画像を貼り付けることができればありがたいです。スクリーンショットがどこに保存されたかを理解するのに時間がかかりました。
条件付き入力 – 「その他」を選択した場合、入力フィールドが表示されると良いでしょう。

全体的に、とても良いです！どのように改善されていくか楽しみにしています。

Truong_Jennifer · 2023 年 11 月 29 日午後 4:47

1つのカテゴリで複数のフォームが有効になっている場合、フォームを選択するためのドロップダウンがあることが直感的ではありません。新しいトピックを作成すると、最初のフォームテンプレートが自動的に入力されます。これも、何を見ているのかわからない場合は、他のフォームが存在する可能性があることに気づかないでしょう。

フォームの選択を解除すると、「フォームテンプレートを選択」というテキストが表示され、選択できるフォームのリストがあることが明確になります。フォームが選択されていない場合でも、コンポーザーにはフォームが表示されたままです。ここで、テンプレートなしに切り替えるオプションがあることについて、@iamntzさんに同意します。

Truong_Jennifer · 2023 年 11 月 30 日午後 3:53

前回の返信に追記し、具体的なユースケースについてもう少し詳しく説明したいと思います。サイトフィードバックカテゴリにこれを実装したいと考えています。理想的には、タグのリクエストなどのためのフォームテンプレートを用意し、フォームが存在しない場合や適切に機能しない場合は、デフォルトのコンポーザー（テンプレートオプションなし）を使用したいと考えています。

そこで、カテゴリに新しいトピックを作成すると、次のようになると想定しています。

そこから「フォームテンプレートを選択」を見ると、通常どおり作成するか、このカテゴリに標準化されたリクエスト/フィードバック用のフォームが存在することを確認できます。

一部のユーザーは、作成できる場合、フォームテンプレートに気づかないか、使用しないだろうという意見は理解できますが、フィールドの外側にラベルを付けるのではなく、フィールド内のプレースホルダーテキストを使用して、現在のスタイリング内に留まろうとしていました。しかし、それが管理者が有効/無効にできるオプション機能である理由です。

sunjam · 2023 年 11 月 30 日午後 3:55

選択ボタンがはっきりと強調されていれば、ユーザーがクリックすることをはるかに容易に促すことができるでしょう。これは、あなたの「トピックを作成」ボタンに似ています。

Truong_Jennifer · 2023 年 12 月 11 日午前 4:30

フォームをさらに試したところ、「テンプレートなし」のオプションの回避策として、シンプルな「自由回答」フォームを作成できることがわかりました。これはテンプレートなしとして機能します（下のスクリーンショットを参照）。

このアイデアに加えて、ドロップダウンをハイライトするために色を変更したくない場合、カテゴリのドロップダウンのように、ドロップダウン選択があることを示すのに役立つ下向き矢印を追加できると思います。

フォームはアルファベット順に並んでいることがわかりました。フォームを並べ替えるオプション、または新しいトピックを作成するときに表示されるデフォルトのフォームを選択するオプションがあれば素晴らしいでしょう。

言うまでもなく、この機能が提供するものは気に入っており、このような機能強化を楽しみにしています。

Tris20 · 2024 年 1 月 8 日午後 2:28

見落としているかもしれませんが、フォームにハイパーリンクを挿入する方法はありますか？例えば、利用規約のチェックボックスがあるとします。その「説明」欄に、実際の利用規約へのハイパーリンクがあると便利です。

これはすでに可能でしょうか？

また、ユーザーが新しい投稿を作成する際に、例えばユーザー名や単なるデフォルトのタイトルなどで、タイトルフィールドを自動的に入力する方法はありますか？

トピック		返信	表示
Embed additional explainer text in Form Template UX form-templates	8	368	2025 年 4 月 10 日
Topic Templates Feature	35	14973	2015 年 8 月 11 日
Have users complete form when creating a topic? Feature completed	11	2043	2023 年 10 月 16 日
Placeholder Forms Theme component official , placeholder-forms	19	12988	2025 年 10 月 23 日
Visual form entry topic templates? Feature completed	18	3588	2023 年 10 月 16 日