Creating an autocomplete list for form element styling
Overview of the CSS styling feature that creates predefined lists for styling.
To apply styles to a form, the form designer can manually enter the CSS name, for example, btn-primary. This, however, requires knowledge of the CSS classes, and is prone to typing errors. To make it easier, you can create a list of available CSS class options for each field type using easy to understand names that the form designer can choose from, as shown in the following image.
Sitecore Forms does not provide CSS class options by default. The form designer can type in the CSS class field but no suggestions are presented.
You can set up CSS class options based on your own stylesheets or based on any CSS framework, for example, Bootstrap, as illustrated in the Walkthrough: Creating Bootstrap CSS class options to style a Button element.
The CSS classes defined manually and the CSS class options for the autocomplete list are saved in two separate fields (sitecore/Forms/<form>) on the Content tab. This means that the CSS classes entered manually on existing forms are preserved when moving to Sitecore 10.1 or later.
