The focus of the design and layout changes lies on the forms. The UX team identified some issues that do not take common best practices into account. The visual direction and visual fixation of the form flow is quite complex. Its complexity should be reduced. Also form field placeholders are misused as labels, so once a user entered a value into a field, the intended context is gone.

Acceptance Criteria

• Each form field has a label.
• Placeholders describe the intended input by an example.
• The form layout is implemented as shown in the mock.
• The element containing a summarization of the user's input is simplified as shown in the mock.
• The element showing the validity of form sections is removed.
• There is only one submit button at the bottom of the form.
• When interacting with form fields, the viewport is not scrolled anymore.
• Form fields are still being validated client-side and show validity indication.
• Server-side validation errors (that were not caught on the client) are displayed in the form when redisplaying the form.
• The bank account data section is visible depending on the selected payment type (direct debit).

Notes

• This task contains ground work for componenent creation (if not already done during address change form implementation).
• Asynchronous server-side validation can be dropped, except for bank account data and e-mail address.