Adding and Configuring Two Column Form on a Webpage

Overview

The Two Column Form component allows users to collect information using a structured form layout with fields displayed across two columns on a web page. Using the Web Builder, users can add and configure a Two Column Form by defining identifiers, titles, dependencies, section version types, and by adding and managing multiple field types within both columns. This article explains how to add, configure, and manage a Two Column Form on a web page.

Step-by-Step Approach

1. Access the Web Builder

From the Event Dashboard, navigate to the Content module.
Select the Pages submenu.
Open the required web page in edit mode.

2. Drag and Drop the Two Column Form

From the Components panel, locate the Two Column Form component.
Drag and drop the component onto the desired section of the web page.
The Two Column Form is added and displayed in the page layout with two columns.

3. Enter or Edit the Form ID

Select the Two Column Form to open its Settings panel.
Locate the Id field.
Enter or edit the Id value as required.

4. Enter or Edit the Form Title

Locate the Title field in the form settings.
Enter or edit the title as required.
The title serves as the primary identifier for the form on the web page.

5. Select Dependency from the Dependency Select Field

In the Settings panel, locate the Dependency select field.
Select the required dependency from the list.
The Two Column Form displays or hides based on the configured dependency conditions.

6. Select Section Version Type

Locate the Section Version Type select field.
Select the appropriate section version type.
The form follows the visibility rules defined for the selected version type.

7. Add Fields to the Two Column Form

From the Fields panel, drag and drop required field types into either column of the form.
Supported field types include Text, Date, DateTime, URL, Document, Image, and other available field types.
Fields can be arranged independently in both columns.

8. Configure Individual Form Fields

Select a field within the Two Column Form.
Enter or edit the Id for the selected field.
Enter or edit the Title for the selected field.
Select a dependency from the Dependency select field for the selected field, if required.
Select or unselect the Required checkbox to mark the field as mandatory.
Select or unselect the Lock checkbox to restrict editing of the field.
Validate that the Field Name and Field Label are correctly reflected in the Original Field Name.

9. Manage the Two Column Form

Reposition the Two Column Form using drag-and-drop within the page layout.
Remove the Two Column Form if it is no longer required.

10. Save and Apply Changes

Save and publish the web page to apply the Two Column Form configuration.
Preview the page to confirm that all fields display correctly across both columns and function as expected.

Related to