Adding and Configuring Login Form on a Webpage

Overview

The Login Form component in the Web Builder allows users to add secure authentication functionality to a web page. By configuring the Login Form, users can customize its identification, title, dependencies, and section version types to ensure proper visibility and behavior on the website.

This article explains how to add, configure, edit, remove, and reposition the Login Form component.

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 Login Form

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

3. Enter or Edit the Form ID

• Select the Login Form component.
• Open the Properties or Settings panel.
• Locate the ID field.
• Enter a new ID or edit the existing one.
• Save the changes.

4. Enter or Edit the Form Title

• Click on the Login Form component.
• In the settings panel, locate the Title field.
• Enter or modify 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

• Select the Login Form component.
• Navigate to the Dependency field in the settings panel.
• Click the dropdown list.
• Choose the required dependency condition.
• Apply and save the changes.
• Dependencies control when the Login Form is displayed based on predefined rules.

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. Enter or Edit ID for Each Section Field

• Select the Login Form component.
• Expand the section fields (for example, Username, Password, Submit Button).
• Locate the ID field for each section.
• Enter or update the ID as needed.
• Save the changes.

8. Enter or Edit Title for Each Field

• Select the Login Form component.
• Expand the field settings.
• Locate the Title or Label field.
• Enter or modify the field title (for example, “Email Address,” “Password”).
• Save the configuration.

9. Manage the Login Form

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

10. Save and Apply Changes

• Save and publish the web page to apply the Login Form configuration.
• Preview the page to confirm that all fields are displayed correctly and function as expected.