Styling constructs for adaptive forms

Last update: June 24, 2024

CREATED FOR:

  • User
  • Developer

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Prerequisites

Knowledge of CSS and the LESS framework.

What can be customized

The article lists publicly available css classes of adaptive forms. You can use these classes to style various components of an adaptive form. The styling of authoring components, such as dialogs and status bars that display warnings are beyond the scope of this article. Use these styling constructs to create styles (using CSS or Less) only when you are unable to style components using theme editor.

Customizing styles in adaptive forms

The LESS framework simplifies the use case to customize styles in adaptive forms. The framework lets you define styles using a set of variables and functions (mixins). The LESS framework helps reduce the size of the bundled code and increases its reusability.

You can customize adaptive form styles in the following ways:

  • Change the theme
  • Change component’s style

Changing theme

You can change the theme of an adaptive form to ensure that its appearance is consistent with the web pages where the adaptive form is embedded.

Changes in the overall appearance of the adaptive form using CSS properties are typically part of theme changes. Major changes to the lo ``ok and feel of the adaptive form, such as changes in the layout and placement of components are not considered theme changes.

Based on the bootstrap, the following set of CSS properties define the theme of a web page:

  • Background color
  • Border (type, color, thickness)
  • Font Color
  • Padding
  • Margin
  • Font Size
  • LineHeight

Currently, LESS variables are defined only for these properties of the various elements in an adaptive form.

Changing component style

You can change the appearance, layout, positioning, and visibility of elements. To achieve this task, create or update your custom .css files to include the styling constructs listed in this article.

To apply a style to an adaptive form, open the adaptive form in for editing, open properties of adaptive form conatiner, specify the path of custom CSS File in the basic tab. Defaut styling constructs of the adaptive form and overridden with the constructs listed in the custom .css file.

Components

The components discussed in this article have their predefined CSS classes. You can edit the variables to modify the styles in the CSS classes. Alternatively, you can rewrite the entire class. This section describes the classes within components and styles that you can modify using variables.