So we have a massive leap from Umbraco 8 to 15 and we would love to utilize forms. We are using our own CSS styles with utility classes (very similar to Tailwind).
I went through the videos and documentation and I can’t find any place where I can apply classes to the various inputs and labels. I thought if I click on the gear icon by each form field it would offer somthing but I’m not seeing it.
We would love to use our classes but I don’t know how we can.
Thank you!
Edit: I did see the following article that seems to be a more complicated answer:
But it is a decade old and I’m hoping there’s a more modern way to do it now.
Because of the move to RCL (Razor Class Library) you’ll need to download a copy of the default files and then place them in your own folder, e.g.: ~/Views/Partials/Forms/Themes/ShawnsTheme
ps umbraco forms does already add the fieldtype as a class and the sanitised field name, and the guid as id for the unique per form property.. if that’s enough for css targetting I’d go for leveraging that..
The problem with themes comes when you update uForms.. you have to remember to manually check for any update to the core theme and revisit your theme.
It could be mitigated a little by UForms, moving the business logic out of the view… but as the override is nice I get why it’s there as providing extension points to overwrite code from a dll would make things harder. (as updates usually change the code and not so much the markup..
this part is what I mean…
So I’d say if it’s just css.. then avoid.. if you need to change the markup then this is your only option.
But that’s the problem with the whole RCL package and overrides.. you simply take a point in time snapshot of the package code and change to your own.. detaching the package in a way…
also there are default configs.. (note that these are only used when creating a new form, and not a override everyform already created) Configuration | Umbraco Forms DisableStylesheet might be of use here.
Interesting idea about just changing the date picker field type. It looks like it would affect that field wherever we use it and not just this form. I guess that’s where adding a class to the form comes in and scope the changes. The idea I linked to was making a copy of the field and changing that, but this sounds like it would be easier.
I guess my only question would be if there is any way to add content between the questions in the form. Like after 3 or 4 questions we want to have a little blurb of text or maybe a divider or we want these 2 questions stylized in a box to show they they are separate from the others. Or if I wanted to have 3 columns for city, (state, zip) and two columns for first and last name. Is there an easy way to do that or would we have to give up some of that control if we want to use forms?
These forms seem great if you just want everything stacked on each other or behave with the same rules. Also it looks like it uses custom elements (forms-form-field) that have a shadow-root so I’m curious if any external CSS stylesheet I put in would even apply.
I had no idea there were that many configuration options in appSettings.json. I’ll have to see if I can find somewhere in the documentation that gives a description of each.
And forms support columns.. (at least form groups do )
The last level of structure are columns that can be created within a group.
To set the number of columns, click the cog icon next to the Group Name.
You can now add or move fields to the new columns created.
Thank you so much for that helpful information. I remember the columns for the groups but the main reason we never used it was that we didn’t see any way to break down from 4 columns to 2 columns then to 1 or any responsive logic at all… unless I missed it entirely. I assume there was some breakpoint it went from multiple columns to 1 (mobile) so maybe we will experiment with that.
