Sitecore Forms CSS Scripts - Dropdown selection

Question

We are using Sitecore 9.2 Forms feature and within form plain fields, actions, analytics are great benefits, but when Job comes to look and feel of the Forms, I see there is a very tricky way to assigning css styles to it and they are text fields where you add the css style to it. Content Authors usually managed the design part in Marketing, but they may not necessarily know much for CSS styles.

What I am looking for is "any way we can have css styles dropdown with list of predefined CSS to select from?"

Front End Developers can create custom css styles, but listing those css styles in dropdown make sense for such content authors to easily choose.

Any assistance in such customization?

Answer 1

This can be achieved! If you want to change the text field type of "CSS Class" to dropdown, then you can change the change the "Type" (field type) from single-line text to droplink as marked in the first screenshot. Next, give a parent folder item ID in the "Source" that has child items where each item has a "Class" field stored with different CSS class names.

Template location where this "CSS Class" is present : /sitecore/templates/System/Forms/Fields/Field

Second image is a sample screenshot of the Droplink field Source item (Background Types) with child items such as Primary Color, Secondary color.

NOTE : This solution will now allow even marketers to choose CSS classes in a dropdown for all form fields.