Home / Widgets

Forgot Password Form Widget

Taguhi

Last updated on Jan 13, 2025

The Forgot Password Form widget allows your customers to recover access to their accounts by confirming their identity via email or phone number and securely setting a new password.

Adding a Forgot Password Form Widget

To add the Forgot Password Form widgets:

  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 System > Forgot Password.
  3. Navigate to the Widgets list on the Visual Editor Left Panel.
  4. Type the widget name in the search bar, or expand the Forgot Password Widgets grouping and select the corresponding widget.
  5. Drag the widget from the list and drop it onto the Layout crafting area.

Configuring the Forgot Password Form Widget

To configure the widget:

  1. Go to Styles to modify the widget styling features (see Global Styles).
  • Select the CSS design framework States: Normal or Hover.
  • Select the widget condition when triggered from the Mode drop-down list (see Modifying the Modes of the Forgot Password Form Widget).

2. Go to Settings and expand Visibility to modify the widget visibility on your website. Select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Tip: You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel. Select one as a base for the Forgot Password Form Fields, or create a new UI Element and style it according to your preferences.

Modifying the Modes of the Forgot Password Form Widget

Once you have configured the Forgot Password Form widget, you can modify the corresponding modes of the widget with their elements according to your preferences. This allows you to define the appearance and functionality of the widget on your website. 
The following modes are available:

  • Form Mode
  • Success Message Mode
  • Verification Mode

Form Mode

The Form mode is the initial state where your customers enter their emails to reset the password.

To modify the Form mode:

  1. Click the Forgot Password Form widget.
  2. Select Form mode from the Mode dropdown.
  3. Modify the element styling features (see Global Styles).

The following elements are available within the Form mode:

  • Container Element
  • Form Element
  • Form Item Element
  • Email or Phone Input Element
  • Input Element

Container Element

Allows you to structure and organize the Form Mode elements effectively, ensuring a consistent design and providing flexibility in layout adjustments.

To modify the Container element:

  1. Go to Styles to customize the general styling features (see Global Styles).
  2. Go to Content to expand Link and click Add Link to add clickable links. You can redirect your customers to external sources, Ecommerce products, collections and collection items, phone numbers, email addresses, and headings, as well as main or system pages such as FAQ, Home, About, etc.

Form Element

Allows customers to input and verify their new password for a reset.

To modify the Form Item element:

  1. Click the Form Element and modify the element styling features (see Global Styles).
  2. Click the bookmark icon in the top right corner of the Property Panel.
  3. Expand Form and the corresponding Form Field Style.
  4. Select the corresponding UI element or click the plus icon in the top right corner of the Property Panel.
  5. Indicate the element name and click Save.

Form Item Element

Allows customers to enter text data, such as the password.

To modify the Form Item element:

  1. Go to Styles to modify the element styling features (see Global Styles).

You can style the Modes of the element from Styles:

  • Normal: The appearance of the element during regular customer interactions.
  • Error: The appearance of the element when it needs to alert the customer to an issue.

2. Go to Content to modify:

  • Label: Enter and change the name of the element. A toggle option makes the Label field required.
  • Placeholder: Enter and change the text of the element.

You can choose and modify the labels of the Label Element separately from Styles (see Global Styles).

Tip: You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel. Select one as a base for Form Item or create a new UI Element and style it according to your preferences.

To do so:

  1. Click the Dotted Menu on the Property Panel.
  2. Select Reset Styles to discard the changes made to Form Item and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Note: The Label element is separately configurable within the Form Item element with its Styles tab.

Email or Phone Input Element

Allows you to modify different input formats with their related styles.

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).

You can style the Modes of the element from Styles:

  • Email
  • Phone Number

2. Go to Content to modify the icon of the element:

  • Click Change Icon.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

Input Element

Allows your customers to enter necessary information, such as their email address and phone number.

To modify the element:

  1. Go to Styles to modify the widget styling features (see Global Styles).
  • Select the current condition of the element from the State dropdown:
    • Normal: The default state of Input when it is not being interacted with.
    • Hover: The state of Input when the user hovers over it with the mouse cursor.
    • Focus: The state of Input when it is currently in focus or active.
    • Active: The state of Input when the user performs an action like clicking, tapping, or pressing.
    • Disabled: The state of Input when it is inactive or unavailable for interaction.
  • Select the modes of the element from the Mode dropdown:
    • Normal: The appearance of the element during regular customer interactions.
    • Error: The appearance of the element when it needs to alert the customer to an issue.
  • Select the appearance type of the element from the Type dropdown:
    • Only Input
    • Left Icon
    • Right Icon

2. Go to Content to modify the icon of the element:

  • Click Change Icon.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

Tip: You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel. Select one as a base for Form Item or create a new UI Element and style it according to your preferences. To do so:

  1. Click the Dotted Menu on the Property Panel.
  2. Select Reset Styles to discard the changes made to Form Item and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Success Message Mode

