Apresentando Modelos de Formulários Experimentais

[renato (Renato Atilio)]

Olá, Comunidade Discourse Meta!

Estamos animados para apresentar um novo recurso experimental, modelos de formulário. Com ele, você pode impor um formulário estruturado com validação de dados como parte do fluxo de criação de tópicos.

Ativando o recurso

O recurso está oculto atrás de uma flag experimental em todo o site. Para ativá-lo, basta ativar a configuração do site experimental_form_templates em Admin ▸ Settings.

Gerenciando os modelos

Os modelos de formulário podem ser criados, editados e excluídos em Admin ▸ Customize ▸ Templates (/admin/customize/form-templates/).

Lá, você verá uma tabela com uma lista dos modelos existentes no fórum. Você pode editar, excluir e visualizar qualquer modelo existente ou criar novos. A tabela também mostra as categorias em que cada modelo está atualmente ativo.

Os modelos são definidos em uma estrutura YAML. Você pode digitá-los manualmente ou usar os botões “Adicionar” na parte superior, que anexarão um trecho de código YAML de exemplo ao final, definindo um determinado tipo de entrada.

Aqui está um exemplo completo de YAML, com todos os tipos de campo:

- type: input
  id: name
  attributes:
    label: "Nome completo"
    placeholder: "ex. João Silva"
    description: "Qual é o seu nome completo?"
  validations:
    required: true
    minimum: 2
    maximum: 100
- type: textarea
  id: introduction
  attributes:
    label: "Introdução"
    placeholder: "Uma breve introdução"
    description: "Escreva uma breve introdução sobre você"
  validations:
    required: true
    minimum: 10
    maximum: 500
- type: dropdown
  id: fav-animal
  attributes:
    label: "Animal favorito"
    description: "Selecione seu animal favorito"
    none_label: "Selecione uma opção"
  choices:
    - "Cachorro"
    - "Gato"
    - "Outro"
  validations:
    required: true
- type: multi-select
  id: comm-channel
  attributes:
    label: "Canais de comunicação:"
    description: "Selecione seus canais de comunicação preferidos:"
    none_label: "Selecione uma opção"
  choices:
    - "Email"
    - "Telefone"
    - "Mensageiro"
- type: upload
  id: cat-photo
  attributes:
    label: "Foto do gato"
    description: "Envie uma foto do seu gato (ou de qualquer gato)"
    file_types: ".jpg, .png"
    allow_multiple: false
- type: checkbox
  id: accept-terms
  attributes:
    label: "Li e concordo com os termos"
    description: "Você precisa aceitar os termos para continuar"
  validations:
    required: true

Validações

Para cada campo, você pode adicionar opções de validação que devem ser aprovadas antes de poder criar o formulário. Para uma lista de validações disponíveis, clique no botão Validations acima do editor de código. Isso mostrará a sintaxe para cada opção de validação e descreverá seu uso pretendido.

Opções de validação

Chave	Tipo	Descrição
required	boolean	Exige que o campo seja preenchido para enviar o formulário
minimum	integer	Para campos de texto, especifica o número mínimo de caracteres permitidos
maximum	integer	Para campos de texto, especifica o número máximo de caracteres permitidos
pattern	regex string	Para campos de texto, uma expressão regular que especifica a entrada permitida
type	string	Para campos de entrada, você pode especificar o tipo de entrada que deve ser esperado (text|email|date|number|url|tel|color)

Aplicando um modelo a uma categoria

Depois de criar um modelo de formulário, você vai querer aplicá-lo a uma categoria. Para fazer isso, vá para as configurações da categoria à qual deseja aplicar o modelo.

Selecione o menu Template e, em seguida, à direita, use o interruptor para ativar os modelos de formulário. Uma vez ativado, você pode usar o menu suspenso para adicionar um ou mais modelos a uma categoria.

Preenchendo o formulário

Depois que um modelo for aplicado a uma categoria, o formulário do modelo aparecerá automaticamente quando você criar um tópico e selecionar a categoria que tem o modelo. Se a categoria tiver mais de um modelo atribuído a ela, você também verá um seletor para alternar entre os modelos disponíveis.

Ao preencher o formulário, ele seguirá quaisquer validações especificadas na definição do modelo de formulário, e somente após ser válido você poderá clicar em Create Topic e ele gerará o conteúdo do tópico a partir de todos os campos de entrada.

Finalmente, após o envio, o conteúdo do tópico é composto por todos os campos preenchidos:

Preenchendo valores de formulário antecipadamente

Você também pode preencher valores de formulário antecipadamente chamando /new-topic com parâmetros que correspondam aos IDs de campo definidos no modelo de formulário. Por exemplo, para o modelo usado anteriormente como exemplo:

/new-topic?name=João%20Smith&favorite-animal=Cat

Roteiro

