Skip to main content

Create a Login or Registration Form

Zuora

Create a Login or Registration Form

  1. Last updated
  2. Save as PDF

You have two options for creating a form: either access the Component Library screen to create a new form or generate one on-the-fly directly within the outcome, which you can optionally save in the component library afterward. To add a login or registration form on-the-fly: 

  1. Go to Product > Features.
  2. Add a new feature or select an existing one. 
  3. Click Add a New Outcome in the Version screen.
  4. Click Login or Registration. 
  5. Enter the required information.

Alternatively, complete the steps in this section to create a login, registration, or forgot password form from the Component Library screen.

  1. Click Add Component > Login or Registration from the Component Library screen.
    clipboard_e61101eb9bf1bdb44cd89a7fa8a3e50a3.png
    By default, the Title text box is pre-filled with Login or Registration Form. You can edit this, if required. You can also preview and validate your form in real-time, with updates displayed instantly in the Preview window on the screen's right side.
  2. Step 1: Account Verification - When setting up your form's Account Verification step, it's crucial to define the necessary fields accurately. Here's how to configure each field:
    • Text - This field allows you to add introductory text to your form. To modify the text displayed:
      1. Click the dropdown arrow located at the end of the row.
      2. Enter the text you want to display in the text box.
      • Email Address - Displays a field in which your end user can enter their email address. To customize the email field:
      • Click the dropdown arrow located at the end of the row.
        clipboard_ea7449c65bd798631f545fcf3e6fcdb9e.png
        At the top of the Enter Email Address dialogue box, you can see a preview of the email address field as it appears in your form.
      • Enter the label you want to display above the email address field in your form in the Input Box Label Text text box.
      • Enter the text you want to appear as a placeholder in the email address field of your form in the Placeholder Text text box.
      • Account Code - Allows you to display a field in which the end user can enter their account registration code. To modify the text displayed:
        1. Activate the Account Code field by toggling the button at the end of the row.
        2. Click the dropdown arrow located at the end of the row.
          clipboard_eac7c5ab576c2a7fa49837f887c83b87a.png
        3. Enter the label you want to display above the account registration code field in your form in the Code Label text box.
        4. Enter the text you want to appear as a placeholder in the account registration code field of your form in the Placeholder text box.
      • Divider - Defines a divider within your form. To setup the divider:
        1. Activate the Divider field by toggling the button at the end of the row.
        2. Click the dropdown arrow located at the end of the row.
          clipboard_e5b5c80b4b40946d87fc672781cb85e11.png
        3. Modify the text and choose whether to display or hide the divider.
      • Social Login - Allows users to use social login providers for account verification. When defined, the end user can select the logo of the social sign-on provider to register and login. To configure social login providers:
        1. Activate the Social Login field by toggling the button at the end of the row.
        2. Click the dropdown arrow located at the end of the row. If you have not already defined login providers, the Social Sign-in dialogue box displays, as illustrated below:
          clipboard_e1f28958a510492ee5550125e767c9b92.png
          Select the Add a new provider link to select the login providers that can be used in your form. If you have connected a user attribute to a field name used by your login provider, the information is automatically completed in the form when your end user uses the login provider. For further information on defining login providers, see Login Providers. If you have defined login providers, the Social Sign-in dialogue box displays as illustrated below:
          clipboard_e567131e620b1c91c6325c0a3cce26e86.png
        3. Select the checkbox for each login provider that you want to offer for use in your form.
      • Button (Continue) - Displays the Continue button for users to proceed to the next step in your form. You can edit the colour of your button using the Style Guide. For further information on defining your style guide, see Define Your Style Guide. To customize the button:
        • Click the dropdown arrow located at the end of the row.
          clipboard_e3d45871ba1e767d8f608e234603e4a0b.png
        • Update the text in the Button Text text box as required.
      • Custom Text - Allows you to add custom text to your form by selecting the Add Custom Text button.
        clipboard_e693e5b305c56ee7d397b3530fe0960da.png
  3. Step 2: Login or Register - Define the forms that can be used as required. You can define the following forms:
  4. Additional Settings - Click the CSS Configuration and enter your preferred CSS code to tailor the form to your specifications. Click Done to save your configurations.
  5. Select the Save button to save your changes.