AccordionForm The Accordion Form is a feature that allows forms to be included within hidden subsections - the user can click on the accordion form button to open that section to reveal the form.
  • Use Cases: Used to keep forms hidden and only be displayed when the user clicks the accordion form button. If the user wants to close the accordion form again, hiding the form, they can click the close button present in the accordion form.
  • Dependencies
    • Mvc Form. Although the Accordion Form is fully self-contained and does not rely on child items or external data sources to be displayed in the page, it has the function to show a form, so it makes sense to be added to a page if a Mvc Form is also added within the Accordion Form.
  • Layout Types: The accordion form displays collapsible sections of content with a form inside. The accordion form can be expanded or collapsed by the user at any time. By default the accordion form is collapsed.
Open Accordion Form - Example

FIELD 1*

FIELD 2*

Creating an Accordion Form
  1. In Content Editor, create a "AccordionFormsFolder" under the "_datasources" of your page
  2. Create a new AccordionForm item from the AccordionForm template.
  3. Fill in optional fields: FormTitle, ButtonText
  4. In Experience Editor, insert the AccordionForm rendering into the awt-container
  5. Associate the AccordionForm item as the data source.
  6. Still in Experience Editor, click on the AccordionForm button to expand the accordion hidden section, then add a Mvc Form rendering into the awt-accordion-form-content placeholder within the AccordionForm.
  • None : There are no variants for this component.
  • Theme or colors cannot be customized today. It's only properly visible when added to a container with a darker color.
Original Documentation: Confluence Link Designs: Figma Link