• Armazenar a saída JSON nos dados do tópico quando um tópico é criado
• Alternar para ainda poder selecionar e usar o compositor livre em categorias com modelos de formulário

Como você pode nos ajudar

Adoraríamos ouvir seu feedback sobre este novo recurso. Se você é um administrador e gostaria de experimentá-lo em seu fórum, pode ativar a configuração experimental_form_templates e começar a usá-los imediatamente!

Por favor, crie novos tópicos marcados com form-templates para compartilhar suas experiências, relatar quaisquer bugs ou fornecer sugestões.

Obrigado por nos ajudar a tornar o Discourse melhor!

[packman (Chris McMahon)]

Isso parece muito útil e definitivamente o ativarei para experimentar.

Uma coisa que eu acharia útil é a capacidade de vincular um campo de modelo a um campo personalizado do usuário. Por exemplo, em uma categoria de suporte, as primeiras perguntas feitas pelos caras de suporte geralmente são “Modelo do equipamento” e o “URL do site” associado. Com este recurso de modelo, posso agora solicitar essas informações sempre que um novo tópico for criado

Essas duas informações também são geralmente de interesse para outros usuários, portanto, são definidas como campos personalizados do usuário - que às vezes são preenchidos. Se os campos de modelo pudessem ser preenchidos a partir de um campo de usuário personalizado vinculado (se ele tiver um valor), então para usuários frequentes eles podem preencher seus campos de usuário e não ter que preencher os campos de modelo toda vez. Usuários ocasionais podem simplesmente preencher os campos de modelo quando precisarem de suporte.

Como uma sugestão adicional, a cereja do bolo seria o link funcionar ao contrário. Se alguém inserir dados no modelo que não estão no campo de usuário personalizado vinculado, o campo personalizado é atualizado quando o tópico é postado.

[Don]

Olá

Esta é uma das melhores melhorias. Ela oferece muitas oportunidades.

Algumas observações:

1. Parece que a string form_templates.errors.valueMissing.number está faltando.

2. Parece que a validação de tel não está funcionando.

3. No celular, o template de formulário no compositor não é rolável.

4. No celular, quando o template de formulário está disponível, os botões do rodapé não fazem nada. Acho que seria bom escondê-los.
   

+ Seria útil adicionar validação para impedir números negativos ao tipo number. Caso de uso (preço)

+ Também seria útil adicionar um recurso de campos condicionais dinâmicos.

---

Obrigado

[Simon_Manning]

Como já mencionado, isso será muito útil para contextos de suporte e eu gosto particularmente das sugestões de @packman sobre campos de usuário personalizados.

A adição de modelos de formulário aos grupos também está no roteiro (ou poderia estar)? Onde a troca de mensagens em grupo é usada para suporte privado, isso será especialmente útil para pré-carregar perguntas antes que um membro da equipe chegue.

---

@packman

Se alguém insere dados no modelo que não estão no campo de usuário personalizado vinculado, o campo personalizado é atualizado quando o tópico é postado.

Dependendo da visibilidade do campo personalizado, isso pode ter implicações de privacidade. Por exemplo, o usuário pode optar por compartilhar as informações por meio de um modelo de formulário em uma categoria privada, mas não querer compartilhar essas informações com a comunidade em geral por meio de seu perfil.

Dependendo da natureza das informações, também pode haver um valor que seja apropriado para seu perfil e/ou a maioria dos formulários, mas eles podem querer fornecer um valor diferente em uma instância específica.

Gosto da ideia de preencher o formulário a partir desses campos e poder atualizar os campos se os valores inseridos diferirem, mas talvez isso deva ser um prompt. Este é um esboço muito rápido e rudimentar, mas talvez algo ao longo destas linhas após a criação do tópico (apenas se um valor diferir e possivelmente apenas se não estiver vazio):

[pgr]

Minha solicitação de recurso para este ótimo novo recurso, acredito que seja comum em fóruns de suporte de software.

As pessoas negligenciam especificar sua versão do software. É isso. Simples, mas é a causa de muitas, muitas postagens inúteis de idas e vindas que são cansativas para as pessoas que ajudam muitas pessoas (e não queremos cansar as pessoas mais importantes da Comunidade).

Portanto, eu gostaria de um formulário para perguntar:

• Sua versão do FabulousApp é… (dropdown com opções)
• Sua versão do PHP é… (dropdown com opções)

Agora, suponha que alguém poste com frequência nos fóruns. Essas informações não mudam com frequência, embora possam mudar, digamos, uma vez por mês.

O formulário deve manter os valores que o mesmo usuário selecionou em sua postagem anterior, como padrão, essa é a minha solicitação de recurso. O que você acha?

[Canapin (Coin-coin le Canapin)]

