Tutorial: Adding a field to the sign up form

You might want to collect and store additional information about your Developer Portal users. For example, you might want to collect a department name, employee ID, or similar data when a user registers for an account on the portal.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

About this tutorial

In this tutorial, you will add a Department code field to the Sign up form. This field is required for all portal users.

This tutorial takes you through the following steps:
  1. Adding a field to a user entity.
  2. Adding the new field to the Sign up form.
  3. Testing the new field.

Adding a field to a user entity

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Configuration > People > Account settings > Manage fields
You are on the Manage fields tab.
  1. Click + Add field.
  2. In the Select a field type dropdown, select Text (plain).
  3. In the Label field enter, Department code.
  4. Click Save and continue.
You are on the Field settings tab.
  1. Accept the defaults of Maximum length (255) and Allowed number of values (Limited:1).
  2. Click Save field settings.
You are on the Edit tab.
  1. Add some help text. This is information that is displayed to the user to assist them completing the field on a form. Examples or links to further information are useful here. We are going to add an example in this tutorial.
  2. Add Example department code: DEP123. into the Help text field.
  3. Check the Required field.
  4. Click Save settings.
The field has now been created. You are back on the Manage fields tab.
  1. Check that Department code is a listed field.

Adding the new field to the Sign up form

  1. If the administrator dashboard isn’t displayed, click Manage to display it.
  2. Navigate to Configuration > People > Account settings > Manage form display
You are on the Manage form display tab. These tabs, one for each form, show the fields that are displayed from the user entity, and in which order.
  1. Switch to the Register tab. Notice that initially the new Department code field is underneath the Disabled row in the page. This means that it isn't shown on the form.
  2. Click the Department code icon and drag it so that it is between Last name and Consumer organization in the list. Department code field
  3. Click Save.

Testing the new field

  1. Sign out as the Admin user.
  2. Click Create account.
  3. Observe that the Department code field is now part of the sign up form.

What you did in this tutorial

You added a Department code field to the Sign up form, then tested the form to ensure that the Department code field is now part of the sign up form.

In reality, you would need to add this configuration in such a way that it is available for all sites. To achieve this you would include the configuration in your custom module. For more information, see this Drupal documentation.

You might want to add extra validation to the Department code field on the Sign up form. For more information, see Tutorial: Adding validation to a field on the sign-up form.