This talk was held by me during the Drupal Developer Days held in Milan (Italy) in June 2016. It presented a course and a practical application of building and configuring a Custom Form and its Configuration Form according to new Drupal 8 Form Object Oriented APIs. Same best practices were analyzed applied to the experience so far conducted in the context of an advanced Drupal 8 project run in the team of Wellnet Srl (Milan). The talk addressed the creation of an ad-hoc custom module used to deepen the patterns required in the production of typical constructs required by Drupal 8 coding standards. In particular the following topics have been discussed and shared: the definition of form route, form link menu and custom form controller; the default configuration management service container with the configFactory and the override throughout a specific configuration form; the construction of the form through the possible form and render elements; the consume of an external web service using service http_client (via dependency injection) and the reaction with Ajax Form API interaction;

1. Custom Forms and Configuration Forms:
examples of Drupal 8 objected oriented APIs
@ItaloMairoItalo Mairo
Drupal.org username: itamair

2. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
Engineer - Freelance
More than 15 years of working experience
in Digital Communication, Multimedia, Digital
Cartography, Web & Web GIS 2.0 Opensource
Applications.
Experienced Drupal Developer
more than 5 years of full-time work experience
collaboration with several Drupal Italian Web Agencies
Individual Member of Drupal Association
Personal website: www.italomairo.com
Linkedin Profile: italomairo
Who I am …

3. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
About this talk …
Presents a practical application of building a
Custom Form and its Configuration Form, according
to new Drupal 8 Form Object Oriented APIs.
Inspired by Best practices and patterns, applied in the
context of an advanced Drupal 8 project run as
member of the team of
Wellnet Drupal Agency (DDD Gold Sponsor).
Special thanks, for his mentoring about Drupal 8 OOP,
to Luca Lusso (@ lussoluca),
Wellnet Tech Lead,
Webprofiler creator & Devel Module maintainer
and more …

4. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
Form API in Drupal 8
Is largely similar to the Drupal 7 Form API.
Forms are defined by implementing the
DrupalCoreFormFormBuilderInterface
and the basic workflow of a form is defined by
• getFormId
• buildForm
• validateForm
• submitForm
Check out https://api.drupal.org/api/drupal/elements
for all the core provided elements.
There are new HTML 5 elements (like ‘tel', 'email', 'number', ‘date', ‘url’)
and specific others (‘details’, ‘language_select’, ‘dropbutton & operations’, etc).

5. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
Drupal 8 provides extendable base classes for easy form
creation.
FormBase - The most generic base class for generating forms
(implements FormInterface, use FormStateInterface)
ConfirmFormBase - For providing users with a form to confirm
an action such as deleting a piece of content.
ConfigFormBase - For creating system configuration forms,
provides additional functionality for improved interaction with the
configuration system.
Form API in Drupal 8

6. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
Form API in Drupal 8
Integrate the form in a Route request
The routing system takes care of instantiating the form class and invoking the proper methods.
ddd_forms_talk.ddd_form:
path: '/ddd_form'
defaults:
_form: 'Drupalddd_forms_talkFormDddForm'
_title: 'DDD - Example Form'
requirements:
_permission: 'access content'
Adding further parameters -> Using parameters in routes
Retrieving this form outside of routes
The routing system allows form classes to be provided as route handlers, in which case the
route system takes care of instantiating this class and invoking the proper methods.
$form = Drupal::formBuilder()->getForm(‘Drupalddd_forms_talkFormDddForm’, $extra_params);
(corresponds to the D7 drupal_get_form($form_id) function)

7. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
Form API #states
Form API #states allow us to create form elements that change
state (show, hide, enable, disable, etc.) depending on certain
conditions—for example, disabling one field based on the
contents of another.
For most common Form UI tasks, the #states system eliminates
the need to write custom JavaScript. It eliminates inconsistencies
by translating simple form element properties into standardized
JavaScript code.

8. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
Dependency Injection for a Form
namespace Drupalddd_forms_talkForm;
use DrupalCoreFormFormBase;
use DrupalCoreFormFormStateInterface;
use SymfonyComponentDependencyInjectionContainerInterface;
use DrupalCoreRenderRendererInterface;
class DddForm extends FormBase* {
public function __construct(RendererInterface $renderer) {
$this->renderer = $renderer;
}
public static function create(ContainerInterface $container) {
return new static(
$container->get('renderer')
);
}
… (omissis)
Note*: abstract class FormBase implements FormInterface, ContainerInjectionInterface
Forms that require a Drupal service or a custom service should access the service
using dependency injection.

9. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
To trigger an Ajax response:
• Add property '#ajax' to a form element in your form array,
• Write an Ajax callback to process the input and respond.
The #ajax property for a form element is an array, with specific elements, all of which are optional:
• callback: The callback to invoke to handle the server side of the Ajax event.
• wrapper: The HTML 'id' attribute of the area where the content returned by the callback should be placed. Note
that callbacks have a choice of returning content or JavaScript commands; 'wrapper' is used for content returns.
• method: The jQuery method for placing the new content (used with 'wrapper')
• effect: The jQuery effect to use when placing the new HTML (used with 'wrapper')
• speed: The effect speed to use (used with 'effect' and 'wrapper')
• event: The JavaScript event to respond to. This is selected automatically for the type of form element; provide a
value to override the default.
• prevent: A JavaScript event to prevent when the event is triggered.
• progress: An array indicating how to show Ajax processing progress. Can contain one or more of these:
• type: Type of indicator: 'throbber' (default) or 'bar'.
• message: Translated message to display.
• url: For a bar progress indicator, URL path for determining progress.
• interval: For a bar progress indicator, how often to update it.
Ajax Responses in forms

10. Custom Forms and Configuration Forms in Drupal 8 - Italo Mairo (itamair)
References for further information
• Form API in Drupal 8: https://www.drupal.org/node/2117411
• Form and render elements: https://api.drupal.org/api/drupal/elements
• Dependency Injection for a Form:
https://www.drupal.org/node/2203931
• Form API #states: https://www.lullabot.com/articles/form-api-states
• Ajax API:
https://api.drupal.org/api/drupal/core%21core.api.php/group/ajax/
8.1.x