In my previous blog post about a few of my favorite Webform things, I expressed my appreciation for the fact that that "most of the code within the Webform module is reusable and extendable." Writing that blog post helped me re-organize and improve my presentation titled, Webforms for Everyone. While updating my presentation, I found explaining and showing how the Webform module’s APIs are reusable is very challenging. As the Webform module has grown and gotten more complicated, I have continually improved the examples and demos included in the module. These examples have helped developers understand how to extend the Webform module. As a result, I decided the best way to show how the Webform module's APIs - specifically form elements and behaviors - are reusable, was to create an example.

The goal of the Webform Custom (Configuration) Form example is to show how to leverage Webform APIs outside of the Webform module. For instance, webform elements can be used within a Drupal configuration forms. A very basic reusable enhancement is attaching the Webform module’s JavaScript to warn users about unsaved changes.

A more advanced example is reusing the Webform module's multiple element widget to collect rich data. Recently, I had to create an arbitrary list of node ids stored within a configuration file. In doing so, I was able to use Drupal’s entity autocomplete element combined with the Webform module’s multiple element support.

The below example shows how to use a multiple entity autocomplete element with the unsaved changes behavior within a configuration form.

The above example was created using the below code snippet.

Code generators like Drupal Console are incredibly valuable for creating boilerplate code, particularly for complex APIs or concepts. Drupal Console can also create an entire skeleton of a custom module, which inspired me add a code generator to the Webform Devel module. The Webform Devel module's code generator shows how to convert a Webform to Form API form.

The Webform Devel module, included with the Webform core module, now adds a 'Form API' tab within the configuration 'Export' tab. The 'Form API' tab includes all the boilerplate code required to take a Webform and convert it to a custom configuration form. The generated code consists of the form class definition, route definition, default configuration, and even the custom module's info file. All of the example code can be downloaded as a zipped archive, which can then be installed on any Drupal 8 website.

The below screencast recaps some of the examples discussed and illustrates the workflow and concept behind exporting and converting a Webform into a custom Drupal configuration form.

Something about this feature is pretty mind-blowing. When I included the above demo at the end of my "Webforms for Everyone" presentation at DrupalCampNJ, I managed to get every multitasking developer to look up from their laptops.

I am excited about this new feature and approach because it makes our job as developers a little easier, and people's end-user experiences a little better.

I hope you have fun building out awesome Webform and then exporting them as configuration forms into a custom module.

Open Collective is providing us, Drupal, and Open Source, with a platform to experiment and improve Open Source sustainability. If you appreciate and value what you are getting from the Webform module, please consider becoming a backer of the Webform module's Open Collective.