Drupal 8 – How to create a custom form

In this post, we will discuss how can we create a custom form in Drupal 8. If you have already worked in Drupal 7, it’s totally different in Drupal 8.

First you need to create a custom module to create a form. To create a module in Drupal 8 is so simple

1) Creating a module

Go to your drupal path and create a folder called ‘my_custom_form’: /drupal8/module/my_custom_form

then, create a file

my_custom_form.info.yml

name: 'my_custom_form'
type: module
description: 'Custom form using a custom module'
core: 8.x
package: 'Custom'

Now you have created a module, go to “Extends” and enable the module.

2) Creating a form

We have a module now, so let’s create a custom form.

Go to the path: /drupal8/module/my_custom_form and create a route file:

i) my_custom_form.routing.yml

my_custom_form.my_form:
  path: '/myform'
  defaults:
    _form: '\Drupal\my_custom_form\Form\MyForm'
    _title: 'MyForm'
  requirements:
    _access: 'TRUE'

After creating the above file, create two folders src and Form inside my_custom_form, So the structure would look like this now,

Inside the ‘Form’ folder create a PHP Class and put the below code:

ii) MyForm.php

<?php

namespace Drupal\my_custom_form\Form;

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

/**
 * Class MyForm.
 */
class MyForm extends FormBase {


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

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Name'),
      '#description' => $this->t('Enter your fullname'),
      '#maxlength' => 64,
      '#size' => 64,
      '#weight' => '0',
    ];
    $form['phone'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Phone'),
      '#description' => $this->t('Enter your phone number'),
      '#maxlength' => 64,
      '#size' => 64,
      '#weight' => '0',
    ];
    $form['email'] = [
      '#type' => 'email',
      '#title' => $this->t('Email'),
      '#description' => $this->t('Enter your email'),
      '#weight' => '0',
    ];
    $form['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Display result.
    foreach ($form_state->getValues() as $key => $value) {
      drupal_set_message($key . ': ' . $value);
    }

  }

}

Just go through above code, to create a form, you need to extend “FormBase” core class and an interface

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

When you use FormStateInterface, you should use the following functions as well getFormId(), buildForm() and submitForm() without these function a form cannot be created.

getFormId() – this is where you have to mention your form id and it should be unique
buildForm() – this is where you will create your form
validateForm() – here you can write your form validations
submitForm() – this is where you can handle submit processes

Now you have your custom module and a custom Form created, as we have already enabled the module just clear cache and access the path https://localhost/drupal/myform to see your custom form

myform-path

 

For your convenience, I attached the entire module here, click the below link to download the module.

download

Leave a Reply

Theme: Overlay by Kaira
Agurchand