Home / Widgets

Login Form Widget

Taguhi

Last updated on Dec 05, 2024

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:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Open Page on the top panel and navigate to the Sign In system page.
  3. Click the Widgets list on the left panel.
  4. 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.

  5. 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.

    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.

    Tip:

  • 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.
  • Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:
    1. Click the Dotted Menu in the right corner of the Property Panel.
    2. Select Reset Styles to discard the changes made to the input field or button and restore its default style.
    3. Select 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 app.

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 customer when logging in. To control how your customers access your platform, go to Styles and select the corresponding mode from the available options:

  • Email or Phone
  • Email
  • Phone Number
    In public mode, an email input field, a phone number input field, or a single input field where users can enter either an email address or a phone number is displayed, depending on your selected 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.
     

💡 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.