Forms Module

The Forms module allows authors to quickly and easily create complex forms within the CMS. To achieve this, authors have access to a variety of form elements that are provided by Confinity by default. The following section explains the available form elements and what needs to be considered when designing these components.

Basic Structure of a Form

A form consists of three main visual components:

• Alert Component – The alert component is displayed when an issue occurs. This could be a technical problem or a validation error.
• Form Components – Next, the corresponding form components, such as radio buttons, inputs, select boxes, etc., are displayed.
• Submit Component – A button component to submit the form.

Once a form has been submitted, a Result Component is displayed. Confinity does not provide a default component for this, so it can be designed individually. For example, a simple Alert Component could be used, or a more complex component that displays images, text, links, etc.

Standard Form Components

Below is a list of all standard form components that must be considered when designing the forms component.

Wizard

The wizard allows the creation of multi-step forms. It is displayed as a standard form component below any potential alert component and it can contain all of the other form components.

Mock

Configuration

Step Configuration

Important Notes

• Previous steps, the currently active step, and future steps can be visually distinguished.
• Steps can be numbered if specified in the design.
• Steps are not clickable; navigation is only possible using the buttons (forward, backward) at the bottom.

Input

The input component is a single-line input field for entering text and numbers.

Configuration

Mock

The following mock shows an input field with all possible properties (e.g., prefix, suffix, tooltip, description, etc.) and a second one where only a placeholder text has been configured.

Important Notes

• All properties are optional, although typically at least the label is provided.
• The "Tooltip" property does not necessarily need to be implemented as a tooltip; it is merely a recommendation.
• Please ensure that a potential validation error message can be displayed somewhere.

Textfield

The textfield component is essentially identical to the input component, with the difference that it consists of multiple lines, allowing the user to enter a longer text.

Mock

Configuration

Identical to the input component.

Radio Buttons

With the Radio Button Component, the user of the form can be presented with a list of selectable options. The user can only select one option.

Configuration

Option Configuration

Mock

Important Notes

• There is no limitation on the number of options.
• Whether the radio buttons are displayed side by side or stacked, and how they wrap, can be determined in the design concept.

Checkbox Options

With the Checkbox Options Component, the user of the form can be presented with a list of selectable options. The user can select multiple options.

Mock

Configuration

Identical to the Radio Buttons component.

Selectbox

With the Selectbox Component, the user of the form can be presented with a list of selectable options.

Configuration

Option Configuration

Mock

Important Notes

• There is no limitation on the number of options.

Rich Text

Not really a form element, but a component that allows the author to place rich text between form components.

Checkbox

A simple checkbox that can be used, for example, to require a user to accept the terms and conditions before submitting the form.

Configuration

Mock

Important Notes

• The label of a checkbox component can contain a link.

File Upload

The File Upload Component allows a user to upload files. Files can be uploaded either via drag & drop or using the classic "Select File" dialog.

Configuration

Mock

Important Notes

• We need to display a text somewhere about the allowed file extensions.
• If a file cannot be uploaded, an error message must be displayed for the respective file.
• An uploaded file can also be removed.
• Please ensure that a potential validation error message can be displayed somewhere.

Group

The Group Component is not an actual form element but a component used to group multiple form components. In most cases, a title is simply displayed for a group, but the design could also include a visual grouping, such as a border around the elements.

Configuration

Mock

The following mock shows two groups each of them having two form components.

Inline Group

The Inline Group Component is also not an actual form component, but it allows two form components to be displayed side by side. The following layouts can be chosen:

• 50/50 - Both form components use 50% of the available space.
• 80/20 - The first component is wider than the second (e.g., for Street and Street Number).
• 20/80 - The first component is narrower than the second (e.g., for Zip Code and City).

Configuration

Mock

Custom Form Components

In Confinity, it is also possible to design additional custom form components. If the standard elements are not sufficient, additional individually designed components can be created.