Skip to main content

Form Elements

About Form Elements

Form elements are used to collect data using input fields in a structured way.

Form elements used in Drupal 8 should be used with the Forms Module.

The Forms Module is very robust and offers many form element options. For the purposes of using it at the University of Minnesota, the display is customized to use Folwell styles and additional development work has been done to ensure accessibility based on a review of the module by the Disability Resource Center.

Status, warning, and error messages have been added to the form fields. To see the error messages, simply hit the submit button without filling any information.

Usage, Best Practice, and Accessibility

Example

View Phase 1 Form ElementsView Phase 2 Form Elements

The phase 3 form element will be available summer 2020.

Phase 3 Form Element in Development

Usage

The Drupal 8 webform module gives you the ability to create any form you want. To create a webform, follow the steps below.

Creating a webform

  • Go to the form builder section under Structure > Webforms
  • Click the add webform button.

    Add webform button example

  • The add webform window will open. Provide a title and administrative description to your new form and click save.

    Add new webform example

  • After saving the add webform window, you will be redirected to the build section of your new form.
  • Click the "add element" button under build tab to add any webform element.

    Build webform example

  • Select the webform element you want from the list of elements and click "add element" button on the right side of the box.

    Select an element example

  • Provide a title to the form element and make any additional configurations as needed.

    Add new element example

  • Click the "Save" button to add the form element to your form.
  • You can view the form you’ve created by clicking the "View" tab, and also you can test your form with sample dummy text by clicking the "Test" tab.

Additional documentation regarding the webform module can be found on Drupal.org webform features page.

Best Practice

  • Think through what information you need to gather, and how it needs to be organized and group similar types of information together.
  • Arrange fields from easiest to most difficult. Visitors are less likely to abandon a form when they have already invested in filling it out. 
  • Minimize the number of form fields. The longer the form, the less likely the visitor will be to complete the form.
  • Group fields logically and organize similar types of content together; for example, email, phone and address fields would be organized together under “Personal Information”. 
  • Include helper text to explain why a field is needed (e.g., how a phone number will be used). 
  • Break up the form into multiple screens or sections when it is a long form with multiple inputs. Display a progress bar to let the visitor know how many pages they can expect in the process. 
  • Test your form before launching. Testing can be focused in three key ways
    1. Usability - You want to ensure it works as intended.
    2. Speed - Time how long it takes to load and display the form.
    3. Time - How much time is needed to complete the form and how does it relate to the visitors expectations.

Accessibility

  • A new style was added for status, warning, and error messages. 
  • When a single checkbox is needed, choose the single checkbox in the module. This will identify the checkbox as required and an aria-required="true" will be added to the fieldset. 
  • The description of a multiple email address element has been updated. 
  •  Validation has been enabled to validate invalid entry.