Home / Widgets

Reset Password Form Widget

Taguhi

Last updated on Jan 13, 2025

The Reset Password Form widget allows your customers to securely set a new password for their accounts, granting them access to your website, and ensuring privacy and control over it.

Adding a Reset Password Form Widget

To add a Reset Password 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 Reset Password system page.
  3. Go to the Widgets list on the Visual Editor Left Panel.
  4. Type the widget name in the search bar, or expand the Reset Password Widgets grouping and select the Reset Password Form widget.
  5. Drag the widget from the list and drop it onto the Layout crafting area.

Configuring the Reset Password Form Widget

Once you have added the Reset Password Form widget, click it to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.

To configure the widget:

  1. Go to Styles to modify the widget styling features (see Global Styles).
  2. Go to Content to modify the widget content:
  • 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.
  • Enter the label text.

3. 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 add a new Form Field style or select from the list. To do so:

  1. Click the bookmark icon in the top right corner of the Property Panel.
  2. Expand Email or Form Item.
  3. Select the corresponding UI element or click the plus icon in the top right corner of the Property Panel.

4. Indicate the element name, select its size, and click Save.

Modifying the Reset Password Widget Elements

Once you have configured the Reset Password widget, you can modify the corresponding elements inside it according to your preferences. This allows you to define the appearance and functionality of the widget on your website. The following elements are available:

  • Paragraph
  • Form
  • Form Item
  • Input
  • Icon

Paragraph

Allows you to modify the text of the widget. To do so:

  • Click the Paragraph element.
  • Go to Styles to configure the principal styling features (see Global Styles).
  • Go to Content and edit the paragraph text.
  • Expand Link and click Add Link to add clickable phone numbers and email addresses or navigate your customers to your website Main or System pages, products, collections, or collection items. You can redirect your users to external and internal websites, allowing your customers to navigate to specific destinations in a new tab or by replacing the current tab.

Form

Allows users to enter and confirm their new password for a reset, providing appropriate feedback for errors or successful submissions. To modify the Form element:

  1. Click the Form element and modify the widget 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

Allows users to enter text data, such as the password. To modify the Form Item element:

  1. Go to Styles to modify the widget styling features (see Global Styles).
  2. Go to Content, enter the label name and placeholder text.

3. Click the bookmark icon in the top right corner of the Property Panel.

4. Expand Form Item.

5. Select the corresponding UI element or click the plus icon in the top right corner of the Property Panel.

6. Indicate the element name and click Save.

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.

Input

A field area that allows users to type text, numbers, or other types of data. To modify the Input element:

  1. Go to Styles to modify the element styling features:
  • 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 how it behaves based on certain conditions or user interactions from the Mode dropdown:
    • Normal: The default state of Input when it is not being interacted.
    • Error: The state of Input when the users' input does not meet the specified criteria, such as incorrect data provided, or other inconsistencies.
  • Select how Input is displayed from the Type dropdown: only the input field, input field with a left or right icon.
  • Make the necessary configuration of principal styling features (see Global Styles).

2. Go to Content to modify the element styling features:

  • Click Change Icon, select the icon style you prefer, and tick the icon in the icon list that opens.

Icon

Allows you to add or change the icon next to the reset password form that best suits your website design. To do so:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content.
  • 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.

 

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