Drupal 8 - Create a form

By xngo on March 8, 2019

Overview

It is assumed that you know how to create a module. If not, see Create a module in Drupal 8.

Create a form is similar to displaying a page. You need:

  • A routing to your form.
  • A class that build the form.

Create a routing for the form

Add the routing information in ./modules/tradesteps/tradesteps.routing.yml, like the following:

tradesteps.my_form:
  path: '/my_form'
  defaults:
    _form: 'Drupal\tradesteps\Form\MyForm'
    _title: 'My Form'
  requirements:
    _permission: 'access content'

A side note:

Under the defaults section, you can't have a combination of _form and _controller. It is either 1 of them.

Implement your form class

Now, you have to implement MyForm class. Add the following code in ./modules/tradesteps/src/Form/MyForm.php and create the missing directories, i.e. src/Form.

<?php
namespace Drupal\tradesteps\Form;
 
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
 
/**
* Implements a simple form.
*/
class MyForm extends FormBase {
 
  /**
  * Build the simple form.
  */
  public function buildForm(array $form, FormStateInterface $form_state) {
 
    // Add input field called title.
    $form['title'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Title'),
      '#description' => $this->t('Title must be at least 15 characters in length.'),
      '#required' => TRUE,
    ];
 
    // Group submit handlers in an actions element with a key of "actions" so
    // that it gets styled correctly, and so that other modules may add actions
    // to the form. This is not required, but is convention.
    $form['actions'] = [
      '#type' => 'actions',
    ];
 
    // Add a submit button that handles the submission of the form.
    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];
 
    return $form;
  }
 
  /**
  * The form ID is used in implementations of hook_form_alter() to allow other
  * modules to alter the render array built by this form controller.  it must
  * be unique site wide. It normally starts with the providing module's name.
  */
  public function getFormId() {
    return 'tradesteps_simple_form';
  }
 
  /**
  * Implements form validation.
  *
  * The validateForm method is the default method called to validate input on
  * a form.
  */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    $title = $form_state->getValue('title');
    if (strlen($title) < 15) {
      // Set an error for the form element with a key of "title".
      $form_state->setErrorByName('title', $this->t('The title must be at least 15 characters long.'));
    }
  }
 
  /**
  * Implements a form submit handler.
  *
  * The submitForm method is the default method called for any submit elements.
  *     What to do after user click on Submit button.
  */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    /*
    * This would normally be replaced by code that actually does something
    * with the title.
    */
    $title = $form_state->getValue('title');
    drupal_set_message($this->t('You specified a title of %title.', ['%title' => $title]));
  }
 
}

Test the input form

  1. Clear your cache.
  2. Open http://your-domain.com/my_form
  3. Type in your title and then click on the Submit button.

Simple input form in Drupal8

Credit

  • https://docs.acquia.com/tutorials/fast-track-drupal-8-coding/build-new-form/

Github

  • https://github.com/xuanngo2001/drupal-form-simple.git

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.