Eu acho que, em alguns casos, ter um campo pré-preenchido pode levar os usuários a ignorá-lo e não alterar o valor quando for necessário.

Especulando puramente, no entanto.

[Simon_Manning]

@pgr

Então eu gostaria de um formulário para perguntar

• Sua versão do FabulousApp é… (dropdown com opções)

@Don

\+ Seria útil também adicionar o recurso de campos condicionais dinâmicos.

Esses dois combinados é o que eu gostaria de ver para o meu caso de uso. Com vários aplicativos, quero que o usuário possa selecionar seu aplicativo e, em seguida, selecionar sua versão de uma lista que corresponde a esse aplicativo.

@Canapin

Acho que em alguns casos, ter um campo pré-preenchido pode levar os usuários a ignorá-lo e não alterar o valor quando for necessário.

Esta é certamente a minha experiência para escolhas. Com um valor padrão em um formulário de contato por e-mail, a grande maioria das submissões tem esse valor padrão, independentemente de qual aplicativo ou versão eles estão realmente usando.

[packman (Chris McMahon)]

@Simon_Manning

a grande maioria das submissões tem esse valor padrão

Isso provavelmente é verdade para valores padrão, mas no que eu imaginei, os valores dos campos seriam aqueles anteriormente inseridos pelo usuário em seus campos personalizados. Estes poderiam estar desatualizados, mas acho que no meu caso de uso haveria muito menos valores errados do que atualmente nenhum valor.

[Simon_Manning]

@packman

Estes podem estar desatualizados, mas acho que no meu caso de uso haveria muito menos valores incorretos do que atualmente não há valores.

Com certeza. Para mim, estas são em sua maioria duas categorias diferentes de informação: estado em um ponto no tempo e preferência/identidade do usuário/etc. O que eu estava me referindo com minha experiência de valores padrão era mais sobre o primeiro.

[huh.how (Thomas Ingram)]

Duas solicitações!

