Using Inline Styles to Style an Adaptive Form

Continuing our conversation on styling adaptive forms I want to look at inline styling as our second method for styling an adaptive form. When it comes to specifying inline styling rules it is done in a similar fashion to theme but there are some major differences between the two that I want to call out.

Unlike a theme that can be associated to multiple forms to ensure a standard across all the adaptive forms is maintained, leveraging inline styling is specific to only that individual form. Further to this when using inline styling you are styling each individual element rather than at a component level. This allows for a high level of customization to the appearance of the adaptive form but will increase the amount of work for the form creator, as they are now responsible for adding the styling to the form, as well as increasing the cost to maintain, as there is no central location to roll out branding changes and increase the time to market, as none of the styling is modularized.

To add inline style to an adaptive form, open the form in Author mode and change the mode to Style rather than the default Edit. This will update the side rail to now show the hierarchy of the form elements and rather than be able to change their functional properties you are able to set their styling properties. You can also open the style panel for an element by clicking the field from the viewing pane.

Once the element has been selected you are able to set the styling for that element by using the drop-down options. This is organized in the same fashion as the theme editor and allows for straight CSS to be added to the element in the advanced tab.

A nice feature in the inline styling is the ability to copy a style definition from one element to another within the adaptive form. You can only copy the style of one element to another element of the same component type, but this does speed up the process of styling an entire adaptive form through the inline style option.

Generally, inline styling is not recommended for setting the branding for your adaptive forms because it is done at a once off for each form and breaks the reusability of Adobe Experience Manager Forms modular design. That is not to say there is never a time or place for when the inline style should be used. Understanding how inline styling works along with the pros and cons to its functionality will allow you to make a stronger plan for your specific adaptive form implementation.