Expand my Community achievements bar.

SOLVED

Input title / label position in AEM forms

Avatar

Level 1

Hello community,

 

this seems to be such a trivial thing but how can I control the positioning of the label / title of an input field in AEM Forms (version 6.5.x)? I did not find any kind of resources / explanations online or in the learning section.

 

Kind regards

1 Accepted Solution

Avatar

Correct answer by
Level 5

No stress, there are 2 ways to do it:

 

1. Theme Editor

Themes are a set of styles applied to adaptive forms. Theme editor which allows an author to change styles of the form and its components. As an example, see screenshot below where I updated the styles of the label of the textfield component. This is just a simple example, you can do a LOT with the theme editor.

Screen Shot 2022-07-21 at 2.52.37 pm.png

If the GUI provided properties are not sufficient, you can add your own CSS code:

Screen Shot 2022-07-21 at 2.58.38 pm.png

Highly recommend reading more about it:

https://experienceleague.adobe.com/docs/experience-manager-65/forms/adaptive-forms-advanced-authorin...

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/theme-editor-i...

 

 

2. Client Library

Other way is the typical way of handling styles in AEM, that is Client Library. Write your own CSS files where you have full flexibility to do whatever you want. Downside? Not as author friendly as themes.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm...

 

And btw, as @B_Sravan mentioned, AEM Forms community is the best place to post Forms related questions

View solution in original post

3 Replies

Avatar

Community Advisor

You can use theme editor for respective styling of the label fields, if it is something beyond theme editor, you can apply your custom styles.

you can post this question on the following community for a precise solution.
AEM Forms Community portal : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/ct-p/adobe-experienc... 

Avatar

Correct answer by
Level 5

No stress, there are 2 ways to do it:

 

1. Theme Editor

Themes are a set of styles applied to adaptive forms. Theme editor which allows an author to change styles of the form and its components. As an example, see screenshot below where I updated the styles of the label of the textfield component. This is just a simple example, you can do a LOT with the theme editor.

Screen Shot 2022-07-21 at 2.52.37 pm.png

If the GUI provided properties are not sufficient, you can add your own CSS code:

Screen Shot 2022-07-21 at 2.58.38 pm.png

Highly recommend reading more about it:

https://experienceleague.adobe.com/docs/experience-manager-65/forms/adaptive-forms-advanced-authorin...

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/theme-editor-i...

 

 

2. Client Library

Other way is the typical way of handling styles in AEM, that is Client Library. Write your own CSS files where you have full flexibility to do whatever you want. Downside? Not as author friendly as themes.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm...

 

And btw, as @B_Sravan mentioned, AEM Forms community is the best place to post Forms related questions

Avatar

Level 1

Thank you @B_Sravan  and @Nikhil_Verma I will probably evaluate both of these approaches.