You are using Internet Explorer 11 or earlier, this browser is no longer supported by this website. We suggest to use a modern browser.

UCP Pattern Library
UCP Pattern Library
UCP Pattern LibraryUCP Pattern LibraryUCP Pattern Library
  • Deutsch
  • Pattern Library
  • flexible
    • Deutsch
  • Home
  • Patterns by type
  • Special projects
  • Form Builder

Form Builder

The component replaces the "Dynamic Forms" component.

The following workflows can be mapped with the component:

  • Entering data and transferring it to the columns of a data table

  • Entering data and sending the data by e-mail

  • Input of data and transfer of data to defined interface (APIs)

It is also possible to transfer the content from the forms to several of the above mentioned workflows.

For example, data can be passed to a data table in the suite and an email workflow can be triggered in parallel to notify a person.

There are several types of input fields:

  • Text

  • Selection

  • Time/Date

  • Special fields

Example page view

The module is marked in orange

zoom

The module consists of the following 3 tabs:

TabsDescription
General settingsIt contains headlines, text information, success/error message and handling, button labels, etc
LayoutsYou can customize the layout of the form
Input fieldsAdd different form fields in the form
Post processingAdd workflow to the form (Eg sending email)

General settings

This tab consists of the following:

ContentDescription
HeadlineText to be displayed as headline
SubheadlineText to be displayed as subheadline
Hint textText to be displayed as hint
Send buttonLabel of send button
Mandatory information
Text to displayed for mandatory fields
Success message typeWhether you want to display text or redirect to a page on success
Headlinetitle to be displayed on success toast message
Information textinformation to be displayed on success toast message
Error message typeWhether you want to display text or redirect to a page on Error
Form Error texttext to be displayed on error toast message

Layouts

This tab consists of the following:

ContentDescription
Display form in two columnsIf you check this checkbox, you can see following fields:
Image - you can select/upload any image which needs to be displayed
First hint text - first text to be displayed
Add icon -
select the option whether you want phone icon or not
Second hint text -
second text to be displayed
Third hint text -
third text to be displayed
Enable wizard modeIf you check this checkbox, you can see following fields:
Form step - prefix which is displayed at top right corner of the form
Next-Button - label of the next button
Prev-button -
label of the rev button

Input fields

This tab consists of the following:

ContentDescription
Field groupsYou can create many groups by clicking '+group'
Technical nameAfter clicking on '+group' you will see this field. Here, you can give the group a name
Headlineheadline for the form
Descriptiondescription for the form
Input fieldsAdd input fields by clicking on '+input field'
General SettingsWhen you will add input field by clicking on '+input field', you will see this input field.
In this tab, we have following fields:
Type - type of the input (text, checkbox, radio)
Label - Label of the field
Fieldname - technical name for input
Prefilled value -
default value for the input
Placeholder -
placeholder to be displayed inside the input
ValidationIn this tab, you can add validation. The following fields can be seen in this tab:
Required - you can check this checkbox if you want the input to be mandatory field
Error message - text to be displayed on error
Validation -
you can add other validation like max, min, regex by clicking on '+validation'

Post processing

This tab consists of the following components

Content areaDescription
Post processYou can add a process/workflow to the form by clicking on '+Process'
MAILWhen you select Email workflow from the available options after clicking on '+process', you will see the following fields:
Receiver - When you click on '+Email', you can add the email id of the receiver
Subject text - Subject of the mail
Template -
You can select the template of the mail (E.g table)
Attachment file type -
The data file attached with email should be in which format
SALESFORCEWhen you select Salesforce workflow from the available options after clicking on '+process', you will see the following fields:
Create Fieldmapping -you can add list of data to be sent to salesforce click on '+Zuordnung', you can see the below fields
Form-Element - You can add the form element whose value is to be sent
Lead Property -
you can select the salesforce lead to which you need to send the above form element value

The module can be used in the following templates and page areas:

Startpage
stage
content
Content Page
stage
main content
right
bottom
Flexible Layout
full-width
default
default with sidebar right
sidebar
sidebar
default with sidebar left
The blue area indicates that the module is applicable in this content area.

This module can be used in the following themes:

  • Internet
  • Intranet
  • Suite
The blue area indicates that the module is applicable in this theme.

Example page “Form Builder"

Example page

arrow-down UCP Pattern Library

  • brandfactory
  • media pool - das Digital Asset Management System für thyssenkrupp
  • CMS Login

Follow us

  • Global Corporate Website
© thyssenkrupp AG 2023
  • Sitemap
  • Imprint
  • Legal Notes
  • Share tk-share
    FacebookTwitter Email LinkedIn