Inline styling of Adaptive Form components inline-styling-of-adaptive-form-components
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.
You can define the overall appearance and style of an Adaptive Form by specifying styles using theme editor. Also, you can apply inline CSS styles to individual Adaptive Form components and preview the changes on the fly. Inline styles override styling provided in the theme.
Apply inline CSS properties apply-inline-css-properties
To add inline styles to a component:
-
Open your form in the form editor, and change the mode to styling mode. To change the mode to styling mode, in the page toolbar, select
-
Select a component in the page, and select the edit button
You can also select components from the form hierarchy tree in the sidebar. Form hierarchy tree is available as Form Objects in the sidebar.
In the Style mode, you can see components listed under Form Objects. However, Form Objects list in the sidebar lists components such as fields and panels. Fields and panels are generic components that can contain components such as text-box and radio-buttons.
When you select a component from the sidebar, you see all the subcomponents listed and the properties of the selected component. You can select a specific subcomponent and style it.
-
Click a tab in the sidebar to specify CSS properties. You can specify properties such as:
- Dimensions & Position (Display setting, padding, height, width, margin, position, z-index, float, clear, overflow)
- Text (Font family, weight, color, size, line height, and alignment)
- Background (Image and gradient, background color)
- Border (Width, style, color, radius)
- Effects (Shadow, Opacity)
- Advanced (Lets you write custom CSS for the component)
-
Similarly, you can apply styles for other parts of a component such as Widget, Caption, and Help.
-
Select Done to confirm the changes or Cancel to discard the changes.
Example: inline styles for a field component example-inline-styles-for-a-field-component
The following images depict a text field before and after inline styles are applied to it.
Text box component before applying inline style properties
Notice the change in text box style as shown in the following image after applying the following CSS properties.
Text box component after applying inline style properties
Following the steps above, you can select and style other components, such as panels, submit buttons, and radio buttons.
Copy and paste styles copy-paste-styles
You can also copy and paste a style from one component to another component in an Adaptive Form. In the Style mode, select the component and select the Copy icon
Select the other component of the same type and select the Paste icon
Set styles for different states of a component set-styles-for-states
You can set styles for different states of a component type. The different states include: Focus, Disabled, Hover, Error, Success, and Mandatory.
To define styling for a state of a component:
-
In the Style mode, select the component and select the Edit icon
-
Select the state for the component using the State drop-down list.
-
Define the styling for the selected state of the component and select
You can also simulate the success and error states. Select the Expand icon to view the Simulate Success and Simulate Error options.
See Also see-also
- Create an AEM Adaptive Form
- Add an AEM Adaptive Form to the AEM Sites page
- Apply themes to an AEM Adaptive Form
- Add components to an AEM Adaptive Form
- Use CAPTCHA in an AEM Adaptive Form
- Generate a PDF version (DoR) of an AEM Adaptive Form
- Translate an AEM Adaptive Form
- Enable Adobe Analytics for an Adaptive Form to track form usage
- Connect Adaptive Form to Microsoft SharePoint
- Connect Adaptive Form to Microsoft Power Automate
- Connect Adaptive Form to Microsoft OneDrive
- Connect Adaptive Form to Microsoft Azure Blob Storage
- Connect Adaptive Form to Salesforce
- Use Adobe Sign in an AEM Adaptive Form
- Add a new locale for an Adaptive Form
- Send Adaptive Form data to a database
- Send Adaptive Form data to a REST endpoint
- Send Adaptive Form data to AEM Workflow
- Use Forms Portal to list AEM Adaptive Forms on an AEM website
- Add versionings, comments, and annotations to an Adaptive Form
- Compare Adaptive Forms