Terms and Conditions component
A Terms and Conditions component refers to a section within a form that outlines the terms, rules, and conditions that users must agree to or comply with when using a service or accessing content.
The Terms and Conditions component is a composite component which comprises of Text, Checkbox, and Link components. The text component contains a title along with a brief overview of the purpose and scope of the terms and conditions. It also includes a checkbox used to obtain explicit consent from the user. You can also replace a consent text with links.
Example
See Sub-components of Terms and Conditions component section, to learn more about different components of Terms and Conditions component.
Usage
-
User Agreement: The component serves as an agreement between the service provider and the user. Users are required to acknowledge and agree to the terms before accessing the service or content.
-
Legal Compliance: It ensures legal compliance and protection for the service provider by outlining the rights, responsibilities, and liabilities of both parties.
-
Registration Processes: The registration or sign-up forms include the Terms and Conditions component, requiring users to explicitly agree to the terms before creating an account or using a service.
-
E-commerce Transactions: Online websites include the Terms and Conditions component so that users are prompted to agree to the terms and conditions as part of the checkout process before making purchases online.
-
Security and Privacy Agreements: The Terms and Conditions component includes details on how the user data is collected, stored, and used, often complemented by a separate privacy policy
Version and Compatibility
The Adaptive Forms Accordion Core Component was released in Feb 2023 as part of the Core Components 2.0.62 for Cloud Service and Core Components 1.1.28 for AEM 6.5.16.0 Forms or later. Here’s a table showing all supported versions, AEM compatibility, and links to corresponding documentation:
release 2.0.62 and later
release 1.1.28 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
Get the latest information on the Adaptive Forms Terms and Conditions Core Component in the technical documentation on GitHub. For more on developing Core Components, check out the Core Components developer documentation.
Configure Dialog
You can easily customize your terms and conditions component experience for visitors with the Configure Dialog. You can also define terms and conditions options with ease for a seamless user experience.
Basic Tab
-
Name - The name uniquely identifies the component in the rule editor. Special characters and spaces are not allowed in the name strings.
-
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.
-
Show Approval Option - Select the option to show the consent checkbox used to obtain explicit consent from the user.
-
Show as a pop-up - Select the option to display the terms and conditions component in a pop-up window.
-
Replace Consent text with weblink(s): Select the option to replace a consent text with a web link. If the option is unchecked the consent text is displayed by default.
-
Hide Title - Select the option to hide the component’s Title.
-
Group child components’ data on form submission(Wrap data in object) - When the option is selected, the data from its child components is nested within the parent component’s JSON object. However, if the option is not selected, the submitted JSON data has a flat structure, with no object for the parent component. For example:
-
When the option is selected, the data from the child components (for example, Street, City, and Zip Code) is nested within the parent component (Address) as a JSON object. This creates a hierarchical structure, and the data is organized under the parent component.
Structure of submitted data:
code language-json { "Address": { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" } }
-
When the option is not selected, the submitted JSON data has a flat structure with no object for the parent component (Address). All data is at the same level, without any hierarchical organization.
Structure of submitted data:
code language-json { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
-
-
Bind Reference - A bind reference is a reference to a data element that is stored in an external data source and used in a form. The bind reference allows you to dynamically bind data to form fields, so that the form can display the most up-to-date data from the data source. For example, a bind reference can be used to display a customer’s name and address in a form, based on the customer’s ID entered into the form. The bind reference can also be used to update the data source with data entered into the form. In this way, AEM Forms enables you to create forms that interact with external data sources, providing a seamless user experience for collecting and managing data.
-
Hide Component - Select the option to hide the component from the form. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor. This is useful when you need to store information that doesn’t need to be seen or directly changed by the user.
-
Disable Component - Select the option to disable the component. The disabled component is not active or editable by the end user. The user can see the value of the field but cannot modify it. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor.
-
Read-only - Select the option to make the component non-editable. The user can see the value of the field but cannot modify it. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor.
Help Content Tab
-
Short description - A short description is a brief text explanation that provides additional information or clarification about the purpose of a specific form field. It helps the user understand what type of data should be entered into the field and can provide guidelines or examples to help ensure that the information entered is valid and meets the desired criteria. By default, short descriptions remain hidden. Enable the Always show short description option to display it below the component.
-
Always show short description - Enable the option to display the Short description below the component.
-
Help text - Help text refers to additional information or guidance that is provided to the user to assist them in filling out a form field correctly. It appears when the user clicks the help icon (i) placed next to the component. Help text provides more detailed information than a form field’s label or placeholder text, and is designed to help the user understand the requirements or constraints of the field. It can also offer suggestions or examples to make filling out the form easier and more accurate.
Accessibility Tab
Text for screen readers - Text for screen readers refers to additional text that is specifically intended to be read by assistive technologies, such as screen readers, used by visually impaired individuals. This text provides an audio description of the form field’s purpose, and can include information about the field’s title, description, name, and any relevant messages (Custom text). The screen reader text helps ensure that the form is accessible to all users, including those with visual impairments, and provides them with a complete understanding of the form field and its requirements.
Design Dialog
Design Dialog is used to define and manage CSS styles for the Terms and Conditions component.
Styles Tab
The tab is used to define and manage CSS styles for a component. The Adaptive Forms Terms and Conditions Core Component supports the AEM Style System.
-
Default CSS Classes: You can provide a default CSS class for the Adaptive Forms Terms and Conditions 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
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.
-
Sub-components of Terms and Conditions component
Terms and Conditions component is a composite component which comprises the following sub-components:
Link component
This component replaces a consent text with a web link or links. It is used in a scenario, where user aims to offer references to particular sections, additional information, or external documents. You can easily customize the Link component individually for visitors with the Configure Dialog.
Basic Tab
-
Name - The name uniquely identifies the component in the rule editor. Special characters and spaces are not allowed in the name strings.
-
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.
-
Hide Title - Select the option to hide the component’s Title.
-
Links - Specify the link and the corresponding display text that is used in place of the consent text. You can add multiple links by clicking the Add button.
-
Bind Reference - A bind reference is a reference to a data element that is stored in an external data source and used in a form. The bind reference allows you to dynamically bind data to form fields, so that the form can display the most up-to-date data from the data source. For example, a bind reference can be used to display a customer’s name and address in a form, based on the customer’s ID entered into the form. The bind reference can also be used to update the data source with data entered into the form. In this way, AEM Forms enable you to create forms that interact with external data sources, providing a seamless user experience for collecting and managing data.
-
Mark as Unbound Form Element: Select the option to configure a form field not linked to any schema. This option allows you to save data without updating the data source. It also enables you to handle data in a custom way, separate from standard database integration.
-
Hide Component - Select the option to hide the component from the form. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor. This is useful when you need to store information that doesn’t need to be seen or directly changed by the user.
-
Disable Component - Select the option to disable or lock the component. The disabled component is not active or editable by the end user. The user can see the value of the field but cannot modify it. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor.
-
Read-only - Select the option to make the component non-editable. The user can see the value of the field but cannot modify it. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor.
Validation Tab
-
Required - Select this option, if you want to display the component in an Adaptive Form. After selecting the option, you must make a selection before proceeding with a form submission. You cannot select the Hide Component or Disable Component in the Basic tab when this option is selected.
-
Error Message - This option allows you to enter a message that is displayed if the Required checkbox is checked and the form field is left blank.
-
Script Validation Message - This option allows you to enter a message to be displayed if the script validation fails.
Help Content Tab
-
Short description - A short description is a brief text explanation that provides additional information or clarification about the purpose of a specific form field. It helps the user understand what type of data should be entered into the field and can provide guidelines or examples to help ensure that the information entered is valid and meets the desired criteria. By default, short descriptions remain hidden. Enable the Always show short description option to display it below the component.
-
Always show short description - Enable the option to display the Short description below the component.
-
Help text - Help text refers to additional information or guidance that is provided to the user to assist them in filling out a form field correctly. It appears when the user clicks the help icon (i) placed next to the component. Help text provides more detailed information than a form field’s label or placeholder text, and is designed to help the user understand the requirements or constraints of the field. It can also offer suggestions or examples to make filling out the form easier and more accurate.
Accessibility Tab
Text for screen readers - Text for screen readers refers to additional text that is specifically intended to be read by assistive technologies, such as screen readers, used by visually impaired individuals. This text provides an audio description of the form field’s purpose, and can include information about the field’s title, description, name, and any relevant messages (Custom text). The screen reader text helps ensure that the form is accessible to all users, including those with visual impairments, and provides them with a complete understanding of the form field and its requirements.
Text component
Text component displays the textual content that provides information to users. This component includes the actual terms and conditions, legal language, or any other relevant textual information.
You can easily customize the Text component individually for visitors with the Configure Dialog. To define text options with ease for a seamless user experience, use the configure dialog of the text component.
Checkbox component
A checkbox is used to obtain user consent or acknowledgment. It serves as a visual indicator that the user has read and agreed to the terms outlined. It is mandatory to select the checkbox to indicate the consent of the user.
You can easily customize the Checkbox component individually for visitors with the Configure Dialog. To define the properties of checkbox for a seamless user experience, use the configure dialog of the checkbox component.
Related Articles
- Accordion
- Button
- Check Box Group
- Checkbox
- Date Picker
- Drop-down list
- Email-input
- Form Container
- File Attachment
- Form Fragment
- Footer
- Header
- Image
- Number Input
- Panel Container
- Horizontal tab
- Vertical tab
- Radio Button
- Reset Button
- Submit Button
- Switch
- Telephone input
- Text Input
- Text
- Title
- Terms and Conditions tab
- Wizard
See Also
- Create an AEM Adaptive Form
- Add an AEM Adaptive Form to AEM Sites page
- Apply themes to an AEM Adaptive Form
- Add components to an AEM Adaptive Form
- Use reCAPTCHA in an AEM Adaptive Form
- Generate PDF version (DoR) of an AEM Adaptive Form
- Translate an AEM Adaptive Form
- Enable Adobe Analytics for an Adaptive Form to track form usage
- Connect Adaptive Form to Microsoft SharePoint
- Connect Adaptive Form to Microsoft Power Automate
- Connect Adaptive Form to Microsoft OneDrive
- Connect Adaptive Form to Microsoft Azure Blob Storage
- Connect Adaptive Form to Salesforce
- Use Adobe Sign in an AEM Adaptive Form
- Add a new locale for an Adaptive Form
- Send Adaptive Form data to a database
- Send Adaptive Form data to a REST endpoint
- Send Adaptive Form data to AEM Workflow
- Use Forms Portal to list AEM Adaptive Forms on an AEM website