How to Apply Custom CSS to Kentico Forms from Frontend or Admin Panel?
Hi everyone,
Currently, we are customizing the markup and applying CSS classes to our Kentico MVC forms by hooking into the backend using FormFieldRenderingConfiguration.GetConfiguration.Execute. Here's a simplified version of what we're doing:
FormFieldRenderingConfiguration.GetConfiguration.Execute += InjectMarkupIntoKenticoComponents; // Inside InjectMarkupIntoKenticoComponents e.Configuration.RootConfiguration.HtmlAttributes["class"] += " my-custom-class";
This approach works well, but it requires backend code deployment for even simple CSS changes.
My question is:
Is there a way to apply CSS classes or customize form field markup either:
- Through the front end (e.g., via Razor view overrides), or
- Via the Kentico Admin Panel (Form Builder UI or other settings),
...without relying on backend C# event handlers?
We want to make styling changes more accessible to content editors or front-end devs without modifying and deploying backend code.
Has anyone implemented a more flexible or dynamic way of styling forms this way?
Thanks in advance!
Environment
Xperience by Kentico version: [30.5.1]
.NET version: 8
Link to relevant https://docs.kentico.com/documentation/developers-and-admins/development/builders/form-builder/form-widget-customization
Answers
We want to make styling changes more accessible to content editors or front-end devs without modifying and deploying backend code.
Has anyone implemented a more flexible or dynamic way of styling forms this way?
I strongly recommend against anything that would result in storing CSS classes or styles in the database.
Try to add properties to the Form Builder sections that let marketers select "themes" or "designs". These selected values can be mapped to CSS classes in your section view and you can apply CSS rules accordingly in a CSS file.
If you need more control over the views of individual form components, inherit from the existing ones and use your own custom view files when you register your custom ones. Add new design-focused properties to the sub-class your component uses for properties.
If you want to override the Form Builder views, you can use MVC's view overriding (by matching path and name of View files) but this isn't supported by Kentico. If you want an example of view overriding for the Form Builder, check out the Kentico Community Portal project on GitHub.
What we did that worked great is we used Sections to help style components within. You can use Properties (that translate to CSS Classes on the container) to set CSS Variables, and then have the inputs styled by css variable. It worked great for one client we did this with, allowing them a controlled set of customization.
You can optionally put a "Css class" field on the section if you wish, but again that's less structured and may not produce a great result.
To response this discussion, you have to login first.