Adding and Configuring Two Column Read Only Form on a Webpage

Overview

The Two Column Read Only Form component allows users to display structured form data in a two-column layout on a web page, where all fields are visible but not editable. This component is commonly used to present pre-filled or informational data in a clear and organized format.

Using the Web Builder, users can add and configure a Two Column Read Only Form by defining identifiers, titles, dependencies, section version types, and by adding various read-only field types across both columns. This article explains how to add, configure, and manage a Two Column Read Only 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 Read Only Form

• From the Components panel, locate the Two Column Read Only Form component.
• Drag and drop the component onto the desired section of the web page.
• The form is added and displayed in a two-column layout.

3. Enter or Edit the Form Id

• Select the Two Column Read Only Form to open the settings panel.
• Locate the Id field.
• Enter or edit the Id 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 web page for both search engines and users.

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 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 version type.
• The form follows the visibility rules defined for the selected section version.

7. Add Fields to the Two Column Read Only 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 fields.
• All fields added to the form are displayed in read-only mode.

8. Validate Field Name and Field Label

• Select a field within the form.
• Validate that the Field Name and Field Label are correctly reflected in the Original Field Name.

9. Configure Individual Read Only Fields

• Select a field within the Two Column Read Only Form.
• Enter or edit the Id for the selected field.
• Enter or edit the Title for the selected field.
• Enter or edit the For value for the field label to maintain proper association and accessibility.

10. Manage the Two Column Read Only Form

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

11. Save and Apply Changes

• Save and publish the web page to apply the Two Column Read Only Form configuration.
• Preview the page to confirm that all fields are displayed correctly across both columns in read-only mode.