Forms
Forms can consist of up to five elements, which can all be combined depending on the application:
- Headline
- Input field
- Dropdown
- Re-captcha checkbox
- Button
Example contact form
The elements are grouped vertically by topic, for example:
a. Headline and sub headline of the form
b. Topic and message
c. Contact details
d. Example error state of an input field
e. Re-captcha checkbox
f. Reset button and submit button
Input fields can also be grouped horizontally to identify related data, e.g. street and house number or postcode and city. The whole form runs over 8 columns centered in the three largest viewports.
Input field
The input field is available in 3 sizes:
a. Large (size L, 8 columns)
b. Medium (size S, 4 columns)
e. Small (size XS, 3 columns)
Medium and small input fields can be combined with each other, e.g. two medium fields or one medium and one small field in a row (see example Form).
Each input field has three states:
a. Default
b. Filled in
d. Error
c. It can be combined with a title and an additional hint to explain the
topic of the field in more detail.
Dropdown
a. In the initial state, the dropdown is closed, the arrow points down.
The dropdown can either be used for
b. single choice
c. or multiple choice
In the active state, the arrow points up, the mouse over color is dark grey and selected items appear in corporate color. As long as nothing is selected, the Button of the multiple-choice version (see c) appears inactive in box grey. Once the user selects an item, the Button changes into the Corporate color of the site.
If there are more than six items to be displayed, a scrollbar is inserted on the right.
Buttons
Buttons are inserted right-aligned to support the reading flow.
a. The reset button stays inactive as long as nothing is edited in the form.
b. The submit button is used in the icon version to make it clear that this is the main call to action.
Left: The form as a whole behaves the same in all versions for the three largest viewports.
Right: Only the smallest viewport displays it on a 12 columns width.
Related topics