Adding fields (text, select, checkbox) to formsfor Drupal 8 , 9 , 10 , and 11

In the previous lesson, we explored creating a basic form by extending FormBase. Building on that foundation, this lesson will guide you through adding various field types—text, select, and checkbox—into your Drupal forms, thus enhancing the ways users interact with your module.

Understanding Form Fields in Drupal

Drupal’s Form API offers a plethora of field types you can integrate into your forms. Leveraging these different field types enhances the versatility of your forms, allowing you to capture more precise and varied user input.

Why Use Different Field Types?

Choosing the right field type for the right context is crucial for user experience. Here are a few reasons why different field types matter:

• User Friendliness: Different field types improve form usability by guiding users toward expected inputs.
• Precision: Specific field types enable accurate data capture, reducing the likelihood of errors.
• Customization: Tailor data input methods to your module's unique functional requirements.

Example Scenario: Enhancing Weather Module Settings Form

Continuing with our weather module, we'll enhance its settings form by introducing new fields: a text field for entering additional notes, a select box for choosing temperature units, and a checkbox for enabling or disabling a feature.

Step 1: Extend the Form Class with New Fields

We will modify the WeatherSettingsForm class to include the new fields:

// weather_module/src/Form/WeatherSettingsForm.php

namespace Drupal\weather_module\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class WeatherSettingsForm extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'weather_settings_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $config = $this->config('weather_module.settings');

    // Existing API Key Field
    $form['api_key'] = [
      '#type' => 'textfield',
      '#title' => $this->t('API Key'),
      '#default_value' => $config->get('api_key'),
      '#description' => $this->t('Enter your weather API key.'),
      '#required' => TRUE,
    ];

    // Existing Default Location Field
    $form['default_location'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Default Location'),
      '#default_value' => $config->get('default_location'),
      '#description' => $this->t('Enter a default location for weather data.'),
      '#required' => TRUE,
    ];

    // New Temperature Unit Select Box
    $form['temperature_unit'] = [
      '#type' => 'select',
      '#title' => $this->t('Temperature Unit'),
      '#options' => ['Celsius' => $this->t('Celsius'), 'Fahrenheit' => $this->t('Fahrenheit')],
      '#default_value' => $config->get('temperature_unit'),
      '#description' => $this->t('Choose your preferred temperature unit.'),
    ];

    // New Feature Notes Text Field
    $form['feature_notes'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Feature Notes'),
      '#default_value' => $config->get('feature_notes'),
      '#description' => $this->t('Add any notes regarding the feature.'),
    ];

    // New Enable Feature Checkbox
    $form['enable_feature'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Enable Weather Updates'),
      '#default_value' => $config->get('enable_feature'),
      '#description' => $this->t('Check to enable regular weather updates.'),
    ];

    // Submit Button
    $form['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Save settings'),
    ];

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    $this->config('weather_module.settings')
      ->set('api_key', $form_state->getValue('api_key'))
      ->set('default_location', $form_state->getValue('default_location'))
      ->set('temperature_unit', $form_state->getValue('temperature_unit'))
      ->set('feature_notes', $form_state->getValue('feature_notes'))
      ->set('enable_feature', $form_state->getValue('enable_feature'))
      ->save();

    $this->messenger()->addMessage($this->t('Weather settings have been saved.'));
  }
}

Step 2: Save and Validate User Inputs

With the new fields added, their values are processed in the submitForm method, updating the module's configuration with user inputs. Utilizing relevant functions for each field ensures their values are consistently stored and accessed.

Common Field Properties and Usage

Understanding common properties such as #title, #description, and #default_value is key. These properties dictate how fields are displayed and how they behave. Tailor these properties to align with your module's use case and user expectations.

Conclusion and Next Steps

This lesson demonstrated how to add various field types, like text, select, and checkbox, into your Drupal forms. These enhancements significantly improve data collection and user engagement with your module.

In the next lesson, we'll delve into "Implementing form validation methods", essential for ensuring data integrity and guiding users toward correct form submissions.

Continue to explore these concepts, and I'll see you in the next enriching lesson!