1. Um campo de código que automaticamente delimita o conteúdo com ```
   • Poderia ter um menu suspenso de idioma, com um padrão.
2. Um atributo que permite aos usuários duplicar um campo (imagino um botão + abaixo desse campo).
   • Imagine se um usuário quiser postar dois blocos de código ou várias imagens. Eles podem inserir um, clicar no + e adicionar outro.

[tomve (Tom)]

Esta é uma nova funcionalidade excelente e potencialmente oportuna para um projeto em que estou trabalhando.

Depois de brincar um pouco com ela, tenho duas perguntas:

1. Atualmente, quando o usuário edita uma postagem de tópico que criou através de um modelo de formulário, ele mostra apenas o editor de postagem padrão.
   Existem planos para mostrar também o editor do modelo de formulário ao editar uma postagem?

2. Haverá uma opção para adicionar tipos de entrada personalizados?
   Estou pensando em um mapa onde um usuário pode selecionar sua localização soltando um pino no mapa. Portanto, seria bom ter a opção de definir esses tipos de campo personalizados.

[jerlendds]

Este é o momento perfeito para o meu caso de uso! Gostaria de saber se há planos para permitir eventualmente a personalização de como um modelo de formulário é renderizado em um tópico.

Por exemplo, na imagem a seguir, o tipo de campo checkbox é renderizado como o texto on:

Alguém eventualmente poderá mapear os tipos de campo de formulário para saídas personalizadas?

Por exemplo, no meu caso, quero que uma caixa de seleção marcada/on seja mapeada para a formatação de caixa de seleção, [x], e a ausência de uma marca/estado desativado para []

Talvez eu tenha que começar a aprender Ruby e mexer neste projeto, esta atualização de formulário me deu muitas ideias interessantes. Obrigado pelo ótimo trabalho, pessoal!

[iamntz (Ionuț Staicu)]

Esta é uma ótima maneira de impor um comportamento em uma categoria específica (meu ponto problemático era a postagem de empregos, onde todos postavam como bem entendiam )!

Um monte de recursos extras seria bom:

• a capacidade de “mudar para nenhum modelo” (opcional). Isso seria bom ser limitado por usuários, por nível, por grupo, etc.; Algum tipo de “confie em mim, eu sei o que estou fazendo!”
• vários campos na mesma linha (pense em nome + sobrenome). Uma correção “boa o suficiente” seria permitir que os administradores definissem um nome de classe para o modelo de formulário;
• um repetidor (ou seja, agrupar um monte de campos e permitir que os usuários adicionem mais desses);

[huh.how (Thomas Ingram)]

Seria bom ter a capacidade de:

• Colar conteúdo em um campo de Upload^[1].
• Adicionar um compositor além da área de texto, onde os usuários tenham acesso ao conjunto normal de recursos.^[2]

---

1. A funcionalidade de upload nas postagens do Discourse é ótima. Esta é mais difícil de usar, exigindo que as imagens já estejam salvas em disco, por exemplo. ↩︎

2. Se eu quiser que um usuário selecione um menu suspenso além de uma postagem, com a abordagem atual (uma área de texto), diminuo drasticamente sua capacidade de criar sua postagem normalmente; sem colar imagens, sem barra de edição, etc. ↩︎

[Arkshine]

Tentei o formulário aqui para relatar um bug sobre o tema. Aqui está o meu feedback:

• O formulário em si é uma ótima ideia
• A ausência de uma ferramenta de formatação é uma grande falha.
  • Mesmo que a sintaxe markdown seja básica, selecionar e usar a barra de ferramentas é muitas vezes mais fácil/rápido. Ajuda a criar uma mensagem legível.
  • Isso pode funcionar se o relatório for um problema simples, mas avançado; você pode precisar ocultar detalhes ou inserir uma tabela.
• A ausência de upload inline não é conveniente.
  • Por exemplo, mostrar um problema passo a passo, antes/depois dos resultados, etc.
  • No caso de várias capturas de tela, você deve explicar em quais capturas de tela você deve prestar atenção.
• Assim como Thomas, colar uma imagem seria bem-vindo. Levei algum tempo para descobrir onde minhas capturas de tela foram salvas.
• Entrada condicional – ao selecionar “outro”, seria bom ter uma entrada aparecendo para isso.

No geral, muito bom! Estou ansioso para ver como será melhorado.

[Truong_Jennifer]

Se você tiver vários formulários habilitados para uma única categoria, não é intuitivo que haja um menu suspenso para você selecionar um formulário. Ao criar um novo tópico, ele preenche automaticamente o primeiro modelo de formulário, o que novamente, se você não sabe o que está vendo, não perceberia que pode haver outros formulários.

Quando você desmarca o formulário, você vê o texto “Selecionar modelos de formulário”, que está claro para mim que há uma lista de formulários que eu escolho. O compositor ainda mostra o formulário, mesmo que nenhum seja selecionado. É aqui que eu concordaria, @iamntz, sobre ter a opção de mudar para nenhum modelo.

[Truong_Jennifer]

Quero apenas complementar minha resposta anterior e fornecer um pouco mais de contexto para nosso caso de uso específico. Estamos buscando implementar isso em nossa categoria de Feedback do Site. Idealmente, queremos modelos de formulário para coisas como solicitação de tags e manter o compositor padrão (sem opção de modelo), se o formulário não existir ou não fizer o trabalho adequadamente.

Portanto, o que estamos imaginando seria criar um novo tópico na categoria e ver isto:

A partir daí, ver “Selecionar modelos de formulário”, onde você pode compor normalmente ou ver que os formulários existem nesta categoria para solicitações/feedback padronizados.

Posso ver o argumento de que alguns usuários não verão ou usarão o modelo de formulário, se puderem compor, mas eu estava tentando ficar dentro do estilo atual com o texto de espaço reservado dentro do campo em vez de um rótulo fora do campo. Mas é por isso que poderia ser um recurso opcional onde os administradores ativam/desativam.

[sunjam (james.network)]

@Truong_Jennifer

Consigo ver o argumento de que alguns usuários não verão ou usarão o modelo de formulário

Se o botão de seleção estivesse claramente destacado, seria muito mais fácil incentivar os usuários a clicá-lo, semelhante ao seu botão Criar Tópico

[Truong_Jennifer]

Depois de brincar mais com os formulários, descobrimos uma solução alternativa para uma opção de “sem modelo”, que seria criar um formulário simples de “resposta livre” que pode servir como um sem modelo (como visto na captura de tela abaixo).

@sunjam

Se o botão de seleção estivesse claramente destacado, seria muito mais fácil incentivar os usuários a clicar nele, semelhante ao seu botão Criar Tópico

Adicionando a essa ideia, se não quiséssemos mudar a cor para destacar o menu suspenso, acho que adicionar uma seta para baixo seria um indicador útil de que há uma seleção suspensa, assim como o menu suspenso de categorias.

Descobrimos que os formulários são ordenados alfabeticamente. Seria incrível ter a opção de reordenar os formulários ou a opção de selecionar o formulário padrão que deve aparecer ao criar um novo tópico.

É desnecessário dizer que gostamos do que este recurso tem a oferecer e ficaríamos animados com tais aprimoramentos.

[Tris20 (Tristan)]

Talvez eu tenha perdido, mas existe alguma maneira de ter um hiperlink em um formulário? Por exemplo, digamos que tivéssemos uma caixa de seleção para os termos e condições. Na description, seria útil ter um hiperlink para os termos e condições reais.

Isso já é possível?

Existe também alguma maneira de preencher automaticamente o campo de título quando o usuário cria uma nova postagem, como com o nome de usuário dele, ou mesmo apenas um título padrão?