Multi-step forms

[bgilhome-now]

Describe the feature

Functionality for multi-step forms, shown with a progress bar, step navigation and invalid state indicators for each step with errors.

Motivation

To improve the UX for forms with many fields/sections, with the intention of minimising drop off.

Proposal

Formkit provides an official addon for multi-step forms via @formkit/addons. The proposal is to enable Webform's webform_wizard_page element type in Tide, and map it to the Formkit step type that the addon provides. The entire form schema is delivered to the frontend in the same way as current, and the addon handles step visibility & navigation entirely in the frontend. Form data would be submitted in the same flat structure as current.

A draft PR for the frontend changes has been made at https://github.com/dpc-sdp/ripple-framework/pull/1167 to assist in review.

Benefits

Likely there are many government forms (currently using or planned to use SDP) which are quite lengthy and provide a UX drawback if presented as a long stack of fields, making navigation and feedback slightly clunky. Splitting into small steps to be presented one at a time would provide an easier experience and may even result in higher submission conversions.

Drawbacks

Some UX & design consideration is required, for example around form actions placement, mobile layout and styling, but these are not blockers.

Adoption strategy

Could be documented in Storybook, and Tide documentation.

Additional information

• [X] Would you be willing to help implement this feature?
• [ ] Could this feature be created outside of Ripple-framework as a layer?

Final checks

• [X] I have read the contribution guide for information on submitting a feature request.
• [X] I have checked the discussions and issues for duplicate feature requests.

[dylankelly]

Thanks for feature request @bgilhome-now - Will take it to the next feature review meeting and give you an update here about how we want to proceed