Header header-adaptive-forms-core-component
A Header component in an Adaptive Form is a section at the top of the form that typically includes the title, logo, or name of the form. The header can also include other information such as a brief description of the form’s purpose, the name of the organization that created the form, or contact information for help with the form. The header is used to give users an overview of the form and provide context for the information they are about to fill out. It is used to help users understand the purpose of the form and how to fill it out correctly.
Example
Usage reasons-to-use-header
-
Branding: A header can be used to display the logo or name of the organization that created the form, helping to establish brand recognition and credibility.
-
Context: A header can provide a brief description of the form’s purpose, helping users understand the context in which the form is being used.
-
Navigation: A header can include links or buttons that allow users to navigate to other parts of the website or application.
-
Information: A header can include contact information or links to help resources, making it easier for users to get assistance if they need it.
-
User experience: A header can be used to make the form more user-friendly by providing a clear and intuitive way for users to access and fill in form fields.
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 Header 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 header experience for visitors with the Configure Dialog. You can also define header options with ease for a seamless user experience.
Image Tab image-tab
This part of the header contains the header title and image.
-
Image Asset - This option allows to drop an asset such as image with mouse drag and drop. You can also upload a file from a local file system using the Browse button. After adding an image, three buttons appear at the bottom of the image. After adding an image, three buttons appear at the bottom of the image:
- Edit - Tap or click Edit to manage the renditions of the asset in the Assets Editor.
- Clear - Tap or click Clear to de-select the currently selected image.
- Pick - Tap or click Pick option to select another image from Assets folder.
-
Title - This option is used to add the heading to the header. The predefined text is included in the dialog box, and it can be modified by the user.
-
Link to - You can link the heading to the folder using the Browse icon.
-
Description - A description is a brief text explanation that provides additional information or clarification about the purpose of a specific image.
-
Size (px) - It helps in adjusting the length and width of the image by increasing or decreasing the pixels.
-
Alternative Text - This option is used to enter the text that provides a short and descriptive text alternative for the image, that describes the image to visually impaired users.
-
Image is decorative - Check if the image should be ignored by assistive technology and therefore does not require an alternative text. This applies to decorative images only.
Text tab text-tab
This section allows to enter the text to be included in the header.
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