The Register Form widget is a central component that provides users with a structured layout for entering the details required to establish their accounts. This form includes fields for information, such as the user name, email address, password.
Adding a Register Form Widget
To add a Register Form widget:
- Access the Visual Editor from Channels on the Dashboard Left Panel and navigate to the Sign Up 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 Up Widgets subgroup under the User Account group to access the Register 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 three modes:
- Sign Up
- Verification
- Pending
You can find the Mode dropdown on the Styles tab of the widget Property Panel.
The Register Form Modes
The widget in the Sign Up mode is displayed to your customers to guide them through the process of creating new accounts. You can use the Property Panel of each Form Item (First Name, Last Name, Email or Phone Number, Password, and Confirm Password) included in the widget to customize it separately.
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 sign up option.
To customize the Form Items access the relevant Property Panel:
Go to its Styles to modify its general styling features (see Global Styles) per your requirements.
Go to its Content to input the texts to be displayed for the fields as a label and placeholder, and activate the corresponding toggle to mark the field as required.
The widget in the Verification mode is displayed to customers after they have completed the initial account registration. In this mode, the purpose is to verify and confirm the user identity or account ownership.
The Register Form widget in the Verification mode by default is comprised of the following fields and buttons, however, you can customize it according to your needs by dragging and dropping various widgets, such as images, etc. into it.
- 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.
The Register Form widget in the Pending mode is displayed to the customers signed up as a specific customer group member. This mode serves as a way to inform your customers that their actions have been received and a request for approval or denial has been initiated.
You have the flexibility to input any message text that you want to appear for your customers and style it according to your website design.
The widget in the Pending mode includes the Title, Paragraph, and Button widgets, each of which can be customized separately using their respective Property Panels.
Configuring the Register Form Widget
To design the appearance and behavior of the Register Form widget for each mode, activate the Property Panel of the widget by clicking it to access the widget Styles and Settings.
- 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.
- Go to the widget Settings:
- to define the Customer Groups having access to this specific registration form.
- 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.