Summary
This screen allows you to add label, placeholder text, validation text, blank error message text for the email ID and phone number. Through this you can also add the color to the textbox, next button and signup button.
Textbox Settings
-
Label For Email ID: Enter the label title for the email ID. In the below image, point 1 indicates the label for email id as Email Address.
-
Placeholder Text for Email ID: Enter the placeholder text to be displayed in the text box. In the below image, point 1 indicates placeholder text for email id as Email Address.
- Validation Text For Email ID: Enter the validation text for your email ID.
- Regular Expression For Email ID: Add the RegEx to validate the email ID. Use [a-zA-Z0-9._-]+@[a-z]+\.+[a-z]+.
-
Blank Error Message For Email ID: Enter the message to be shown when the email ID is left blank. In the below image, you can see the blank error message for email ID as “please enter your email”.
- Label For Mobile Number: Enter the label title for the mobile number in the field below.
-
Placeholder Text For Mobile Number: Enter the placeholder text to be displayed in the text box. In the below image, point 1 shows the placeholder text for the mobile number.
- Validation Text For Mobile Number: Enter the validation text for the incorrect mobile number.
- Regular Expression For Mobile Number: Add the RegEx to validate the mobile number without the country code. This can be entered - \b\w{8,16}\b It will validate for numbers between 9 to 15 digits.
- Blank Error Message For Mobile Number: Enter the message to be shown when a mobile number is not entered.
Textbox Color Settings
- Text Box Background Color: Add a color to be shown in the background of the text box. In the below image, point 1 indicates the text box background color, i.e., gray.
-
Text Box Outline Color: Add color to the outline of the text box. In the below image, point 2 indicates the text box outline color, i.e., gray.
- Text Box Outline Color On Selection: Add color to the outline of the textbox when it is selected.
-
Text Box Outline Color After Error: Add a color to the outline of the textbox when an invalid entry is entered. In the below image, the text box outline color after the error is in red color.
- Label Color: Add color to the list's label.
-
Text Color: Add color to the text. In the below image, point 1 indicates the text entered by the user, i.e., annexclouduser@, and its color is gray.
-
Placeholder Text Color: Add color to the placeholder text. In the below image, point 1 indicates the placeholder text, i.e., Email Address.
- Validation Text & Error Message Color: Add a color for the validation text and error message.
Click on the update button to save the details.
Login Button
- Text: Enter the text to be displayed on the button.
- Text Color: Add a color in which the text should be displayed.
- Button Color: Add color to the button.
In the below image, point 1 indicates the button text, i.e. Next, and its color is white, while point 2 indicates the button color, i.e. pink.
Click on the update button to save the details.
Sign Up
Element to Display: Select the button or Link option to be displayed.
If you select the button as an option,
- Text: Enter the text to be displayed on the button.
- Text Color: Add a color in which the text should be displayed.
- Button Color: Add color to the button.
If you select the Link as an option,
- Text: Enter the text to be displayed on the button.
- Text Color: Add a color in which the text should be displayed.
- Link Color: Add a color to the link. i.e. the underline present below the text.
In the below image you can see the following details: it is an example of 'Link’ as an option.
- Text displayed on button : Sign up
- Text color: White
- Link color: White
Click on the update button to save the details.
Remember Me
- Display?: Select Yes to provide a checkbox to save the login session. The following fields will be displayed on selection of 'Yes’:
- Text: Enter the text to be displayed on the button. In the below image you can see the button text in the red box, i.e., Remember Me.
- Text Color: Add a color in which the text should be displayed. In the below image, you can see the text color is gray.
Click on the update button to save the details.
