Adaptive Forms Core Components adaptive-forms-core-components-introduction

Using the Adaptive Forms Core Components in Adobe Experience Manager, you can create compelling enrollment experiences.

Core Components overview

In Adobe Experience Manager (AEM), components are the building blocks used to create pages and forms. They provide a simple and powerful way for authors to create and manage content, while also providing developers with the flexibility and extensibility needed to create custom components. These are designed to speed up development time and reduce maintenance costs for websites and forms, be flexible and can be easily customized to match the specific needs of a website and form.

The Core Components are also designed to be responsive and support a wide range of devices, including desktops, tablets, and smartphones. They also adhere to the latest web standards and best practices, making them a robust and reliable solution for creating web content.

Overall, the Core Components are an essential tool for creating and managing web content in AEM, providing a powerful and flexible solution that can help to reduce development time and maintenance costs, while also providing a great user experience to the website visitors.

Adaptive Forms Core Components

The Adaptive Forms Core Components are a set of 29 open-source, BEM-compliant components that are built on the foundation of the Adobe Experience Manager WCM Core Components. They are specifically designed to be used for creating Adaptive Forms, which are forms that adapt to the device, browser and screen size of the user.

These components can be used to create exceptional data capture and enrollment experiences by providing a wide range of form field options, including text fields, checkboxes, drop-down menus, and more. They also include features like validation, conditional logic, and responsive design, which can be used to create forms that are user-friendly and easy to use.

Additionally, as these components are open-source, developers have the ability to easily customize and extend the components to match the specific needs of their organization. And, These components are built on the BEM methodology, which ensures that they are scalable and maintainable.

adaptive form image

Features features

Production-Ready
The Adaptive Forms Core Components are 24 robust WCM components.
Cloud-Ready
Available for AEM Forms as a Cloud Service.
Versatile
The components represent generic concepts with which the Forms authors can assemble nearly any layout.
Configurable
Template-level content policies define which features are allowed to use or not use.
Accessible
They provide ARIA labels, support keyboard navigation, and text for assistive technologies such as screen readers.
Theme able
The components implement the Style System, and the markup follows BEM CSS conventions.
Customizable
Several patterns allow easy customization, from adjusting the HTML to advanced functionality reuse.
Versioning
The versioning policy ensures that the Core Components won’t break your site when improving things that might impact you.
Open Sourced
If something is not as it should, contribute your improvement.

Benefits benefits

Data capture experiences are crucial for lead generation and enrollment, and the Adaptive Forms Core Components provide a powerful solution for creating forms that are optimized for data capture. Some of the reasons to use Core Components to create these experiences over foundation components are:

  • Availability on GitHub: The AEM Adaptive Forms Core Components are open-source and available on GitHub, along with comprehensive documentation. This makes it easier for developers to understand the components and how they work, as well as contribute to their development. The aemcomponents.dev website is also a valuable resource, where developers can see the components in action and access detailed documentation.

  • BEM Model for Styling: The Core Components follow the BEM (Block Element Modifier) model for styling, which is a well-established and widely used methodology for organizing CSS. This makes it easier for developers to understand how the styles are organized and how to modify them to fit their specific needs.

  • No Dependency on Third-Party Libraries: One of the advantages of the Core Components is that they have no dependency on third-party JavaScript libraries, including JQuery and Underscore. This makes the components faster and more lightweight, as well as easier to integrate into an existing AEM implementation.

  • Focus on Performance and Accessibility: The Core Components are built with performance and accessibility in mind, which is reflected in their high Google Lighthouse and web vitals scores. This makes it easier for developers to create accessible and high-performing web pages, which is increasingly important in today’s digital landscape.

  • Form Components in Sites 30 Template and Themes: The Core Components provide support for form components in the Sites 30 template and themes, making it easier for developers to create and customize forms within AEM.

  • Easier to Style: The Core Components are easier to style than their foundation component counterparts. The theme creation process is similar to Sites, with the ability to inherit the same theme/CSS from the parent Sites page. Additionally, the BEM model for styling makes it easier to understand and modify the styles.

  • Accessibility: Adaptive Forms Core Components support accessibility standards and guidelines to ensure that forms can be used by people with disabilities, including those using assistive technologies such as screen readers.

  • Versioning: You can create and manage multiple versions of a Core Components based Adaptive Forms, engage in collaborative discussions through comments, and attach annotations to specific form components, thereby enhancing the overall form-building experience.

