Forms

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.

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.

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