-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor Form(s) to Multi-Step Implementation #243
Comments
Description of the Tech DebtCurrently, the application features a single-page form where all the form fields are displayed at once. While functional, this approach can result in a lengthy and potentially overwhelming user experience, especially for complex forms. Implementing a multi-step form can enhance user experience and make the form more user-friendly. Proposed Solution: Formik is an open-source React form library used to build scalable form components ranging from simple to complex with ease. Formik offers React Context powered components:
These components use React Context to connect with the form state/methods and make the form boilerplate less complex.This makes the form component you build with Formik easy to develop, debug and test. What are the advantages of using Formik? Scalability: Formik is a good fit for a complete solution, including validation and handling form submission; we can also keep form state localized and managed by Formik, which is suitable for building multi-step forms. Integrations: A form library like Redux Form doesn’t allow integrations, unlike Formik/React Hook Form. Formik and React Hook Form can integrate with any 3rd party app (especially Yup and Redux) for validations, and you can also use HTML5 inputs with Formik for the form field. Dynamic Multi-Step Forms With Formik Proposed Changes:
Refactor the existing single-page form into a multi-step form with separate sections or steps. Each step should logically group related fields, breaking down the form into manageable parts. Implement a clear and intuitive navigation mechanism that allows users to move forward and backward between form steps. This can be achieved with "Next" and "Back" buttons or a similar approach. Enhance the form validation logic to validate each step individually. Users should be able to progress to the next step only when the current step's fields are correctly filled out. Add a progress indicator to provide users with a visual cue of their position within the multi-step form. This can be in the form of a progress bar, step icons, or a similar UI element. If the form contains fields with conditional visibility (i.e., certain fields are displayed based on user choices), ensure that conditional logic works seamlessly within the multi-step structure. Verify that the multi-step form maintains accessibility standards and provides clear error messages and guidance for users encountering validation errors. Write unit tests for the individual form steps and validation logic. Also, perform end-to-end testing to ensure a smooth transition between steps and proper form submission. Update documentation, including code comments and any user documentation, to reflect the changes and provide clear instructions on using the multi-step form. ###Tech Debt Triage# Risk Value Scoring:
|
Awesome, thanks! @marcellmueller |
Forms to implement:
Pending
on submitThe text was updated successfully, but these errors were encountered: