DocumentationAEMCore Components Guide

Form container form-container-adaptive-forms-core-component

Last update: Fri Nov 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer
  • Admin
  • User

This article discusses theDrafts feature, which is a pre-release feature. The pre-release feature is accessible only through our pre-release channel.

Forms allow website visitors to interact with the website by providing valuable information, which can increase engagement and user satisfaction. An Adaptive Form Container in Adobe Experience Manager (AEM) Sites enables website owners to easily add forms to their pages. This helps facilitate communication between website visitors and the website owner or organization by providing a streamlined way for visitors to provide feedback, make inquiries, and complete other action

Usage reasons-to-use-forms-container

There are several reasons why a form may be added to a website:

  • Data collection: Forms can be used to collect data from website visitors for various purposes, such as market research, user behavior analysis and more.

  • Lead generation: A form can be used to gather information from potential customers, such as name and email address, to generate leads for sales and marketing efforts.

  • E-commerce: Forms can be used for online shopping, allowing customers to place orders and make payments through the website.

  • Contact: A contact form allows website visitors to easily reach out to the website owner or organization.

  • Surveys and polls: Forms can be used to gather feedback and opinions from website visitors through surveys and polls.

  • Event registration: Forms can be used for event registration, allowing website visitors to sign up for events or webinars.

  • Subscriptions: Forms can be used for website subscriptions, allowing visitors to sign up for a newsletter or other regular communications.

  • User authentication: Forms can be used for user authentication, allowing website visitors to create accounts and log in to access exclusive content or features.

  • Increase conversion rate: A well-designed form can increase the conversion rate by making it easy for users to complete a desired action, like purchasing a product or signing up for a service.

Version and Compatibility version-and-compatibility

The Adaptive Forms Accordion Core Component was released in Feb 2023 as part of the Core Components 2.0.4 for Cloud Service and Core Components 1.1.12 for AEM 6.5.16.0 Forms or later. Here’s a table showing all supported versions, AEM compatibility, and links to corresponding documentation:

Component Version
AEM as a Cloud Service
AEM 6.5.16.0 Forms or later
v1
Compatible with
release 2.0.4 and later
Compatible with
release 1.1.12 and later but less than 2.0.0.

For information on Core Component versions and releases, refer to the Core Components Versions document.

Technical Details technical-details

Get the latest information on the Adaptive Forms Container Core Component in the technical documentation on GitHub. For more on developing Core Components, check out the Core Components developer documentation.

Configure Dialog configure-dialog

You can easily customize your form container experience for visitors with the Configure Dialog. You can also define form container options with ease for a seamless user experience.

Basic Tab basic-tab

Basic tab

  • Title - With its Title, you can easily identify a component in a form and by default, the title appears on top of the component. If you do not add a title, the name of the component is displayed instead of the title text.

  • Prefill services - This option allows the user to select a prefill service for retrieving data when the Adaptive Form is rendered. Learn more about how to create and configure a prefill service.

  • Role: The role is an HTML attribute used to specify the purpose of an HTML element to assistive technologies such as screen readers. The role attribute is used to provide additional context and semantic meaning to an element, making it easier for screen readers to interpret and announce the content to the user. For example, in AEM Forms, a form field’s label might have the role of “label,” and its input field might have the role of “textbox.” This helps the screen reader understand the relationship between the label and input field, and correctly announce them to the user.

  • Client Library category - The user can configure custom JavaScript library per Adaptive Form. It is recommended to keep only the reusable functions in the library, which have dependency on jquery and underscore.js third-party libraries.
    At times, if there are complex validation rules, the exact validation script reside in custom functions and users calls these custom functions from field validation expression. To make this custom function library known and available while performing server-side validations, the form user can configure the name of AEM client library under the Basic tab of Adaptive Form Container properties.
    User can configure customJavaScript library per Adaptive Form. In the library, only keep the reusable functions, which have dependency on jquery and underscore.js third-party libraries.

Data Model Tab data-model-tab

Submission tab

You can use the Form Data Model to connect a form to a Data Source to send and receive data based on user actions. You can also connect a form to a JSON schema to receive the submitted data in a pre-defined format. Based on the requirement, connect your form to a JSON schema or Form data model:

  • Create a JSON Schema and upload to your environment
  • Create a Form Data Model

Drafts

Submission tab

  • Automatically save drafts: Select the Automatically save drafts check box to enable saving of forms as drafts.
  • Save Preference: Configure Save Preference as Save drafts at regular intervals, to auto-save the form after a specific interval of time.
    Save interval frequency (Seconds): Specify the time interval (in seconds) to set the duration that triggers the automatic saving of the form at the defined interval.

Submission Tab submission-tab

Users can configure different actions for an Adaptive Form submissions.

  • Redirect URL/Path - This option allows user to configure a page for each form, to which the form users are redirected after submitting an Adaptive Form. Click here for more information on how to configure redirect pages.

Submission tab

  • Show Message - This option allows users to add a message that is displayed when the Adaptive Form is successfully submitted. The predefined text is included in the dialog box and it can be modified by the user. The Show Message dialog supports rich text formatting tools that allow users to format the added text.

Show Message tab

  • Submit Action - A Submit Action is triggered when a user clicks the Submit button on an Adaptive Form. The users can select Submit Actions from the drop-down list that are supported out of the box. Learn how to configure a Submit Action in the Submission tab.

Design Dialog design-dialog

Design Dialog is used to define and manage CSS styles for the Form Container component.

Allowed Components Tab allowed-components-tab

Design dialog allowed component tab

The Allowed Components tab allows template editor to set the components that can be added as items to the panels in the component in the Adaptive Forms editor.

Default Components Tab default-components-tab

Design dialog default component tab

The Default Components tab allows the template editor to specify the components that are visible by default as items in the form container component in the Adaptive Forms editor.

Responsive Settings Tab responsive-tab

Design dialog responsive settings tab

The Responsive Settings tab allows the template editor to specify the number of columns in the grid within the form container component in the Adaptive Forms editor.

Styles Tab styles-tab

The Adaptive Forms File Attachment Core Component supports the AEM Style System.

Design Dialog

  • Default CSS Classes: You can provide a default CSS class for the Adaptive Forms Form Container Core Component.

  • Allowed Styles: You can define styles by providing a name and the CSS class that represents the style. For example, you can create a style named “bold text” and provide the CSS class “font-weight: bold”. You can use or apply these styles to an Adaptive Form in Adaptive Forms editor. To apply a style, in Adaptive Forms editor, select the component you want to apply the style to, navigate to the properties dialog, and select the desired style from the Styles drop-down list. If you need to update or modify the styles, simply return to the Design Dialog, update the styles in the styles tab, and save the changes.

Custom Properties Tab

Custom Properties Dialog

Custom properties allows you to associate custom attributes (key-value pairs) to an Adaptive Form core component using the form template. The custom properties are reflected in the properties section of the headless rendition of the component. It allows creating dynamic form behavior that adapts based on the custom attributes values. For example, developers can design various renditions of a Headless Forms component for mobile, desktop, or web platforms, significantly enhancing the user experience across a wide array of devices.

  • Group Name: You can provide a name to identify the custom property group. You can add, delete, or rearrange multiple custom property groups. After adding the custom property group, you can see the following options:

    • Key-Value Pairs: You can add multiple custom property names and custom property values by clicking the Add button for each custom property group.

    • Delete: Tap or click to delete the custom property name and custom property value.

    • Rearrange: Tap or click and drag to rearrange the order of the custom property name and custom property value.

See Also see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c