Представляем шаблоны форм

[renato (Renato Atilio)]

Эта функция больше не находится в экспериментальной стадии!

Подробнее о функции и о том, как использовать её в вашем сообществе, можно узнать здесь: Creating form templates

Привет, сообщество Discourse Meta!

Мы рады представить новую экспериментальную функцию — шаблоны форм. С её помощью вы можете внедрить структурированную форму с валидацией данных в процесс создания тем.

Включение функции

Функция скрыта за глобальным экспериментальным флагом. Чтобы включить её, просто активируйте настройку сайта experimental_form_templates в разделе Админ ▸ Настройки.

Управление шаблонами

Шаблоны форм можно создавать, редактировать и удалять в разделе Админ ▸ Настройка ▸ Шаблоны (/admin/customize/form-templates/).

Там вы увидите таблицу со списком шаблонов, существующих на форуме. Вы можете редактировать, удалять и просматривать любой существующий шаблон или создавать новые. В таблице также отображаются категории, в которых каждый шаблон в данный момент активен.

Шаблоны определяются в структуре YAML. Вы можете ввести его вручную или воспользоваться кнопками «Добавить» вверху, которые добавят пример кода YAML в конец файла, определяя определённый тип ввода.

Вот полный пример YAML со всеми типами полей:

- type: input
  id: name
  attributes:
    label: "Полное имя"
    placeholder: "Например, Иван Иванов"
    description: "Как ваше полное имя?"
  validations:
    required: true
    minimum: 2
    maximum: 100
- type: textarea
  id: introduction
  attributes:
    label: "Введение"
    placeholder: "Краткое введение"
    description: "Напишите краткое введение о себе"
  validations:
    required: true
    minimum: 10
    maximum: 500
- type: dropdown
  id: fav-animal
  attributes:
    label: "Любимое животное"
    description: "Выберите ваше любимое животное"
    none_label: "Выберите вариант"
  choices:
    - "Собака"
    - "Кошка"
    - "Другое"
  validations:
    required: true
- type: multi-select
  id: comm-channel
  attributes:
    label: "Каналы связи:"
    description: "Выберите предпочтительные каналы связи:"
    none_label: "Выберите вариант"
  choices:
    - "Электронная почта"
    - "Телефон"
    - "Мессенджер"
- type: upload
  id: cat-photo
  attributes:
    label: "Фото кошки"
    description: "Отправьте фото вашей кошки (или любой кошки)"
    file_types: ".jpg, .png"
    allow_multiple: false
- type: checkbox
  id: accept-terms
  attributes:
    label: "Я прочитал и согласен с условиями"
    description: "Для продолжения необходимо принять условия"
  validations:
    required: true

Валидация

Для каждого поля можно добавить параметры валидации, которые должны быть выполнены перед созданием формы. Чтобы увидеть список доступных правил валидации, нажмите кнопку Валидация над редактором кода. Это покажет синтаксис для каждого параметра валидации и опишет его назначение.

Параметры валидации