A success message is displayed after a successful email submission to confirm to the user that their action was completed successfully, providing reassurance and feedback on the outcome of their interaction.

To modify the Success Message mode:

  1. Click the Forgot Password Form widget.
  2. Select Success Message mode from the Mode dropdown.
  3. Modify the element styling features (see Global Styles).

The following elements are available within the Success Message mode:

  • Container Element
  • Title Element
  • Paragraph Element

Container Element

Allows you to structure and organize the Form Mode elements effectively, ensuring a consistent design and providing flexibility in layout adjustments.

To modify the Container element:

  1. Go to Styles to customize the general styling features (see Global Styles).
  2. Go to Content to expand Link and click Add Link to add clickable links. You can redirect your customers to external sources, Ecommerce products, collections and collection items, phone numbers, email addresses, and headings, as well as main or system pages such as FAQ, Home, About, etc.

Title Element

The Title element allows you to modify the heading on the success notification form. To change its text, simply select the Title element and edit it directly (see Title Widget).

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content to:
  • Edit the text of the element.
  • Expand Link and click Add Link to add clickable links to external sources, Ecommerce products, collections and collection items, phone numbers, email addresses, headings, as well as main or system pages such as FAQ, Home, About, etc.

3. Go to Settings to set the element visibility (see Visibility Settings).

Paragraph Element

The Paragraph element allows you to modify the text within the form to convey information or details (see Paragraph Widget).

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content to:
  • Edit the text of the element.
  • Expand Link and click Add Link to add clickable links to external sources, Ecommerce products, collections and collection items, phone numbers, email addresses, headings, as well as main or system pages such as FAQ, Home, About, etc.

3. Go to Settings to set the element visibility (see Visibility Settings).

Verification Mode

During the verification step, users are required to confirm their identity to ensure the security of the password reset process. In the verification mode, all elements, such as the message display, code input field, resend option, and other interface components, are configurable.

To modify the Verification mode:

  1. Click the Forgot Password Form widget.
  2. Select Verification mode from the Mode dropdown.
  3. Modify the element styling features (see Global Styles).

The following elements are available:

  • Code Verification Element
    • Message Element
    • Enter Code Element
    • Code Verification Input Element
    • Resend Code Element
    • Go Back Element

Code Verification Element

The Code Verification Element is a form that covers all the elements inside it and its layout, ensuring a secure and user-friendly verification process. The elements inside it are separately configurable, allowing you to customize their appearance and behavior.

You can modify the element styling features from Styles (see Global Styles).

Message Element

Allows you to write instructions to customers, prompting them to enter the verification code sent to their email or phone.

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content to edit the label text of the element.

Enter Code Element

Allows you to provide a label text to instruct users to input the received verification code.

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content to edit the label text of the element.

Code Verification Input Element

Allows you to design the input field where users enter the verification code. You can modify the element styling features from Styles (see Global Styles).

Note: The Input element is separately configurable within the Code Verification Input Element with its Styles (see Input).

Resend Code Element

Allows your users to request a new verification code if they did not receive the initial one.

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).
  • You can style the Modes of the element from Styles:
    • Normal: Indicates the appearance of the element during regular customer interactions.
    • Loading: Indicates that the element is in a loading state.
  • You can set the Type of the element to specify whether to show the label, icon, or both.:
    • Label Only
    • Left Icon
    • Right Icon
    • Icon Only

2. Go to Content to modify the Label Text and Icon of the element.

To modify the icon of the element:

  • Click Change Icon.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

Tip: You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel. Select one as a base for the Resend Code element, or create a new UI Element and style it according to your preferences.

To do so:

  1. Click the Dotted Menu on the Property Panel.
  2. Select Reset Styles to discard the changes made to Form Item and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Note: The Label element is separately configurable within the Resend Code element with its Styles and Content tabs.

Go Back Element

Provides your users the option to navigate back to the previous step if necessary.

To modify the element:

  1. Go to Styles to modify the element styling features (see Global Styles).
  • You can style the Modes of the element from Styles:
    • Normal: Indicates the appearance of the element during regular customer interactions.
    • Loading: Indicates that the element is in a loading state.
  • You can set the Type of the element to specify whether to show the label, icon, or both.:
    • Label Only
    • Left Icon
    • Right Icon
    • Icon Only

2. Go to Content to modify the Label Text and Icon of the element.

To modify the icon of the element:

  • Click Change Icon.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

Tip: You can also access the UI Elements available in the Design System from the upper-right corner of the Property Panel. Select one as a base for the Resend Code element, or create a new UI Element and style it according to your preferences.

To do so:

  1. Click the Dotted Menu on the Property Panel.
  2. Select Reset Styles to discard the changes made to Form Item and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Note: The Label element is separately configurable within the Go Back element with its Styles and Content tabs.

 

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