Zephr User Guide

Define a Forgot Password Form

5 views 0

The Forgot Password form can only be configured if you have not selected the User Passwordless Authentication checkbox.

To define the fields in your forgot password form, select the Forgot Password button

The forgot password screen displays, as illustrated below:

Forgot Password Screen

You can define the following steps in this screen, both of which are required and cannot be removed:

  • Password Reset Code. This defines the form to request a reset code for the end user password
  • Reset Password. This defines the form used to reset the end user password

You can edit the steps in the forgot password form, as follows:

  1. Edit the Password Reset Code step

    To edit the Password Reset Code step, complete the following steps:

    1. If required, edit the introductory text displayed on the reset password section of your form. By default, this is pre-filled with Reset Your password

      To edit the text, complete the following steps:

      1. Select the three dots at the end of the Text row
      2. Select Edit

        The Text dialog box displays, as illustrated below:

        Text Dialog Box

        Enter the text you want to display in the text box

        Note: If you want to format the text, for example to include a heading or a list, use the formatting bar at the top of the text box.

      3. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    2. If required, edit the text displayed when the password reset is requested as described above. By default, this is pre-filled with A message with the code was sent to…
    3. If required, define the field that allows the end user to enter their email address

      To edit the text displayed, complete the following steps:

      1. Select the three dots at the end of the Email Address row
      2. Select Edit

        The Enter Email Address dialog box displays, as illustrated below:

        Email Address Dialog Box

        At the top of the Enter Email Address dialog box, you can see a representation of the email address field as it appears in your form.

      3. Enter the label you want to display above the email address field in your form in the Input Box Label Text text box. By default, this is pre-filled with Email
      4. Enter the text you want to display in the email address field in your form in the Placeholder Text text box. By default, this is pre-filled with name@provider
      5. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    4. If required, edit the text displayed above the reset code field as described above. By default, this is pre-filled with Enter the code in the box below
    5. If required, edit the field in which the code is entered by the end user

      To define the enter code field, complete the following steps:

      1. Select the three dots at the end of the Enter Code row
      2. Select Edit

        The Enter Code dialog box displays, as illustrated below:

        Enter Code Dialog Box

        At the top of the Enter Code dialog box, you can see a representation of the email address field as it appears in your form.

      3. Enter the label you want to display above the enter code field in your form in the Code Label text box. By default, this is pre-filled with Code
      4. Enter the text you want to display in the enter code field in your form in the Placeholder text box. By default, this is pre-filled with e.g. 350271
      5. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    6. If required, edit the link that the end user can select to resend the password code and the resent confirmation text

      To edit the text, complete the following steps

      1. Select the three dots at the end of the Resend Password Code row
      2. Select Edit

        The Link dialog box displays, as illustrated below:

        Resend Password Dialog Box

        At the top of the Link dialog box, you can see a representation of the link text as it appears in your form.

      3. Enter the link text in the Resend Text text box. By default, this is pre-filled with Didn’t get a code?
      4. Enter the message to display after the verification link email has been sent in the Code Resent Message text box. By default, this is pre-filled with Resent!
      5. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    7. If required, edit the button label for the button that your end user can use to submit their password reset request

      You can edit the colour of your button using the Style Guide. For further information on defining your style guide, see the Define Your Style Guide topic.

      To define the text used on the button, complete the following steps:

      1. Select the three dots at the end of the Button (Submit) row
      2. Select Edit

        The Button dialog box displays, as illustrated below:

        Button Dialog Box

        At the top of the Button dialog box, you can see a representation of the button as it appears in your form.

      3. Update the text in the Button Text text box. By default, this is pre-filled with Submit
      4. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    8. If required, define the divider used in your form

      To define the divider, complete the following steps:

      1. Select the three dots at the end of the row
      2. Select Edit

        The Divider dialog box displays, as illustrated below:

        Divider Dialog Box

        At the top of the Divider dialog box, you can see a representation of the divider as it appears in your form.

      3. Update the text in the Divider Text text box
      4. By default, the Divider line checkbox is selected. This displays a line either side of your defined text. To remove the lines, deselect the Divider line checkbox
      5. Select whether to display or hide the divider from the Visibility radio buttons. The options are as follows:
        • Show
        • Hide
      6. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    9. If required, edit the button label for the button that your end user can use to move to the next step in your registration form

      You can edit the colour of your button using the Style Guide. For further information on defining your style guide, see the Define Your Style Guide topic.

      To define the text used on the button, complete the following steps:

      1. Select the three dots at the end of the Button (Continue) row
      2. Select Edit

        The Button dialog box displays, as illustrated below:

        At the top of the Button dialog box, you can see a representation of the button as it appears in your form.

      3. Update the text in the Button Text text box. By default, this is pre-filled with Login
      4. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    10. If you want to add custom text to your form, select the Add Custom Text button

      The Text dialog box displays. Complete the dialog box as described for the Text field above.

  2. Edit the Reset Password step

    To edit the Reset Password step, complete the following steps:

    1. If required, edit the introductory text displayed on the reset password section of your form as described above. By default, this is pre-filled with Reset Your password

      If required, define the field that allows the end user to specify their password

      To edit the text displayed, complete the following steps:

      1. Select the three dots at the end of the Password row
      2. Select Edit

        The Password dialog box displays, as illustrated below:

        Password Dialog Box

        At the top of the Password dialog box, you can see a representation of the email address field as it appears in your form.

      3. Enter the label you want to display above the email address field in your form in the Password Input Label text box. By default, this is pre-filled with Password
      4. Enter the text you want to display in the password field in your form in the Password Input Placeholder text box
      5. Enter the text to display in the link, which allows the end user to display their password as it is entered, in the Show Text text box. By default, this is pre-filled with Show
      6. Enter the text to display in the link, which hides the password as it is entered, in the Hide Text text box. By default, this is pre-filled with Hide
      7. To include an indicator of the strength of the password entered by the end user, select the Password Strength Indicator checkbox

        Note: This is only available for English language sites. You must define the strength requirements in the user settings, as described in the Password Strength Requirements topic.

      8. Enter the label you want to display above the confirm email address field in your form in the Confirm Password Input Label text box. By default, this is pre-filled with Confirm Password
      9. Enter the text you want to display in the confirm password field in your form in the Confirm Password Input Placeholder text box. By default, this is blank
      10. Select the Save button to save your changes and return to the forgot password screen. Selecting the Cancel button displays the forgot password screen without saving any changes
    2. If required, edit the button label for the button that your end user can use to submit their password reset request as described above. By default, this is pre-filled with Submit
  3. Select the Done button to return to the Form Details screen