Guidance
Complex or lengthy forms can be broken down into smaller, more manageable sections.
You can use accordions to only show your users one section at a time on a single page. This will allow users to focus on one section at a time and provide a more streamlined and less overwhelming user experience.
Form section states
This example shows the different states available for each section:
.complete: A section that complete. If you've implemented save within each section, you could show the user the data they entered and offer an edit button if they need to make changes..not-complete: A section that is not completed yet..current: The active section the user is working on..disabled: A section that is not completed yet and will not be accessible until another section is complete. This is useful if your form has logic where the data in one section can change fields in another section.
-
Contact details
John Smith
john.smith@gmail.com
(506) 555-5555 -
Address
Mailing address
-
Preferences
Language
Contact method
-
Form section
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
HTML
<!-- Form sections -->
<div class="gnb-accordion-pane">
<ol class="gnb-accordion-form-sections" data-aria-accordion data-multi>
<!-- Section state: complete -->
<li class="gnb-accordion-container complete">
<div class="gnb-accordion-heading">
<h3>Form section title</h3>
</div>
<div class="gnb-accordion-panel">
<h4>Heading</h4>
<form>
Form content
</form>
</div>
</li>
<!-- Section state: current -->
<li class="gnb-accordion-container current">
<div class="gnb-accordion-heading">
<h3>Form section title</h3>
</div>
<div class="gnb-accordion-panel show" aria-hidden="false">
<h4>Heading</h4>
<form>
Form content
</form>
</div>
</li>
<!-- Section state: not complete -->
<li class="gnb-accordion-container not-complete">
<div class="gnb-accordion-heading">
<h3>Form section title</h3>
</div>
<div class="gnb-accordion-panel">
<h4>Heading</h4>
<form>
Form content
</form>
</div>
</li>
<!-- Section state: disabled, not complete -->
<li class="gnb-accordion-container disabled not-complete">
<div class="gnb-accordion-heading">
<h3>Form section title</h3>
</div>
<div class="gnb-accordion-panel">
<h4>Heading</h4>
<form>
Form content
</form>
</div>
</li>
</ol>
</div>