Comparing Core Components, Foundation Components, and Form Block Components components

The current version of AEM has the following Core Components, Foundation Components, and Form Block Components (Edge Delivery Services).

Components
Foundation Components
Core Components
Form Block Components
Additional information
Adobe Sign Block
✔️
Adobe Sign integration is available only for Foundation Components.
Accordion
✔️
✔️
For Foundation Components, you can configure the accordion layout in panel component properties.
Adaptive Form Fragment
✔️
✔️
For Foundation Components, you can add a fragment from Assets Browser.
Adaptive Form reCAPTCHA
✔️
✔️
✔️
For Foundation Components, use the Captcha component to add Google reCaptcha to a form.
Button
✔️
✔️
✔️
Captcha
✔️
For Foundation Components, use the Captcha component to add Google reCaptcha to a form.
Chart
✔️
Check Box
✔️
✔️
Check Box Group
✔️
✔️
✔️
For Foundation Components, use the checkbox component to add multiple checkboxes
Date Input Field
✔️
For Core Components, use the date picker component. You can also add separate textbox or numeric box components to capture the day, month, and year.
Date Picker
✔️
✔️
✔️
Drop-down List
✔️
✔️
✔️
Email
✔️
✔️
✔️
File Attachment
✔️
✔️
✔️
File Attachment Listing
✔️
Footer
✔️
✔️
✔️
Footnote Placeholder
✔️
Form Container
✔️
✔️
✔️
For Foundation Components, use the Root Panel component.
Form Title
✔️
✔️
For Foundation Components, use the title component.
Header
✔️
✔️
✔️
Horizontal Tabs
✔️
✔️
For Foundation Components, you can configure the tabs on top (horizontal tabs) layout in panel component properties.
Image
✔️
✔️
✔️
Image Choice
✔️
Next Button
✔️
✔️
Use the wizard component for the next and previous buttons to move between multiple panels.
Numeric Box
✔️
✔️
✔️
Numeric Stepper
✔️
Panel
✔️
✔️
✔️
Password Box
✔️
✔️
Telephone / Phone
✔️
✔️
✔️
Previous button
✔️
Use the wizard component for the next and previous buttons to move between multiple panels.
Radio Button
✔️
✔️
Radio Button Group
✔️
Reset Button
✔️
✔️
✔️
Scribble Signature
✔️
Separator
✔️
Submit Button
✔️
✔️
✔️
Summary Step
✔️
Switch
✔️
✔️
Table
✔️
Terms and Conditions
✔️
✔️
Text
✔️
✔️
✔️
Text Box
✔️
✔️
✔️
Title
✔️
For Core Components, use the Form Title component.
Vertical Tabs
✔️
✔️
For Foundation Components, you can configure the tabs on the left (vertical tabs) layout in panel component properties
Wizard
✔️
✔️
✔️
For Foundation Components, you can configure the wizard layout in panel component properties
NOTE
  • In addition to the components listed above, Forms block supports all valid HTML5 input types and text area as components.
  • Need a component not listed above? Request it by emailing aem-forms-ea@adobe.com from your official address.

Easy-to-use forms editor

