AEM Forms: Custom Styling for the AEM Forms Component | AEM Community Blog Seeding

[kautuk_sahni]

AEM Forms: Custom Styling for the AEM Forms Component by perficient

Abstract

The AEM Forms product comes with many out-of-the-box (OOTB) UI components that allow you to build meaningful forms for your business; the forms can be used to collect data, like applications, surveys, and consent authorization. But, these OOTB UI form components come with default UI styling. When we integrate AEM Forms into a website, the OOTB form components adapt to the websites styling using the themes. In some business use cases, the themes will not meet the requirements. So, in those use cases, we need to use the custom styling for individual components.

In this blog, I am going to highlight how easy it is to customize the OOTB components’ UI styling. To demonstrate this, I am going to use the AEM Forms Table and Textfield component. The default UI style of a textfield component is to display the border around the textfield as shown.

AEM Forms provide flexibility to change the components styling through the UI styling properties panel. When the OOTB properties do not give options to meet your UI requirements, we can add custom CSS and refer it in the UI Styling properties panel.

How to Add Custom CSS
In my AEM application code base, add a custom CSS file and add it to the clientlibraries through css.txt file. Below is the image of my custom css file called tableBorderTextbox.css

Read Full Blog

AEM Forms: Custom Styling for the AEM Forms Component

Q&A

Please use this thread to ask the related questions.