Example forms

[thusc]

It seems we have three different ways to show forms:

• https://design.smart.coop/development/template-examples/register-form.html (labels are on top of the fields)
• In Screens v1.1 / Conditional forms, labels are on the left of their fields
  • With the form using the full width of the page
  • Or be smaller and centerd

---

• Can we have example pages for those ?
• Can I assume that the corresponding HTML/CSS can be used within a page such as https://design.smart.coop/development/template-examples/app-form.html without the form grouping/panels ?

[Wolfr]

@thusc I don't understand the last question completely, can you rephrase please? The form grouping is necessary for the form layout but the panels are optional.

@emilyvandewalle Let's check if we have documented horizontal forms somewhere.

[thusc]

I guess I was asking if the panel/border could be removed, so I guess you answered my last question. Thanks.

[emilyvandewalle]

I just checked and saw we have documented horizontal forms in the component documentation under form groups https://design.smart.coop/development/docs/o-form-group.html#component-02-o-form-horizontal

Would you like me to add an example template as well with the layout of the conditional form designs in screens v1.1?

[thusc]

Ah I didn't that documentation (I was only looking at Inputs, instead of Form. No need to add explicit example pages now then;

What do you call "conditional form designs" ?

[emilyvandewalle]

Ok, thanks! I was referring to these designs: https://www.figma.com/file/Zp551KO9VgmqSIouXQahlA/Smart-Screens-v1.1?node-id=173%3A5781

[thusc]

Is it just the same as what you did but with o-form-group-layout--horizontal and without the panels ? If yes, I think that's ok. If there is some additional trick (maybe to have all the input fields vertically aligned), then yes.

[thusc]

Yes, there is another trick involved, otherwise a label is vertically centered w.r.t. the input :) So yes, please :) I'm also curious to see the button placement at the bottom of the form.

[emilyvandewalle]

I see, I'll add an example 👍