User-defined CSS classes in Modern forms

Vladi Gubler
Vladi Gubler
March 17, 2020 | Products

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!

Loading...

Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.

UltimateForms

Build powerful business applications in SharePoint using only your browser.
100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!

Cost-effective

Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

support@infowisesolutions.com

Related Topics

Infowise logo
© 2020 - Infowise Solutions Ltd
Microsoft partner logo
GSA Schedule
The awesome power of ULTIMATEforms

Quickly and easily turn time-consuming business processes into automated, efficient workflows.

100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!

Cost-effective

Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

support@infowisesolutions.com
On Premises
SharePoint Online
Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.

Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.