Ключ	Тип	Описание
required	boolean	Требует заполнения поля для отправки формы
minimum	integer	Для текстовых полей указывает минимальное количество разрешённых символов
maximum	integer	Для текстовых полей указывает максимальное количество разрешённых символов
pattern	regex string	Для текстовых полей — регулярное выражение, определяющее допустимый ввод
type	string	Для полей ввода можно указать ожидаемый тип ввода (text

Применение шаблона к категории

После создания шаблона формы вы захотите применить его к категории. Для этого перейдите в настройки категории, к которой хотите применить шаблон.

Выберите меню Шаблон, а затем справа используйте переключатель для включения шаблонов форм. После включения вы сможете использовать выпадающий список, чтобы добавить один или несколько шаблонов к категории.

Заполнение формы

После применения шаблона к категории форма шаблона будет автоматически отображаться при создании темы, если выбрана категория с этим шаблоном. Если к категории назначено несколько шаблонов, вы также увидите выборщик для переключения между доступными шаблонами.

При заполнении формы будут применяться все правила валидации, указанные в определении шаблона формы. Отправить форму и создать тему можно будет только после того, как она станет валидной. Нажмите Создать тему, и контент темы будет сгенерирован на основе всех заполненных полей.

Наконец, после отправки контент темы будет состоять из всех заполненных полей:

Предварительное заполнение значений формы

Вы также можете предварительно заполнить значения формы, вызвав /new-topic с параметрами, соответствующими идентификаторам полей, определённым в шаблоне формы. Например, для ранее использованного в качестве примера шаблона:

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

Дорожная карта

• Сохранение вывода JSON в данные темы при создании темы
• Переключатель для возможности выбора и использования свободного редактора в категориях с шаблонами форм

Как вы можете нам помочь

Мы будем рады услышать ваши отзывы об этой новой функции. Если вы администратор и хотите опробовать её на своём форуме, вы можете включить настройку experimental_form_templates и начать использовать её прямо сейчас!

Пожалуйста, создавайте новые темы с тегом form-templates, чтобы поделиться своим опытом, сообщить об ошибках или предложить улучшения.

Спасибо, что помогаете нам делать Discourse лучше!

[packman (Chris McMahon)]

Это выглядит очень полезно, и я обязательно включу эту функцию для экспериментов.

Одной из полезных возможностей было бы связывание поля шаблона с пользовательским полем пользователя. Например, в категории поддержки первые несколько вопросов, которые обычно задают сотрудники поддержки, — это «Модель оборудования» и соответствующий «URL веб-сайта». С помощью этой функции шаблонов я теперь могу запрашивать эту информацию при создании каждой новой темы

Эти два вида информации также обычно интересны другим пользователям, поэтому они определены как пользовательские поля — которые иногда заполняются. Если бы поля шаблона могли заполняться данными из связанного пользовательского поля (если в нём есть значение), то постоянные пользователи могли бы заполнить свои пользовательские поля один раз и не заполнять поля шаблона каждый раз. А occasional пользователи могут просто заполнять поля шаблона по мере необходимости при обращении в поддержку.

В качестве дополнительного предложения, вишенкой на торте было бы, если бы связь работала в обратном направлении. Если кто-то вводит данные в шаблон, которых нет в связанном пользовательском поле, то пользовательское поле обновляется при публикации темы.

[Don]

Привет

Это одно из лучших улучшений. Оно открывает столько возможностей.

Несколько замечаний:

1. Похоже, что строка form_templates.errors.valueMissing.number отсутствует.

2. Похоже, что валидация для tel не работает.

3. На мобильных устройствах шаблон формы в редакторе не прокручивается.

4. На мобильных устройствах, когда шаблон формы доступен, кнопки в нижнем колонтитуле ничего не делают. Думаю, было бы лучше их скрыть.
   

• Было бы полезно добавить валидацию, предотвращающую ввод отрицательных чисел для типа number. Пример использования: цена

• Также было бы полезно добавить функцию динамических условных полей.

---

Спасибо

[Simon_Manning]

Как уже упоминалось, это будет очень удобно в контексте поддержки, и мне особенно нравятся предложения от @packman относительно пользовательских полей.

Входит ли также в дорожную карту добавление шаблонов форм в группы (или это возможно)? Когда отправка сообщений в группу используется для частной поддержки, это будет особенно полезно для предварительного сбора вопросов до прихода сотрудника.

---

@Chris McMahon

Если кто-то вводит данные в шаблон, которых нет в связанном пользовательском поле, то при публикации темы это пользовательское поле обновляется.

В зависимости от настроек видимости пользовательского поля это может иметь последствия для конфиденциальности. Например, пользователь может захотеть поделиться информацией через шаблон формы в частной категории, но не желать раскрывать эти данные более широкому сообществу через свой профиль.

В зависимости от характера информации у неё может быть одно значение, подходящее для профиля и/или большинства форм, но в конкретном случае пользователь может захотеть указать другое значение.

Мне нравится идея заполнения формы на основе этих полей с возможностью обновления полей, если введенные значения отличаются, но, возможно, это должно быть предложено пользователю. Это очень быстрый и грубый макет, но, возможно, что-то подобное можно реализовать после создания темы (только если значения отличаются и, возможно, только если они не пустые):

[pgr]

Мое предложение по улучшению для этой замечательной новой функции, по моему мнению, является общим для форумов технической поддержки программного обеспечения.

Пользователи часто забывают указывать версию своего программного обеспечения. Вот и всё. Просто, но именно это становится причиной множества бессмысленных перепалок, которые утомляют тех, кто помогает многим людям (а мы не хотим утомлять самых важных людей в Сообществе).

Поэтому я предлагаю внедрить форму, в которой будет запрашиваться:

• Ваша версия FabulousApp… (выпадающий список с вариантами)
• Ваша версия PHP… (выпадающий список с вариантами)

Теперь предположим, что кто-то часто публикует сообщения на форумах. Эта информация меняется нечасто, хотя может обновляться, скажем, раз в месяц.

Форма должна сохранять значения, выбранные этим же пользователем в предыдущем сообщении, по умолчанию — вот и всё моё предложение по улучшению. Что вы думаете об этом?

[Canapin (Coin-coin le Canapin)]

Я думаю, что в некоторых случаях предварительно заполненное поле может привести к тому, что пользователи проигнорируют его и не изменят значение, когда это необходимо.

Хотя это всего лишь предположение.

[Simon_Manning]

@pgr

Так что мне нужна форма, которая запрашивает:

• Ваша версия FabulousApp — (выпадающий список с вариантами)

@Don

• Также было бы полезно добавить функцию динамических условных полей.

Именно это сочетание я хотел бы видеть для моего варианта использования. При работе с несколькими приложениями я хочу, чтобы пользователь мог выбрать своё приложение, а затем выбрать версию из списка, соответствующего этому приложению.

@Canapin

Я думаю, что в некоторых случаях наличие предзаполненного поля может привести к тому, что пользователи пропустят его и не изменят значение, когда это необходимо.

Это точно соответствует моему опыту в отношении выбора. При наличии значения по умолчанию в форме обратной связи по электронной почте подавляющее большинство отправленных форм содержат это значение по умолчанию, независимо от того, какое приложение или версию они фактически используют.

[packman (Chris McMahon)]

@Саймон Мэннинг

Подавляющее большинство заявок имеют это значение по умолчанию.

Вероятно, это справедливо для значений по умолчанию, но в моём представлении значения полей должны соответствовать тем, которые пользователь ранее вводил в своих пользовательских полях. Они могут быть устаревшими, но, по моему мнению, в моём случае будет гораздо меньше неверных значений, чем сейчас — когда значений вообще нет.

[Simon_Manning]

@Крис Макмагон

Это может быть старая или устаревшая информация, но, на мой взгляд, в моём случае неправильных значений будет гораздо меньше, чем сейчас отсутствующих.

Абсолютно верно. На мой взгляд, это в основном две разные категории информации: состояние в определённый момент времени и пользовательские предпочтения/идентификация и т. д. То, что я имел в виду, говоря о своём опыте работы со значениями по умолчанию, касалось скорее первой категории.

[huh.how (Thomas Ingram)]

Два предложения!

1. Поле кода, которое автоматически оборачивает содержимое в \```
   • В нём может быть выпадающий список для выбора языка с значением по умолчанию.
2. Атрибут, позволяющий пользователям дублировать поле (представляю себе кнопку + под этим полем).
   • Представьте, что пользователь хочет разместить два блока кода или несколько изображений. Он может ввести одно, нажать + и добавить другое.

[tomve (Tom)]

Это отличная новая функция, и она, возможно, очень кстати для проекта, над которым я работаю.

После короткого ознакомления с ней у меня возникло два вопроса:

1. Сейчас, когда пользователь редактирует сообщение в теме, созданное через шаблон формы, отображается только стандартный редактор сообщений.
   Есть ли планы также показывать редактор шаблона формы при редактировании сообщения?

2. Будет ли возможность добавлять пользовательские типы полей ввода?
   Я думаю о карте, где пользователь может выбрать своё местоположение, поставив метку на карте. Поэтому было бы здорово иметь возможность определять такие пользовательские типы полей.

[jerlendds]

Это идеально подходит для моего сценария использования! Интересно, есть ли планы в будущем позволить настраивать способ рендеринга шаблона формы в теме.

Например, на следующем изображении тип поля checkbox отображается как текст on:

Смогут ли пользователи в будущем сопоставлять типы полей формы с пользовательским выводом?

Например, в моём случае я хочу, чтобы отмеченный/on чекбокс отображался в формате чекбокса [x], а отсутствие отметки/состояние off — как [].

Возможно, мне придётся начать изучать Ruby и ковыряться в этом проекте; это обновление формы дало мне много интересных идей. Спасибо за отличную работу, ребята!

[iamntz (Ionuț Staicu)]

Это отличный способ наложить ограничения на определённую категорию (моим главным неудобством были вакансии, где каждый размещал их как хотел )!

Было бы здорово добавить несколько функций:

• возможность «отключить шаблон» (опционально). Это можно было бы ограничить для пользователей, по уровню, по группе и т.д.; что-то вроде «поверь мне, брат, я знаю, что делаю!»
• несколько полей в одной строке (например, имя + фамилия). Достаточно хорошим решением было бы позволить администраторам задавать имя класса для шаблона формы;
• повторяемый блок (то есть группировка нескольких полей и возможность добавлять их пользователю);

[huh.how (Thomas Ingram)]

Было бы полезно иметь возможность:

• Вставлять контент в поле загрузки^[1].
• Добавлять редактор в дополнение к текстовому полю, где пользователи имеют доступ к стандартному набору функций.^[2]

---

1. Функция загрузки в сообщениях Discourse отличная. Здесь же пользоваться ею сложнее: например, требуется, чтобы изображения уже были сохранены на диске. ↩︎

2. Если я хочу, чтобы пользователь выбрал значение из выпадающего списка одновременно с написанием поста, то при текущем подходе (текстовое поле) я значительно ограничиваю его возможности для создания поста в обычном режиме: нельзя вставлять изображения, отсутствует панель редактирования и т. д. ↩︎

[Arkshine]

Я попробовал форму здесь, чтобы сообщить об ошибке, связанной с темой. Вот мой отзыв:

• Сама форма — отличная идея
• Отсутствие инструментов форматирования — большой минус.
  • Даже если синтаксис Markdown прост, выделение текста и использование панели инструментов часто удобнее и быстрее. Это помогает сделать сообщение читаемым.
  • Такой подход может сработать, если отчёт касается простой, но сложной проблемы; возможно, потребуется скрыть детали или вставить таблицу.
• Отсутствие возможности вставки файлов прямо в форму неудобно.
  • Например, при пошаговом демонстрации проблемы, сравнении результатов «до» и «после» и т.д.
  • При наличии нескольких скриншотов приходится объяснять, на какие именно из них следует обратить внимание.
• Как и Томас, я бы приветствовал возможность вставки изображения. Мне потребовалось время, чтобы понять, куда сохраняются мои скриншоты.
• Условный ввод — при выборе пункта «другое» было бы неплохо, чтобы появлялось соответствующее поле ввода.

В целом, очень приятно! С нетерпением жду, как это будет улучшено.

[Truong_Jennifer]

Если для одной категории включено несколько форм, неочевидно, что существует выпадающий список для выбора формы. При создании новой темы автоматически подставляется первый шаблон формы, и если вы не знаете, на что смотрите, то можете не понять, что существуют и другие формы.

Когда вы снимаете выбор формы, вы видите текст «Выберите шаблоны форм», что для меня ясно указывает на наличие списка форм, из которых можно выбрать. Однако композитор по-прежнему отображает форму, даже если она не выбрана. Здесь я поддерживаю предложение @iamntz о добавлении возможности переключения на отсутствие шаблона.

[Truong_Jennifer]

Хочу дополнить свой предыдущий ответ и предоставить немного больше контекста для нашего конкретного случая использования. Мы планируем внедрить это в категорию «Обратная связь о сайте». В идеале нам нужны шаблоны форм для таких задач, как запрос тегов, при этом стандартный редактор (без выбора шаблона) должен оставаться доступным, если форма отсутствует или не подходит для решения задачи.

Итак, то, что мы представляем, — это создание новой темы в категории, где пользователь увидит следующее:

Далее появится опция «Выбрать шаблоны форм», откуда можно либо написать сообщение как обычно, либо увидеть, что в этой категории существуют формы для стандартизированных запросов или обратной связи.

Я понимаю аргумент, что некоторые пользователи могут не заметить или не использовать шаблон формы, если у них есть возможность написать сообщение вручную. Однако я старался придерживаться текущего стиля, используя текст-заполнитель внутри поля вместо подписи снаружи. Именно поэтому эта функция может быть опциональной, чтобы администраторы могли включать или отключать её.

[sunjam (james.network)]

@Truong_Jennifer

Я понимаю аргумент, что некоторые пользователи могут не увидеть или не использовать шаблон формы.

Если бы кнопка выбора была явно выделена, это значительно облегчило бы побуждение пользователей нажать на неё, аналогично вашей кнопке Создать тему.

[Truong_Jennifer]

После более тщательного изучения форм мы обнаружили обходной путь для варианта «без шаблона»: создать простую форму «свободный ответ», которая может выполнять роль шаблона по умолчанию (как показано на скриншоте ниже).

@sunjam

Если бы кнопка выбора была четко выделена, пользователям было бы гораздо проще нажать на неё, аналогично вашей кнопке Создать тему.

Дополняя эту идею: если мы не хотим менять цвет для выделения выпадающего списка, я думаю, что добавление стрелки вниз стало бы полезным индикатором наличия выпадающего выбора, точно так же, как в выпадающем списке категорий.

Мы также обнаружили, что формы расположены в алфавитном порядке. Было бы замечательно иметь возможность изменять порядок форм или выбирать форму по умолчанию, которая должна отображаться при создании новой темы.

Не стоит и говорить, что нам нравится то, что предлагает эта функция, и мы с энтузиазмом ждём таких улучшений.

[Tris20 (Tristan)]

Возможно, я что-то упустил, но есть ли способ добавить гиперссылку в форму? Например, предположим, что у нас есть чекбокс для принятия условий использования. В поле description было бы полезно разместить гиперссылку на сами условия.

Возможно ли это уже сейчас?

Есть ли также способ автоматически заполнять поле заголовка при создании пользователем новой публикации, например, его именем пользователя или просто каким-то заголовком по умолчанию?