Email

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Email” control form wizard. Here you are required to fill in the following details:

1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
2. Label Name: Specifies the display name or title for a field or control in the user interface.
3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
   1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon. [Note: "Tooltip Text" supports both plain text and HTML-formatted content.]
   2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

1. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
   1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
2. Confirm Email: A property used to validate and ensure that the email entered matches the intended or original email field for accuracy and consistency. It typically involves re-entering the email for confirmation.
   1. Confirm with control key: A property that allows validation by referencing another control (e.g., a primary email field) to ensure the entered value matches the expected one.
   2. Confirm Email Message: A customizable message displayed to the user if the email confirmation does not match the original email input.

3rd Step – Advance

1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
2. Description: Enter extra suggestions for user experience on this field
3. Align Self: Defines the alignment of a specific item within a flex container, allowing it to override the container's default alignment rules.
4. Flex: Specifies how a flex item will grow, shrink, or maintain its size within a flex container, determining its proportion relative to other items.
5. Form Control Margin Bottom: Defines the spacing below a form control element, allowing customization of the vertical gap between controls for better layout and design consistency.

Click “Confirm” and “Email” control is configured.

How to use Email control

1. Begin by creating a blank transaction form.
2. Add Email control.
3. Configure all the attributes in design page based on the specified requirements of the form.

4. Configure all the attributes in validation page based on the specified requirements of the form.
5. "Confirm Email" helps ensure that the email entered is accurate by asking users to re-enter it. This is done using the "Confirm with control key" setting, which checks that both email fields match.

6. Configure all the attributes in advance page based on the specified requirements of the form.