Password Form Widget

The Password Form widget enables you to organize and categorize your Offline and Password Protected pages, ensuring a well-structured presentation to your customers when your website access is restricted (see Settings > Project Details, Navigation Pages). It allows your users to securely enter a password, granting them access to your website, and ensuring privacy and control over it.

Adding a Password Form Widget

To add a Password Form widget:

Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
Go to Pages > System > Offline/Password Protected page on the Top Panel.
Navigate to the Widgets list on the Visual Editor Left Panel.
Type the widget name in the search bar, or expand the Offline Page Widgets/Password Protected Widgets grouping and select the corresponding widget.
Drag the widget from the list and drop it onto the Layout crafting area.

Configuring the Password Form Widget

To configure the widget:

Go to Styles to modify the widget styling features (see Global Styles).
Go to Content to modify the widget content:

Click Password, and enter the label name and placeholder 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 Item UI element or select from the list. To do so:

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

4. Indicate the element name and click Save.

Once you add and configure the Password Form widget, make sure to add the Submit Button widget. This allows the customers to complete the process of accessing your website or logging into their account by submitting the password entered in the Password field.

Modifying the Password Form Widget Elements

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

Form Item

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

Go to Styles to modify the widget styling features (see Global Styles).
Go to Content, and 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 Form Item UI element panel.

6. Indicate the element name and click Save.

Input

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

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 password form that best suits your website design. To do so:

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