Configuring the User - Login system page settings

In the Login page, accessed via the PAGES tab of the Website Editor under the SYSTEM PAGES section, you can edit the settings of the Login form. These settings allow you to configure the structure and design of the Login form.

In this article, you will learn how...

• To configure the Login system page settings
• To edit fields of the login form
• To configure the design settings for the login form

To configure the Login system page settings:

1. Click on the PAGES button in the Website Editor Toolbar.
   
2. Click on the + icon at the left of the User tab to expand the User pages menu.
   
3. Click on the Login page tab.
   
4. Mouse over the Login form widget in the content area of the Login page.
5. Click on the down arrow beside the lock icon.
6. Choose the Login Settings item from the drop-down menu.
   

   The Login Settings popup will be displayed, with the Properties Tab selected.

   
7. Configure the login form.
   1. Enter a title for your login form in the Panel title field.
   2. Set the login form options.
      • Show Remember Option: when this checkbox is ticked, a Remember me checkbox will be displayed on the login form. This setting will allow website visitors to choose whether their username and password are remembered so that they do not have to re-type them when returning to your site.
      • Show Forgot Password Link: when this checkbox is ticked, the Forgot your password link will be displayed on the login form. This setting will display a link on the form which allows your website visitors to reset their passwords.
      • Show Signup Link: when this checkbox is ticked, the Create account link will be displayed on the login form, allowing your website visitors to access the create account page if they do not already have an account.
   3. Edit the login form fields. (See below for instructions).
8. Click OK.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To edit fields of the login form:

1. Click on the Edit button to the right of the field you want to edit.
   
2. Configure the settings for the field.
   

   Each field will have the following settings:

   • Label: the title of the field.
   • Description: lets you enter a description to explain to your website visitor how to complete the field.
   • Start new line at this field: tick this checkbox to display this field on a new line.
   • Container Width: lets you set the width of the field container as a percentage of the width of its parent container. You can use the slider or enter a percentage value into the Container Width field.
3. Click OK to accept the changes.
4. Click OK to save the form.
5. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the design settings for the login form:

1. Click on the Design tab in the Login popup.
   
2. Select a Login Layout style for the form.
   • Label Above: displays labels above fields in the login form.
   • Label Left: displays labels to the left of fields in the login form.
3. Configure the heading font and color.
   1. Click on the font name to configure the font style using the Font popup. Click here for instructions.
   2. Click on the color spot to choose a text color using the Color popup. Click here for instructions.
4. Configure the label font and color.
   1. Click on the font name to configure the font style using the Font popup. Click here for instructions.
   2. Click on the color spot to choose a text color using the Color popup. Click here for instructions.
5. Configure the input field style.

   The procedure for configuring the input field is the same as in the Style Editor. Click here for instructions.

6. Configure the submit button style.

   The procedure for configuring the submit button style is the same as for editing the button style in the Style Editor. Click here for instructions.

7. Click OK to save the changes.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.