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. Navigate to Configuration > People > Account settings and click the Manage fields tab.
You are on the Manage fields tab.
  1. Click + Create a new field.
  2. In the Select a field type dropdown, select Text (plain), and click Continue.
  3. In the Label field enter, Department code, and select Text (plain).
  4. Click Continue.
You are on the Department code settings for user page.
  1. Accept the defaults of Maximum length (255) and Allowed number of values (Limited:1).
  2. Click Save settings.
You are on the Manage fields page. Check that Department code is a listed field.
  1. Under Label, find Department code and click Edit.
  2. 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.
  3. Add Example department code: DEP123. into the Help text field.
  4. Select the Required field checkbox.
  5. Click Save settings.

The field has now been created. You are back on the Manage fields tab.

Adding the new field to the Sign up form

  1. Navigate to Configuration > People > Account settings and click the Manage form display tab.
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 a new 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.