My first Webform presentation, a general introduction to the Webform module for Drupal 8 at DrupalCon Baltimore, was simply titled Webform 8.x-5.x.. The following year at DrupalCon Nashville, I organized a more feature-focused presentation called Webform: There is this for that. Last year at DrupalCon Seattle, I did an ambitious 90-minute Advanced Webform session.
Each year, I have to decide what is the best approach to organizing and sharing the Webform module at DrupalCamps and DrupalCon. I struggle with including too much or too little information in my presentation. It’s also difficult to pinpoint my target audience - every DrupalCon session is supposed to have a target audience, but I want everyone to use and appreciate the Webform module. And while I certainly appreciate the event’s organizers need to classify things, I really believe in letting anyone who attends DrupalCon know that the Webform module isn’t specific to any one group.
The target audience for the Webform module is everyone.
Webforms for Everyone
The defacto audience for the Webform module is developers, only because I am continually scratching my developer itch when adding new features and improving APIs. At the same time, I am always thinking about site builders, who on a daily basis need to build and manage forms. Finally, it is hard to forget about the business owner and the end-users because, ultimately, we want to create an engaging user experience for end-users that meets a business owner's needs.
So after last year's developer-focused presentation, I started organizing a presentation titled "Webform for Everyone." I recently presented (aka practiced) this presentation at NEDCamp, and honestly, my presentation went so-so. Keeping certain information too basic, started to bore developers. Conversely, showing code samples, lost half the audience. I have done enough presentations not to be discouraged, but realized that I need to rethink my approach.
The best advice I got while practicing my "Advanced Webform" presentation was to focus on the most exciting and essential aspects of the Webform module. In other words, talk about my favorite Webform things.
My favorite Webform things
The "Webforms for Everyone" presentation is still going to broadly walk-thru the three primary audiences for the Webform module, which are site owners, site builders, and developers. I’m aiming to engage everyone and focus on "my favorite webform things" as they relate to each audience group. I admit that I am struggling with my slides. As such, I thought the best way to reapproach this challenge would involve stepping back and writing this blog post, about "my favorite webform things"
10 - YAML Source
Use the YAML source...
The Webform module started as the YAML Form module, which allowed people to build forms by writing YAML markup. At some point, the YAML Form module started to have UI and became the Webform module for Drupal 8. Please read Webform 8.x-5.x: Where Do We Come From? What Are We? Where Are We Going? to learn more about this journey.
Every Webform demo I have ever given includes showing people the YAML source editor because it demonstrates how Drupal's Form API (FAPI) render arrays are used to build forms. Being able to see an entire form's elements on one page makes it easier to tweak a form's labels and descriptions. Developers, including myself, can also hand-code webforms. I enjoy being able to take something as complex as a form and represent it using something as simple as YAML.
9 - Results
The results tab provides a quick and straightforward way to view submissions.
The Webform's use-case is "build a form", "collect submission data", and "distribute submission data". Collecting data requires that it is also easy to review. Drupal core's Views module is an incredible tool for building reports, but it requires a full understanding of Drupal's Field API. Most non-technical users simply need to be able to filter and sort submissions and then hide or show a few columns. With this in mind, the Webform module provides a very straightforward way to customize the results table.
Of course, developers and advanced site builders can replace the Webform's default results table with a custom view. Here is a video showing how to customize and improve the Webform module's Views Integration.
I enjoy keeping things as straightforward as possible while offering the most flexibility, and my attempts to simultaneously provide both of these qualities has been a constant tug-of-war while developing the Webform module.
8 - PDF generation
PDF makes it easy to print or save a submission
Just as important as viewing submissions online, it’s equally important to be able to download submissions. PDFs provide a universal and straightforward way to share information. Being able to generate and download a PDF for single or multiple submissions provides the most visually appealing and standardized approach to share information.
What I like most about the Webform modules's PDF generation is being able to leverage the Entity Print module to provide comprehensive integration. Webform modules PDF support is a great example of Drupal’s extensibility and community working together.
7 - External Libraries & Add-ons
Early on in the development of the Webform module, I started leveraging external libraries to provide advanced features like select menu enhancements and a signature element.
Now the Drupal community is extending the Webform module and providing additional functionality and integrations. Contributed add-on modules have handled several key aspects of the Webform module including Views integration.
6 - Webform Elements
Every type of element is available.
Being able to build the Webform module on top of Drupal's Form API while also leveraging external libraries made it possible to develop and maintain a wide variety of Webform elements. Webform elements, which can vary from basic HTML input to an advanced composite element, make it possible to collect any type of data.
Every possible element title and description variation is supported. For example, a form element can "hide" descriptions in help tooltips or read more slide-outs depending on the form’s use case and requirements.
The concept that every single aspect of an element is customizable can feel overwhelming and also empowering. I appreciate being able to add that little extra CSS to an element when it is needed.
5 - Configuration and Settings
Everything and anything is customizable.
As we walk through this list, a common theme for the Webform module is everything is customizable. Every message displayed to an end-user can be changed. Even administrative features like the usage of modal dialogs can be adjusted.
I enjoy knowing that every single possible way to confirm a form submission is supported. I like being able to open a confirmation message in a simple modal dialog.
4 - Reusable code
Drupal's entity system made it easy for me to create a very basic UI for managing reusable lists of options and images for select menus, checkboxes, and radios. Drupal's plugin system makes it easy for developers to create custom webform elements and handlers.
I am not sure if Drupal developers realize that any webform element, including elements like select, checkbox, and radios with the other option, entity references, composites, and multiples, can be reused in their custom forms, built with Drupal's Form API. There are even some simple utility classes available to manipulate custom-built forms, elements, options, and arrays.
3 - Twig support
Twig is awesome!
There is a limited amount of flexibility available in a graphical user interface, and sometimes the most flexibility happens when a developer can only write the code they need. The old school and utterly insecure solution was to allow developers to inject PHP into a page. Before Drupal 8, pages were rendered using PHP templates. Luckily with Drupal's adoption of Symfony, the Twig templating engine was added to core. Initially, I thought Twig was just for rendering variables and executing loops with templates. At some point, I realized that Twig supports most math calculations and even some OO concepts. It makes a lot of sense to build custom emails using Twig. It also mind-blowing that Twig can be used to perform calculations for computed elements.
Computed elements can collect and manipulate that little bit of extra data that needs to be captured and stored with a submission. Computed elements can calculate totals and even trigger custom conditional logic.
2 - Remote post handler
Everyone needs to be able to consume and share information.
The remote post handler allows a webform submission to be posted to a URL. When I added the remote post handler to the Webform module, I thought it was nice to have feature that would be used by a few websites. In the past few years, with the rise of CRMs, being able to push data from server to another is a requirement for most enterprise websites. I frequently recommend that people build a webform in Drupal, but remote post the submission data to a system that is designed to aggregate, analyze, and report on data securely.
1 - Videos
Having some adequate documentation is one of my biggest accomplishments with the Webform module. Like many developers, I do not like writing documentation. That said, documentation makes it possible for people to understand how things are supposed to work. I started out recording some general demos of the few modules that I have contributed back to the Drupal community. I realized that I could add links to videos about functionality and features within the Webform module's user experience.
It is fun and rewarding to show people the latest and greatest Webform feature or improvement. I know the Webform module can occasionally feel overwhelming, and it helps to have a video that guides someone through the process of getting the most out of the Webform module.
Backing the Webform 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.