Inline styling of adaptive form components

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, tap > Style.

Select a component in the page, and tap the edit button . Styling properties open in the sidebar.

You can also select components from the form hierarchy tree in the sidebar. Form hierarchy tree is available as Form Objects in the sidebar.

You can also select a component from 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 sub-components listed and the properties of the selected component. You can select a specific sub-component 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, Opcacity)
• 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.

Tap Done to confirm the changes or Cancel to discard the changes.