Input title / label position in AEM forms | Community
Skip to main content
July 20, 2022
Solved

Input title / label position in AEM forms

  • July 20, 2022
  • 2 replies
  • 1181 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Nikhil_Verma

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.

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

Highly recommend reading more about it:

https://experienceleague.adobe.com/docs/experience-manager-65/forms/adaptive-forms-advanced-authoring/themes.html?lang=en

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/theme-editor-improvements-feature-video-use.html?lang=en

 

 

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.html?lang=en

 

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

2 replies

B_Sravan
Community Advisor
Community Advisor
July 20, 2022

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-experience-manager-forms-community 

Nikhil_Verma
Nikhil_VermaAccepted solution
Level 4
July 21, 2022

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.

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

Highly recommend reading more about it:

https://experienceleague.adobe.com/docs/experience-manager-65/forms/adaptive-forms-advanced-authoring/themes.html?lang=en

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/theme-editor-improvements-feature-video-use.html?lang=en

 

 

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.html?lang=en

 

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

AykimRuAuthor
July 21, 2022

Thank you @b_sravan  and @nikhil_verma I will probably evaluate both of these approaches.