How to apply custom css to the aem adaptive form

[Sandhya_Parimi]

How to apply custom css styles to the custom form and how to get the proper alignment of that form.

I have followed the below steps:

1.I have created the adaptive form by using blank template

2.and used adaptive form components for creating the form.

Kindly suggest how to apply the styles.

Thanks in advance.

[sudhanshu_singh]

Hi Sandhya,

You can create a Theme using Theme Editor [1] and apply it to the required form. It provides a user interface to style the various form elements, and also supports including additional styling using the base clientlib provided for the Theme. For applying the theme to the form, you can refer to the section: 'Applying a theme to a form' in the link below [1].

[1] https://helpx.adobe.com/aem-forms/6-2/themes.html

Thanks & Regards,

-Sudhanshu

[kautuk_sahni]

Hi 

Adding to what Sudhanshu said, please have a look at these reference articles:

Link:- https://helpx.adobe.com/aem-forms/6/creating-custom-adaptive-form-themes.html

// Creating custom adaptive form themes

• Create a node of type cq:ClientLibraryFolder under the /etc node.

  For example, create the following node:

  /etc/myAfThemes/forestTheme

• Add a multi-valued string property categories to the node and set its value appropriately.

  For example, set the property to: af.theme.forest.

  Add two folders, less and css, and a file css.txt to the node created in step 1:

  • less folder: Contains the less variable files in which you define the less variables and less mixins that are used to manage the .css styles.
    This folder consists of less variable files, less mixin files, less files defining styles using mixins and variables. And all these less files are then imported in styles.less.
  • css folder: Contains the .css files in which you define the static styles to be used in the theme.

  Read full article to apply the theme.

Link:- https://helpx.adobe.com/aem-forms/6/styling-constructs-adaptive-forms.html

// Styling constructs for adaptive forms

I hope this would help you.

~kautuk

[mainaks42838911 · Accepted solution]

Hi Sandhya,

Other than above 2 approaches if you want to add styling to specific components like a particular text field or a particular numeric field, you can use inline Editor. It is similar to Theme Editor but rather than applying to all component of same type using this you can apply style to a specific element. example I want to give red background to a particular text-field in the form.If you use theme editor it will apply style to all the text-fields but using inline editor you can specify style corresponding to that particular text field. You can refer to the below link on how to use inline editor.

https://helpx.adobe.com/aem-forms/6-2/inline-style-adaptive-forms.html#