Customizing the Login Email Token Page

Welcome to our tutorial on customizing the Login Email Token page in DecoNetwork's Website Editor. This page is crucial for users who opt to log in via email, as it allows them to enter their email address and receive a login link with an embedded token. Customizing this page helps ensure it aligns with your brand and provides a seamless user experience. Let’s walk through the steps to tailor the Login Email Token page to your preferences.

In this article, you will learn how...

• To configure the Login Email Token system page settings
• To customize the Email field of the Login Email Token form
• To configure the design settings for the Login Email Token form

To configure the Login Email Token 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 Email Token form widget in the content area of the Login page.
5. Click on the down arrow beside the lock icon.
6. Choose the Login Email Token Settings item from the drop-down menu.
   

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

   
7. Configure the Login Email Token form.
   1. Enter a title for the Login Email Token form in the Panel Title field.
   2. Enter a label for the Login Email Token button in the Button Label field.
   3. Optionally, customize the Email field. (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 customize the Email field of the Login Email Token form:

1. Click on the Configure button to the right of the field you want to edit.
   
2. Configure the settings for the Email field.
   
   • Label: Modify the title of the field.
   • Description: Enter a helpful description that will appear above the Email input box to provide users on what information they need to provide and what they should expect next.
   • Placeholder: Enter text that will appear in the Email field as a hint or example of how to complete the field.
   • Start new line at this field: Tick this checkbox to display this field on a new line.
   • Container Width: 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 Email Token form:

1. Click on the Design tab in the Login Email Token popup.
   
2. Select a Login Layout style for the form.
   • Label Above: displays labels above fields in the Login Email Token form.
   • Label Left: displays labels to the left of fields in the Login Email Token form.
3. Configure the heading font and color.
   1. Click on the font name to configure the font style using the Font popup. See the Configuring Font Settings for Widget Panel Titles article for instructions.
   2. Click on the color spot to choose a text color using the Color popup. See the Using the Color Popup article for instructions.
4. Configure the label font and color.
   1. Click on the font name to configure the font style using the Font popup. See the Configuring Font Settings for Text article for instructions.
   2. Click on the color spot to choose a text color using the Color popup. See the Using the Color Popup article for instructions.
5. Configure the input field style.

   The procedure for configuring the input field is the same as in the Style Editor. See the Style Editor article 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. See the Style Editor article 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.