I'm working on a responsive landing page users arrive on after clicking on an online display ad for the spa chain I work for.
Currently I validate the fields on blur. If the input is valid on blur, nothing happens. If the input is invalid, the field changes from a grey outline and white background to a red outline and pink background. An error message also appears right below the input.
On submit, if there are errors, the same validation occurs, but I also list the errors above the form. This list of errors has the same pink background and red outline as my error fields. On a successful submit, a success message appears above the form with a light green background and green outline. Should the errors list be different colors somehow than my errors on the form?
My question is, should the list of errors appear on blur as well as the error below the input? Since I have the error below the input, should I even bother with the list at the top to show errors as well? If I should keep the list of errors, should it even be at the top of the form? Or maybe below it? Between the submit button and form? After the submit? I feel like the shorter the form appears the better the conversion rates.
After a successful submit, I show the success message at the top, and clear a fields. Should the success be at the top or bottom? Should I clear a fields, or should I clear the form completly and not show any fields and just show the success message?