Skip to main content

Define a Login Form

Zuora

Define a Login Form

To define the fields in your login form, select the Login button.

The fields that are available for update differ depending on whether or not you have selected the Use Passwordless Authentication checkbox in the Add an Outcome screen.

For further information on completing the fields if you have not selected the checkbox, see the Login with a Password section.

For further information on completing the fields if you have not selected the checkbox, see the Login with Verification Link section.

Login with a Password

If you have not selected the User Passwordless Authentication checkbox, the Login with Password screen displays as illustrated below:

Login_WithPswd.jpg

You can edit the fields used in the login form, as follows:

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

    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-1.jpg

    3. 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.

    4. Select the Save button to save your changes and return to the Login with Password screen. Selecting the Cancel button displays the Login with Password screen without saving any changes
  2. If required, edit the field that allows the end user to enter their email address

    To edit the field, 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_Dialog-1.jpg

      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 Login with Password screen. Selecting the Cancel button displays the Login with Password screen without saving any changes
  3. If required, define the field that allows the end user to enter 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 Set Up dialog box displays, as illustrated below:

      Pswd_Dialog.jpg

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

    3. Enter the label you want to display above the password 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 Placeholder Text text box. By default, this is blank
    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. Select the Save button to save your changes and return to the Login with Password screen. Selecting the Cancel button displays the Login with Password screen without saving any changes
  4. If required, define the link that the end user can follow to reset their password

    To edit the text displayed, complete the following steps:

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

      The Link dialog box displays, as illustrated below:

      PswdLink_Dialog.jpg

      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 Forgot Password?
    4. Select the Save button to save your changes and return to the Login with Password screen. Selecting the Cancel button displays the Login with Password screen without saving any changes
  5. If required, edit the button label for the button that your end user can use to submit their login credentials

    Note: 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_Submit-1.jpg

      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 Login with Password screen. Selecting the Cancel button displays the Login with Password screen without saving any changes
  6. Select the Done button to save your changes and return to the Form Builder screen

Login with Verification Link

If you have selected the Use Passwordless Authentication checkbox, the Passwordless Login via Login Link screen displays as follows:

Login_WithLink.jpg

You can edit the fields used in the login form, as follows:

  1. If required, edit the introductory text as described in step 1 above
  2. If required, edit the email address field as described in step 2 above
  3. If required, edit the link that the end user can select to resend the verification link and the code resent confirmation text

    To edit the text, complete the following steps:

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

      The Link dialog box displays, as illustrated below:

      ResendLink_Dialog-1.jpg

      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 link?
    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 Passwordless Login via Login Link screen. Selecting the Cancel button displays the Passwordless Login via Login Link screen without saving any changes
  4. 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 in step1 above.

  5. Select the Done button to save your changes and return to the Form Builder screen