User-defined CSS classes in Modern forms

Hi,

Since we first released our Modern form and Form designer just about a year ago, we've received a lot of praise as well as constructive criticism and improvement suggestions. Many of those suggestions have to do with the look and feel of the forms, customer are always trying to push the envelope and design even more visually-striking forms and we completely support and encourage their efforts!

We already offer various ways of styling your forms:

• Any component on the forms can have its style configured by adding Styles rule. Using rules, you can assign common properties, such as color or font, without having any background in HTML or CSS, as well as more advanced custom styles. What is amazing about style rules is that you can apply them conditionally, based on the current user and column values
  
• Configuring and applying CSS classes you define to the whole form using CSS button on the top menu

Based on the user feedback, we've now added the ability to assign a user-defined CSS class name to any component within the form, allowing you to have precise control over the style, as well as applying classes according to HTML structure and inheritance. I am assuming some basic knowledge of CSS, you will need that to be able to implement advanced styling. Of course, none of that is needed to build regular forms, the forms will look great with no styling as well :)

I would like to illustrate the new feature through an example. I would like to style the label of just one field on the form in a way that is not possible through Style rule. Style rules are applied to a wrapper that surrounds the whole control (for example, both text field itself and its label) and do not have the ability to modify just the label but not the text field.

To achieve my goal I need to execute two steps:

1. Give the control a unique CSS class name, it can be anything you want, just don't use any spaces. Just click on the component within the design surface, then enter the CSS class name in the General section of the settings pane.
   
   I'm calling it "funkyLabel", cause I'm going to make it look funky :).
2. Now, in the CSS settings I need to define what my CSS class is going to do. Click on CSS in the top menu bar and enter your CSS class definition
   
   Remember to prefix class names with a dot. As I'm applying the setting not to the whole component, but to the label, I'm adding "label" tag name to the class name. This is a standard way of using CSS, if you are not familiar with it, I encourage you to read any of the numerous introductory CSS tutorials you can easily google.
   In my case, I'm setting font properties, such as family, size, color and style.

That's it! Once I close the CSS pane, I can already see the style being applied in the preview of the designer

Now all we need to do is Publish our form and voila!

The possibilities are basically endless, give it a try and let it help you design fantastic looking forms!