Forms

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.

  • Forms should be mobile-first in design and slightly over-sized
  • We should provide validation where appropriate e.g. taking credit card numbers, expiry dates and passwords (for strength).
  • Labels should usually be above fields, textboxes or select dropdowns. Exception would include e.g. a newsletter signup in a small wide space.
  • Forms fields, when focussed, should have an orange outline, to show to the user quickly which field they are currently completing.

Labels

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.

Fields

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).

This should be at least 6 digits and contain both letters and numbers

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.

This should be at least 6 digits and contain both letters and numbers
Please ensure you have entered a password with at least 6 characters containing both letters and numbers

Panels

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.