Style System for adaptive forms

Hi @varun790,

Applying different styles to AEM forms on different pages is achievable through multiple approaches. The best method depends on your project requirements and the flexibility of your setup. Below, I’ll walk you through the common methods, including using the Style System, CSS overrides, and Client-Side Libraries (ClientLibs).

1. Using the AEM Style System (Preferred Method)

The Style System in AEM allows you to define multiple styles for components and apply them dynamically through the page editor. This approach is very similar to how styles are applied for other AEM components.

Steps to Enable Style System for Forms:

1. Enable Style System for the Form Component:

   • Open the component's policy in the template editor.
   • Enable the "Style System" checkbox.

2. Define Styles in the Policy:

   • Go to the design dialog of the form component in the template editor.
   • Add style classes (e.g., form-style-1, form-style-2) under the Style System configuration.

3. Apply Styles to the Component:

   • In the page editor, select the form component.
   • Use the "Style System" dropdown in the toolbar to select the desired style.

4. CSS Implementation:

   • Define the corresponding CSS classes in your ClientLibs:

     .form-style-1 {
         background-color: #f0f0f0;
         padding: 20px;
     }
     
     .form-style-2 {
         border: 2px solid #000;
         margin: 15px;
     }

This approach allows page authors to dynamically select styles for each form instance without requiring developer intervention.

2. Customizing Styles Per Page Using Client-Specific CSS

If you need form styles to vary based on the page context (e.g., different page templates or specific page paths), you can implement page-specific CSS overrides.

Steps:

1. Add a Page-Specific Class to the Body Element:

   • In your page template or page component, ensure that the <body> tag has a specific class that reflects the page (e.g., home-page, product-page).

     <body class="${currentPage.name}">
     

2. Write Page-Specific CSS:

   • Use the page-specific class to target the form styles:

     .home-page .form {
         background-color: #e0f7fa;
     }
     
     .product-page .form {
         border: 1px solid #ff5722;
     }

This approach is useful when styles are tightly coupled with the page’s context. However, it requires developers to maintain the CSS mappings.

3. Dynamic Styles via Client-Side Libraries (ClientLibs)

ClientLibs allow you to modularize and load CSS/JS files dynamically. You can use this feature to load specific CSS files for forms based on the page.

Steps:

1. Create Separate ClientLibs for Form Styles:

   • Create ClientLibs for each form style (e.g., form-style-1, form-style-2).

2. Include Specific ClientLibs on Pages:

   • Use the data-sly-use and data-sly-test logic in your page templates to include the relevant ClientLibs based on a page property or template:

     <sly data-sly-test="${currentPage.getPath().contains('/home')}">
         <link rel="stylesheet" href="/etc.clientlibs/myproject/clientlibs/form-style-1.css">
     </sly>
     

This approach is more advanced and allows for fine-grained control over which styles are loaded.

4. Embedding Inline Styles with Contextual Data

If the form styling needs to be fully dynamic and driven by page-level configurations, you can use Page Properties or Custom Dialog Fields to pass contextual data to the form component.

Steps:

1. Add a Configuration Dialog to the Page:

   • Add a custom field to the page properties or a dialog for the form component to select a style (e.g., dropdown with values like Style 1, Style 2).

2. Pass the Configured Style as a Class:

   • In the form component, dynamically add a class based on the selected style:

     <div class="form ${pageProperties['formStyle']}">
     

3. Define the CSS for Each Style:

   • Write CSS for the classes like form-style-1, form-style-2, etc., in your ClientLibs.

This method is ideal when you need authors to control form styles from page properties.

5. Using JavaScript to Dynamically Apply Styles

If you need more interactivity (e.g., applying styles based on user actions or runtime conditions), you can use JavaScript to dynamically add or remove classes.

Example:

document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector(".form");
    if (window.location.pathname.includes("home")) {
        form.classList.add("form-style-1");
    } else if (window.location.pathname.includes("product")) {
        form.classList.add("form-style-2");
    }
});

Choosing the Right Approach:

• Style System: Best for reusable components where authors need control.
• Page-Specific CSS: Ideal for tightly coupled page-context styles.
• ClientLibs: Useful for modular and scalable CSS management.
• Dynamic Style Configuration: Great for author-driven designs via page properties.
• JavaScript: For runtime interactivity and dynamic conditions.

Thanks
Pranay