Form Builder

The Form Builder is the backbone of creating an intuitive and interactive configurator. It defines the layout, structure, and user inputs that end-users interact within the frontend of your configurator. In Mercura’s CPQ, the Form Builder is organized into two main components: Groups and Elements, which together form the steps of the configuration journey.

Groups: The Main Steps

Groups represent the primary steps in the configurator, as seen in the frontend’s sidebar. They organize the configuration process into manageable sections, providing a logical flow for users.

Fields within Groups

Field	Description	Details
Label	The name of the group as displayed in the frontend.	Fully localized to accommodate different languages.
Description	A markdown field to add detailed descriptions or guidance about the group.	Supports formatting for better readability and emphasis.
Active	A toggle to control whether the group is visible and accessible to users.	If disabled, the group will not appear in the configurator.
Image	A static image that visually represents the group in the frontend.	Useful for enhancing the configurator’s aesthetics and providing visual cues.

Component	Role	Details
Groups	Overarching categories or “main steps.”	- Each group organizes related elements. - Displayed in the sidebar as the primary navigation.
Elements	Detailed “sub-steps” within a group.	- Elements define user inputs (e.g., text fields, checkboxes). - Each group contains one or more elements.
How They Work Together	Groups guide users through a step-by-step process, with elements providing specific input options for each step.	- Clear organization for a seamless configuration experience.

Elements: The Sub-Steps

Within each group, Elements define the specific inputs and options/products that users will interact with. These are the detailed “sub-steps” of the configurator, where actual configuration choices are made.

Fields within Elements

Field	Description	Details
Label	The name of the element as displayed in the frontend.	Localized for language flexibility.
Description	A markdown field for adding supplementary information or instructions.	Ideal for explaining complex options or guiding user decisions. Localized for flexibility.
Active	A toggle to control the visibility of the element.	Only active elements are shown to the user.
State	Determines the behavior of the element.	- Standard: The element is optional and behaves normally. - Required: Must be completed. - Disabled: Invisible and not interactive.
Type	Defines the input method for the element, based on standard HTML input types.	See breakdown of available types below.
Price Effect	Specifies how the element influences the price.	- Addition: Adds a specific value to the base price. - Multiplication: Multiplies base price. - None: No price effect.
Visual Enhancements	Attachments to enhance the frontend experience.	- Image: Attach an image to represent the element visually. - 3D Model: Integrate for interactive experience.

Breakdown of Input Types

Type	Description	Features	Example
Number	Users enter or select numbers.	Default value, Min/Max values, Step (e.g., increments of 1, 5, or 0.1).	Set table length between 50 and 300 cm, steps of 10.
Text	Users type words, phrases, or codes.	Default value, Placeholder text, Input format (e.g., letters, numbers, or patterns).	Enter initials to engrave on a product.
Range	A slider for selecting values within a set range.	Default value, Min/Max values, Step.	Adjust chair height from 30 to 60 cm in steps of 5.
Checkbox	Users select one or more options/products.	List of options/products, Default selected options.	Select car features like sunroof, heated seats.
Radio	Users select only one option/product from a group.	List of options/product, Default selected option.	Choose a color: Red, Blue, Green.
Select	A dropdown menu for single-option selection.	List of options, Default selected option.	Choose shipping method: Standard, Express.

Next Steps: Defining Options for Elements

Some input types—checkboxes, radio buttons, and dropdown selects—support Options/Products, which enhance configurators by providing predefined choices. In the next section, we’ll explain how to define and customize options for these input types.

Adding Options/Products to Elements in the Form Builder

When creating a configurator, options/products play a crucial role in defining the choices available for specific element types. Options/Products enrich the user experience by offering detailed, customizable selections for each element.

Fields within Options/Products

Field	Description	Details
Label	The name of the option displayed to the user.	Localized to support multiple languages.
Text	A markdown field for adding detailed descriptions or guidance about the option.	Supports formatted text for clarity and emphasis.
Image	An image uploaded to visually represent the option.	Useful for differentiation and visual clarity.
3D Model	A 3D model uploaded for an interactive experience.	Ideal for showcasing product variations in 3D.
Allow Quantity	A toggle that allows users to specify a quantity for the option.	Includes fields for Minimum Quantity and Maximum Quantity.
SKU	A field to assign a Stock Keeping Unit (SKU) to the option.	Requires setup by Mercura to enable this functionality.

Next Steps: Option Pricing

Options can have distinct prices for each country, defined in the default currency of that country. This allows for regional pricing strategies and ensures flexibility in markets with varied pricing requirements.

Discount Groups for Options

Discount groups allow specific users (such as dealers, distributors, or preferred customers) to receive a discount on certain options. Discounts can be configured as:

• Percentage: A percentage reduction on the option’s price.

• Numerical: A fixed amount deducted from the option’s price.

For more details on setting up and managing discount groups, refer to the Discount Groups Section.

Overview:

Feature	Description	Details
Country-Specific Pricing	Define prices for each country in its default currency.	Enables regional pricing strategies.
Discount Groups	Assign discounts to specific users, such as dealers or distributors.	Discounts can be percentage-based or numerical.