Form title component title-input-adaptive-forms-core-component
In an Adaptive Form, a “title” refers to the text that appears at the top of the form, typically below the header. The title is specified using the Title component. This component can be added to the form layout, and its text can be edited to match the purpose or topic of the form. The title serves as a label or brief description of the form to the user, and it helps to distinguish the form from others.
Example
Usage reasons-to-use-title-in-an-adaptive-form
There are several reasons why it’s a good practice to use a title in a form:
-
Clarity: A title clearly identifies the purpose of the form, which helps users understand what information they need to provide.
-
Organization: A title can help to organize forms by topic or purpose, which makes it easier for users to find the form they need.
-
Accessibility: A title is a key element for users with accessibility needs, as it is read out loud by screen readers, helping users understand the context of the form.
-
Branding: A title can also be used to display a company or organization’s name, which helps to create a sense of trust and familiarity with the user.
-
Navigation: A title can also be useful to navigate through the form, especially if the form is long or complex.
-
Search Engine Optimization (SEO): Having a title on the form also helps in SEO, as search engines use the title to determine the relevance of a web page to a search query.
Overall, the title of a form is an important aspect of the user experience and it should be used to provide a clear and concise label for the form that helps users understand the context and purpose of the form.
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:
release 2.0.4 and later
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 Title 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 title experience for visitors with the Configure Dialog. You can also define title options with ease for a seamless user experience.
The edit dialog allows the content author to define the title text as well as select the heading level.
-
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.
-
Type /Size - Defines the heading level of the title.
-
ID - This option allows to control the unique identifier of the component in the HTML and in the Data Layer.
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.
Design Dialog design-dialog
Design Tab is used to define and manage CSS styles for the form title component.
Title
The Title Tab allows template authors to set default and allowed HTML heading elements for form authors:
-
Allowed Heading Elements: A list with multiple options that lets the template author choose which headings elements can form author can use for Title.
-
Default Heading Element: A drop-down list that sets the default Heading element for Title component.
Styles Tab styles-tab
The tab is used to define and manage CSS styles for a component. The Adaptive Forms Date-picker Core Component supports the AEM Style System.
-
Default CSS Classes: You can provide a default CSS class for the Adaptive Forms Title 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.
Formats Tab format-tab
The formats tab allows you to specify default and custom date formats.
Related Articles related-articles
- Accordion
- Adaptive Form Fragments
- Adaptive Form reCAPTCHA
- Button
- Check Box Group
- Checkbox
- Date Picker
- Drop-down list
- Form Container
- Form Title
- File Attachment
- Footer
- Header
- Image
- Numeric Box
- Panel
- Phone
- Horizontal tab
- Vertical tab
- Radio Button
- Reset Button
- Submit Button
- Text Box
- Text
- Terms and Conditions tab
- Wizard
See Also 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