Forms are a vital part of an eCommerce user interface, as we use forms to take users details, whether that be in the checkout, signing up for an account or to contact us.
Labels should be above a form field. Never put a label within a field, as when a user starts to input, they lose the context of the form.
Labels don't need to have an asterisk to show that a form is required. In most cases, all form fields should be required, otherwise there's little need to show them to the user. It's better to use the (optional) label, as this functions well on screen readers.
Form fields should have an outline and a slight inner shadow, to show the user that they need to add something inside.
They should also show a focussed state, shown in a change of border colour of the field.
We should also use tooltip text to help the user do what they need to do (e.g. complete the form field).
When fields are in error, we outline the field red and we show some validation text above to help the user find out what is wrong.
Select dropdowns should be used when the user has to make a selection from a number of options e.g. Country or Size. Contents should be ordered in an intuitive way. The first option should tell the user what they need to do e.g. Select size.
We use panels to selectively show or hide options to the user. They usually contain forms.
For panels that aren't required, we use a subtler treatment.