Adding and Configuring Single Column Form on a Webpage

Overview

The Single Column Form component allows users to collect information through a vertically aligned form layout on a web page. Using the Web Builder, users can add and configure a Single Column Form by defining identifiers, titles, dependencies, section version types, and by adding and managing various field types such as text, date, date-time, URL, document upload, and image fields. This article explains how to add, configure, and manage a Single 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 Single Column Form

• From the Components panel, locate the Single Column Form component.
• Drag and drop the Single Column Form onto the desired section of the web page.
• The form is added and becomes visible in the page layout.

3. Enter or Edit the Form ID

• Select the Single 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 web page for both search engines and users.

5. Select Dependency from the Dependency Select Field

• Locate the Dependency select field in the Settings panel.
• Select the required dependency from the list.
• The Single 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 version type.
• The form follows the visibility rules defined for the selected version type.

7. Add Fields to the Single Column Form

• From the Fields panel, drag and drop the required field types into the form.
• Supported field types include Text, Date, DateTime, URL, Document, Image, and other available field types.

8. Configure Individual Form Fields

• Select a field within the Single 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 define mandatory fields.
• 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 Single Column Form

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

10. Save and Apply Changes

• Save and publish the web page to apply the Single Column Form configuration.
• Preview the page to confirm that all form fields display and function as expected.