Give me some control of how the form template post is styled

Contribute Feature

AI-generated summary

ganncamp reports dissatisfaction with the default styling of posts generated by form templates, noting that the output includes excessive whitespace and header formatting that does not align with their expectations. They propose adding an answer-styling attribute to form inputs to allow for more control over the presentation. ganncamp further shares feedback from their team, who desire a formatting toolbar and alternative layouts, such as placing fields in a box at the top or side of the post.

manuel suggests using standard category topic templates or the Discourse Templates plugin to address these needs. However, ganncamp clarifies that standard templates do not ensure data compliance and that the request specifically concerns the visual presentation of form-gathered data, not template structure. Jayne_ivana supports the feature request, adding a suggestion to include standard formatting tools for text inputs.

In the interim, alexAubin provides a JavaScript hack for form-template-validation.js to hide checkbox answers, display non-textarea questions on the same line, and fix spacing issues. satonotdead acknowledges the hack but notes that the current default styling, with its hardened subheadings, violates their community’s posting guidelines.

1

We aren’t fans of how the post resulting from a form template is styled.

Here’s what I expected to see:

Label: answer
Label: answer
Label: answer

See the markdown 
**Label:** answer
**Label:** answer
**Label:** answer

Here’s what we got:

label

answer

label

answer

label

answer

See the markdown 
> ### label
> answer
> 
> 
> 
> ### label
> answer
> 
> 
> ### label
> answer

We’d love some control over this. In the meantime, I’m looking at making forms with spaces for labels (that way the * still shows up for required fields).

Selection_1605
Selection_1605715×590 24.4 KB

That yields something like this

answer

answer

answer

See the markdown 
###
answer


###
answer


### 
answer

There’s still too much whitespace, but it’s… less unappealing.

Suggestion: How about making this an attribute of the form input? E.G.

- type: input
  id: rule
  attributes:
    label: "Label"
    placeholder: "say something!"
    answer-styling: bold
  validations:
    required: true
10 Likes
Topic Voting enabled for our #feature category! :partying_face:
2

Following up on alternate presentations…

After showing my team this form & the resulting post output this morning in standup, the responses were

We’re missing the formatting toolbar at the top… I’m realizing I don’t want a form that makes a post; I want a normal post with some required fields

and

I wish these fields could be in a little box at the top [of the resulting post] or on the side or something

So… we’re eager to see how this evolves. :smiley:

3 Likes
Add open markdown field to form templates
3

For this use case you could just edit the regular topic template of a category:

image
image1135×477 18.6 KB

And this could probably be achieved using the Discourse Templates plugin?

image
image812×533 14.5 KB

In any case.. so many template options :exploding_head: :smile:

3 Likes
4

Hi,

We’ve got ‘normal’ templates in place in the relevant categories. That doesn’t mean that people provide the data they ask for. :sadpanda:

Ehm… No. This was about the presentation of the data gathered from form inputs.

Thanks, tho. :smiley:

3 Likes
5

+1 to the feature request.

And on a similar note, to give users the standard formatting toolbar for short and/or long-form textbox answers.

3 Likes
6

In the meantime, I came up with this ugly hack to a) hide “checkbox” answers, and b) display non-textarea questions on the same line (<question?>: <answer>) and c) fix spacing between items

If you’re somewhat familiar with Javascript, you can adapt it to your needs:

(This is to be added in app.yml’s hooks section)

hooks:
  after_code:
    - exec:
        # Typically here you have the plugin thingies
    - replace:
        filename: /var/www/discourse/app/assets/javascripts/discourse/app/lib/form-template-validation.js
        from: 'return formattedOutput.join("\n\n");'
        to: |
          const formattedOutput2 = mergedData.map((item) => {
            const key = Object.keys(item)[0];
            const value = item[key];
            const type = formTemplate.find(x => x.id == key).type;
            if (type == 'checkbox') return;
            if ((value) && (type != 'textarea')) return `**${labelMap[key]}**: ${value}`;
            if (value) return`\n### ${labelMap[key]}\n${value}\n`;
          });
          return formattedOutput2.join("\n");
3 Likes
7

Thanks for the hack. I voted here, the hardened subheadings breaks our basic posting duidelines and conventions.