Components: Forms
This section outlines how to create consistent and user-friendly forms for use across Plant Parents digital products.
Quick Summary
Creating Forms: All forms should be created using the form html elements and it's
included sub-elements. Ensure forms have 25px padding between themselves and other page components,
and have a width of 100% of their section.
View on Codepen.
Input Fields: Set the width to 100%, with a top/bottom padding of 12px, and
left/right padding of 20px. Add a top margin of 10px and a bottom margin of 20px. Border radius
should be set to 5px, and a solid border should be added in the brand colour Leaf Green.
Labels: Set the font-colour of labels to Charcoal with a font weight of 500.
Submit: Set the submit button's width to 100%, and style the button with one of the
solid button variation styles listed in the Buttons section.
Responsive Layout: In most cases, organize form elements vertically, only using
horizontal layouts where appropriate. Always use a vertical layout on mobile devices.
Creating Forms
When creating web forms, a vast number of inputs and options are available. Regardless of the form being created, in order to ensure consistency across all forms for Plant Parents digital products, follow the guidelines detailed below.
Input Fields
All form input fields should be styled to improve readability and accessibility. With all
types of input fields, increased margins and padding should be added to accomplish this.
The input fields should also be styled to have rounded Leaf Green borders with a border
radius of 5px.
In addition, placeholder values should be added for input fields where appropriate.
Responsive Layout
When implementing web forms for Plant Parent products, it is preferred to have all labels and
fields organized vertically. By doing so, you can increase the liklihood of your form
performing well on mobile devices, and reduce the amount of responsive adjustments needed.
If you are creating a form which requires or suits some horizontally organized input fields,
be sure to add media queries so that when viewed on a mobile or tablet device, the form is
organized vertically.
Labels
Labels should always be set to the Charcoal brand colour, with a font weight of 500.
Submit
The submit button at the end of a Plant Parents form should always span the width of the form, and should be styled with one of the solid button variation styles listed in the Buttons section of this design system.