Styling an Adaptive Form with a Theme

The first method to styling adaptive forms that I would like to look at is through a theme. A theme holds all the rules for how each individual component should appear for each possible state, similar to a UX design guide. The theme can then be assigned to an adaptive form which would inherit all the style instructions from the theme. Multiple forms can be assigned to one theme while each form can only have one theme associated with them. Separating the appearance of the theme from the functionality of the form allows for marketing teams to have a stronger control of the appearance and standardization of an organizations forms but also elevates burden on the IT and form creators so they can focus on their responsibilities.

The template editor is similar to the adaptive form editor; there is a large viewing area to see the different element types that can be styled, a preview option to see how the form would look published, and a panel on the left for customization. Simply select the item you want to style from the viewing area, or the element hierarchy and the different styling options will be made available to you. Themes have been simplified to remove the need for coding by leveraging drop down boxes with valid CSS options.  There is an advanced section for each element’s state which could be used to write CSS if the styles have already been written elsewhere.

From a content author perspective all that needs to be done to implement a specific style is to set the theme for the adaptive form in the form container. This will automatically refresh the form to link to the specified style and refresh the form area. This connection will always remain so if a change happens to the theme, it will be pushed to all forms using that style automatically.

Using themes simplifies the process of ensuring that styling is meeting requirements through all adaptive forms. Themes also further the modular design of digital forms reducing redundancy and overhead to manage multiple versions.