Create a login or registration form using the Component Library or generate one on-the-fly, with options to customize fields and settings.

1. Go toProducts > Features.
2. Add a new feature or select an existing one.
3. Click Add a New Outcome in the Version screen.
4. Click Login or Registration .
5. Enter the required information.
6. Click Add Component > Login or Registration from the Component Library screen. By default, the Title text box is pre-filled with Login or Registration Form. You can edit this, if required. You can also preview and validate your form in real-time, with updates displayed instantly in the Preview window on the screen's right side.
7. Step 1: Account Verification - When setting up your form's Account Verification step, it's crucial to define the necessary fields accurately. Here's how to configure each field:
   • Text - This field allows you to add introductory text to your form. To modify the text displayed:
     1. Click the dropdown arrow located at the end of the row.
     2. Enter the text you want to display in the text box.
     • Email Address - Displays a field in which your end user can enter their email address. To customize the email field:
     • Click the dropdown arrow located at the end of the row. At the top of the Enter Email Address dialogue box, you can see a preview of the email address field as it appears in your form.
     • Enter the label you want to display above the email address field in your form in the Input Box Label Text text box.
     • Enter the text you want to appear as a placeholder in the email address field of your form in the Placeholder Text text box.
     • Account Code - Allows you to display a field in which the end user can enter their account registration code. To modify the text displayed:
       1. Activate the Account Code field by toggling the button at the end of the row.
       2. Click the dropdown arrow located at the end of the row.
       3. Enter the label you want to display above the account registration code field in your form in the Code Label text box.
       4. Enter the text you want to appear as a placeholder in the account registration code field of your form in the Placeholder text box.
     • Divider - Defines a divider within your form. To setup the divider:
       1. Activate the Divider field by toggling the button at the end of the row.
       2. Click the dropdown arrow located at the end of the row.
       3. Modify the text and choose whether to display or hide the divider.
     • Social Login - Allows users to use social login providers for account verification. When defined, the end user can select the logo of the social sign-on provider to register and login. To configure social login providers:
       1. Activate the Social Login field by toggling the button at the end of the row.

       2. Click the dropdown arrow located at the end of the row. If you have not already defined login providers, the Social Sign-in dialogue box is displayed.

       3. Select the Add a new provider link to select the login providers that can be used in your form. If you have connected a user attribute to a field name used by your login provider, the information is automatically completed in the form when your end user uses the login provider. For further information on defining login providers, see Login Providers. If you have defined login providers, the Social Sign-in dialogue box is displayed.

       4. Select the checkbox for each login provider that you want to offer for use in your form.
     • Button (Continue) - Displays the Continue button for users to proceed to the next step in your form. You can edit the color of your button using the Style Guide. For further information on defining your style guide, see Define Your Style Guide. To customize the button:
       • Click the dropdown arrow located at the end of the row.
       • Update the text in the Button Text text box as required.
     • Custom Text - Allows you to add custom text to your form by selecting the Add Custom Text button.
8. Step 2: Login or Register - Define the forms that can be used as required. You can define the following forms:

   • Login - For information on defining the login form, see Define a Login Form .

   • Registration - For information on defining the registration form, see Define a Registration Form .

   • Forgot Password - For information on defining the forgot password form, see Define a Forgot Password Form .

9. Additional Settings - Click the CSS Configuration and enter your preferred CSS code to tailor the form to your specifications. Click Done to save your configurations.
10. Click Save to save your changes.