Currently, we do not have a standard form in AEM to collect data. However, using the default ACS Bootstrap stylesheet will ensure that all forms are consistent for all ACS websites and applications. Labels should be clear enough to help users understand the information that they need to enter into each form field.

Forms | Standard Elements Sass file: /sass/_acs-forms.scss

Single Column

label (inline inputs)

label (stacked inputs)
Two Columns
Please fill out this field.
Error messaging handling here

Mobile Note: Stacking order

Be mindful of how you groups and arrange the columns, it is important that it stack in the right order on a mobile device.

Accessibility Note: Label element

To build an accessible form, one of the most important element — is the label element. When implemented properly, it will allow screenreaders to speak a form element's label along with related instruction. We suggest wrapping the radio and checkbox input inside the label because the clickable selection is much larger, therefore it is easier to use.

Try it! Notice the different?