The Login Form widget offers a simple, recognizable interface and standardized fields for username or email and password, where your customers can input their credentials. Its intuitive design streamlines the authentication process, allowing users to effortlessly engage with your website.
Adding a Login Form Widget
To add a Login Form widget:
- Access the Visual Editor from Channels on the Dashboard Left Panel and navigate to the Sign In system page.
- Go to the Widgets list on the Visual Editor Left Panel.
Type the widget name in the search bar, or expand the Sign in Widgets subgroup under the User Account group to access the Login Form widget.
Drag and drop the widget onto the required area of the Layout Canvas.
After the widget placement you can customize its styling for two modes: Sign in and Verification.
The Login Form Modes
You can find the Mode dropdown on the Styles tab of the widget Property Panel.
The widget in the Sign In mode is displayed to your customers when logging in. The widget in this mode is by default comprised of Email or Phone Input and Password form items, which are separately customizable.
Note: Use the Mode dropdown on the Styles tab of the Email or Phone Input Property Panel to design the field appearance for the given mode. The system consistently displays either an email or phone number input field to users based on their choice of login option.
To customize the Form Items access the relevant Property Panel:
1. Go to its Styles to modify the general styling features (see Global Styles) per your requirements.
2. Go to its Content to input the texts to be displayed for the fields as labels and placeholders, and activate the corresponding toggle to mark the field as required.
If the customer skips the verification step when signing up, the widget is displayed to the customer in the Verification mode.
The Login Form widget in the Verification mode is comprised of the following fields and buttons:
- Message
- Enter Code
- Code Verification Input
- Resend Code
- Go Back
You can individually customize each component by accessing its Property Panel.
Go to Styles to modify the general styling features (see Global Styles) per your requirements.
- Go to Content to provide the field-specific content to be displayed to your customers.
Check the Button Widget article to design the Resend Code and Go Back buttons.
Configuring the Login Form Widget
To design the appearance and behavior of the Login Form widget for each mode, activate the Property Panel of the widget by clicking it to access its Styles and Settings.
1. Go to widget Styles, and select a widget mode to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes for the selected mode. \ Note: The modifications to the widget done through its Property Panel are applied to all the items and components contained within the widget.
2. Go to the widget Settings to set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.
Note:
- You can also customize each input field and button within the widget individually. Use the Styles tab on the relevant Property Panel to modify the general styling features (see Global Styles), or access the UI Elements existing in the Design System from the upper-right corner of the Property Panel and choose a base element for the input field or button, or create a new UI Element and style it accordingly.
- You can use the Tree Dotted menu on the Property Panel:
- to access Reset Styles to discard the changes made to the input field or button and restore its default style;
to access Override Styles to apply the changes made to the input field or button (font, size, alignment, etc.) to the base element and the elements derived from it.
- You can separately customize the view icon in the Password field by selecting an icon from either General Icons or My Icons, the latter inheriting the Vectors uploaded in the Media section.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.