The editor for Core Components based Adaptive Forms is similar to the one you already use for creating AEM Sites Pages. Here’s what you get:

  • Familiar UI elements and settings: When configuring properties for form components, you see a properties dialog looks just like the ones you are using to for WCM Core Components. This makes it quicker to find the options you need. Like WCM Core Components, for form components, the properties dialog appear in the center of the editor with clear tabs separating basic and advanced options, help text, and accessibility information – all in a tabs format for easy navigation.

  • Rule Editor: You can add logic and dynamic features to your forms without writing code. You can use the built-in rule editor to:

    • Show or hide fields based on user choices
    • Enable or disable an object
    • Set a value for an object
    • Perform calculations
    • Set property of an object
    • Validate data entry
    • Invoke a service (call external functionality)
    • Use built-in functions (predefined functions for common tasks)
    • Use custom functions (your own code for specific needs)
    • Validate fields and panels (ensure that data meets requirements)
    • Validate the value of an object
    • Execute functions to compute the value of an object
    • Invoke a Form Data Model (FDM) service and perform an operation
    • Dynamically add styles (change the appearance based on conditions)
    • Create other rules (chain actions and logic)
    • and more!

    The rule editor does not have the code editor. You can use custom functions to add your own code for specific needs to the rule editor.

  • Pre-filling forms: You can automatically populate certain fields in a form with existing data when a user opens it. This saves users time and effort by eliminating the need to manually enter information that might already be available. The Core Components editor provides an OOTB pre-fill service to populate form fields with the help of a Form Data Model. You can also create custom prefill services for more complex scenarios.

  • Document of Record (DoR): A Document of Record (DoR) refers to a formal, printable representation of the data submitted through the form. It serves as a permanent record of the information a user entered, providing a snapshot of the submitted data in a user-friendly format, typically a PDF document. You can use the editor to easily configure a custom template or use an OOTB template to generate a DoR.

  • Form Data Model: An Adaptive Forms Data Model (FDM) acts as a bridge between your Adaptive Forms and your data sources. It essentially defines the structure and organization of the data that your forms collect and interact with. You can use the editor to easily connect your form with a Forms Data Model (FDM).

  • Form Submissions: A form submission refers to the process of users completing and sending their filled-out forms. This triggers a series of actions defined within the form’s configuration, ultimately leading to the storage or processing of the submitted data. The Adaptive Forms editor offers a variety of options for configuring form submissions. Some of the common submit actions are:

  • Adaptive Forms Core Components in Sites Page editor: You can enable and use Adaptive Forms Core Components in AEM Page Editor and AEM Experience Fragments to directly create data capture experience along with builidng a Sites page.

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

Enable Adaptive Forms Core Components

Enabling Adaptive Forms Core Components on AEM Forms as a Cloud Service, allows you to start creating, publishing, and delivering Core Components based Adaptive Forms and Headless Forms using your AEM Forms Cloud Service instances to multiple channels. For detailed instructions to enable Adaptive Form Core Components, see Enable Adaptive Forms Core Components on AEM Forms as a Cloud Service and local development environment.

The Adaptive Forms Core Components have the following requirements.

AEM Version
AEM Forms add-on
Adaptive Forms Core Components
AEM as a Cloud Service
Forms - Digital Enrollment
Release 2.0.10+
AEM 6.5
Forms add-on
Release 1.1.12+

If your AEM Cloud Service SDK version older than 2023.02.0, ensure that you have prerelease flag enabled on your environment as Adaptive Forms Core Components were part of pre-prelease before the 2023.02.0 release.

Create a Core Components based Adaptive Form

You can perform the following actions on both AEM Forms as a Cloud Service or AEM 6.5 Forms environments:

Action
AEM Forms Version
Create a standalone Adaptive Form
AEM Forms as Cloud Service
Create an Adaptive Form in AEM Sites Page
AEM 6.5 Forms, AEM Forms as Cloud Service
Create an Adaptive Form in AEM Experience Fragment
AEM 6.5 Forms, AEM Forms as Cloud Service
Convert an Adaptive Form to an Experience Fragment
AEM 6.5 Forms, AEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c