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
Druck

Example contact form

example contact form.jpg

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.

Druck

Input field

input field.jpg

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.

Druck

Dropdown

dropdown.jpg

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.

Druck

Buttons

buttons.jpg

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.

responsive behaviour.jpg

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

 

Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.