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.
Thank you for that idea Chriztian! That may be what we are going to try first, my only question is we are using the latest Umbraco 15 but going to that themes page I only see a default for 14, would I be running into any issues using the default theme for Umbraco Forms 14 when I have Umbraco 15?
Hoping to find some tutorials that implements what we need.
I downloaded the 14 theme (as it was the latest on the page) and I I put it into Views\Partials\Forms\Themes and then added the following into my appsettings directly under “Umbraco”
I got the same snippet above from chatGTP as well as Claude but I’m not sure if it is correct because the link you sent me with the Configurations doesn’t have “UseTheme”.
I went to my forms here:
umbraco/section/forms
In the forms folder on the left I click on the form I want and I see all the fields for my form. I clicked on the “settings” button in the top right corner but don’t see any anything to do with themes.
ChatGTP is telling me themes don’t work at all in 15 and it’s one a different way but I can’t confirm that.
My goal here is to see the themes options in the settings like I’m supposed to so I know it’s working. What am I doing wrong?
Umbraco Forms uses Themes by default, and for that, you don’t need to download the files.
You specify which theme to use when you render your form(s), e.g. in the RenderUmbracoForm partial (or whatever it’s called in v15). You shouldn’t get any settings in the UI - the whole point is that any Form can be rendered using any Theme.
But if you want to change the markup for a specific field, you can download the default files, and customize the one you need to change, and then put that single file in the right place. For every partial UmbracoForms renders, it will use the default file unless there is a customized version in the current theme folder.
So if you want to customize the CheckBox output, you can put a file here:
the form settings in appettings are default vaules.. so if you wanted all forms to be the shawn theme without user input you can set there. (and no form set in your parial/view component includes would mean shawn theme, and not default theme)
@greystate, so what I did is I downloaded the theme and put it in folder they said to and I made a copy of the bootstrap3-horizontal folder that came with the download and labeled the folder shawn
Now to use the shawn theme; so I take it changing the appsettings file doesn’t do anything like AI said it did? I see a DefaultTheme in the Configuration options webpage I linked, but is that not the only place I need to set it? I searched for RenderUmbracoForm but I didn’t see any file including that name. I did see this in the master.cshtml file: @Html.RenderUmbracoFormDependencies(Url)
I’m not sure if it matters but we are putting the form in the form picker field. After doing some research last night it seems there’s different ways to put in a form so not sure if that matters.
My main goal at this time is just to put “shawn was here” somewhere in the shawn theme and have that populate on the form on the webpage.
@mistyn8 I did see that link you sent but it was a tiny chain and only had 10 views (as of last night) and I didn’t know who Sebastian was (whether that was official or not) so it wasn’t conclusive to me. But from the both of you it sounds like 15 still uses themes so I’ll keep plugging away.
It refers to @Model.Theme where you can just specify your theme name to force it. Just so you know it’s working - then you can go figure out the settings part afterwards.
Also, @Model.Form assumes your from picker’s alias is form (yours might be formPicker depending on how you created it), so ideally you should do something like this:
Interesting, I just searched for that snippet and it’s missing theme all together. @await Component.InvokeAsync("RenderForm", new { formId = @Model.FormPicker, includeScripts = false })
So I’ll change it to this just to test: @await Component.InvokeAsync("RenderForm", new { formId = @Model.FormPicker, theme = "shawn", includeScripts = false })
If I did want to have it be theme = @Model.Theme, like it is in the docs, where does it look for Model.Theme?
So right now it’s theme = “shawn” and I want to test to see if it even sees the theme. I went into this file: Views\Partials\Forms\Themes\shawn\Fieldtypes\FieldType.CheckBoxList.cshtml
Which is just a copy of the bootstrap theme that comes with the umbraco theme package (I am not using bootstrap, but it was cleaner than the default theme) and I added class name shawn-test to class="form-check-input"
I then added a random checkbox to the form so I could test.
I then stopped and restarted the website and and I don’t see “shawn-text” anywhere in the code. Is there something I’m missing?
Thank you @greystate and @mistyn8 for your time. The reason I wasn’t seeing the changes was because I was using the theme field files from the bootstrap3 one, which was FieldType.CheckBoxList.cshtml, I was trying to modify a checkbox and the file should have been labeled FieldType.CheckBox.cshtml
I simply added in that file name and it saw my changes.
