[MoFo Unified Design] Form fields

[kristinashu]

Problem

We have so many different types of form fields

Progress

We need to design form fields to use on all of our sites. Our starting point is bootstrap http://v4-alpha.getbootstrap.com/components/forms/

I've made some minimal tweaks to it for science: https://redpen.io/dq01e5e243a5cd0634

We will need someone to take this on more in depth to explore other options, make sure it will work for all the sites, add error and active states.

Considerations & Decisions

Accessibility, different responsive sizes, errors and validation, email signups...

Following steps

This ticket is to decide as a group:

• which sites will use these fields
• design the fields
• design review the fields
• add fields to the Tool Kit
• discuss implementation with engineers

cc: @sabrinang

[sabrinang]

Updating forms for teach as well using full width field and checkbox structure: https://redpen.io/cg7a422f47a656dd0e

[sabrinang]

A progress bar can be considered along with the form fields for long, sequential forms. Example from the Club Captain application form (mozilla/learning.mozilla.org#1822)

[kristinashu]

New ticket mozilla/mofo-bootstrap#93