Designing forms using the Form builder

After you create a new form, you can design it using either the Form builder or the Field editor. The Form builder offers an intuitive graphical editor with a limited set of options, intended for non-technical users and marketers.

To display the Form builder interface:

  1. Open the Forms application.
  2. Edit a form.
  3. Switch to the Form builder tab.

The form builder

Adding components to a form

Choose a component in the toolbar on the left and drag it using the mouse into the form area.

  • If you are adding the first component into the form, drop the component into the indicated area.
  • If you are adding another component into the form, you can drop it at the beginning or at the end of the form or between any two existing components.

Tip: You can also double-click a component in the toolbar to add it to the end of the form.

The system automatically saves your form and displays the component’s properties in the right toolbar.

Changing the order of components in a form

Choose a component among the existing components in the form and drag it using the mouse into a new position. You can hold the Ctrl key to select multiple components, and then drag them as a group.

The system saves your form automatically.

Removing components from forms

  1. Select the component you want to remove from your form.
  2. Click the Remove component () icon.
  3. Confirm the removal by clicking OK.

The system removes the selected component from your form. However, the removed component will remain in the database and can be restored (made visible again) in the Field editor.

Changing component properties in forms

  1. Select the component whose properties (label, default value, options, explanation text, etc.) you want to change.

    • The system displays a toolbar with the component’s properties on the right.
  2. Change the properties according to your needs. Depending on the type of the component, you can change some of the following properties:

    Common properties

    Label

    The name of the field or element displayed next to it.

    Default value

    A preselected value or prefilled text.

    Explanation text

    Text displayed below the element.

    Tooltip

    Text displayed while hovering over the component label with the mouse pointer.

    Variable properties

    Required

    Indicates, if the user is obliged to select or type some value in this element before submitting the form.

    Options

    Values listed in drop-down lists, list boxes, multiple choices or radio buttons.

The system automatically saves your changes and propagates them to the form.

Configuring validation rules for components in forms

  1. Select the component whose input you want to validate.
  2. In the right toolbar, switch to the Validation tab.
  3. Click Add validation rule.
  4. Choose the type of the rule using the first drop-down list.
  5. Configure the validation rule according to its specific settings.
  6. Click Apply.

Creating a validation rule

The system will now validate the chosen component according to the configured validation rule. You can add more validation rules for one component, but be careful not to create contradictory rules.

Validating checkbox and multiple-option components

If you want to set up validation for checkbox, multiple choice, drop-down list, or other multiple-option components, you need to use the General condition validation rule type and enter the appropriate condition.

Component

General condition example

Explanation

Checkbox

value.Equals(true)

The form component will pass validation if the checkbox is selected, i.e. its value is set to true.

If you want to validate the unselected state, use false instead of true.

Multiple-option components

  • Multiple choice
  • Radio buttons
  • Drop-down list
  • Country selector

value.Equals(“Kentico”)

The form component will pass validation if the “Kentico” option is selected.

You can find the list of available options on the Properties tab of the selected component.

Copying form components

The form builder allows you to quickly add components based on existing components.

  1. Select the component that you want to copy.
  2. Click the Clone component () icon.
  3. Confirm the clone action by clicking OK.

The form builder creates a copy of the selected component, including the configuration of all properties and validation rules. You can then adjust the configuration as needed. The new component appears below the original component and you can drag it to any required location.

Publishing forms

Once all form components are defined, the form is ready to be published on the live site. You can do this in several different ways, which are described in Displaying forms on the live site.