Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

A few of my favorite Webform things

Parent Feed: 

Every new year, aside from maintaining and continually improving the Webform module for Drupal 8, I look forward to putting together and practicing a Webform presentation with the hope that it will be accepted at the upcoming DrupalCon.

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.

YAML Source

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.

Results

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

Like PDF generation, many of the coolest aspects of the Webform module are provided by external libraries and add-ons. I am always in awe of what people contribute back to the Drupal and larger Open Source community.

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.

External Libraries & Add-ons

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.

5 - Configuration and Settings

4 - Reusable code

I know it may seem strange that one of my favorite Webform things is the simple fact that most of the code within the Webform module is reusable and extendable using Drupal's plugin and entity system.

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.

Reusable code

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.

Twig support

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.

Remote post handler

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.

Videos

Finally…

As you can see from this blog post, on my favorite Webform things is sharing my code, ideas, and passion with the Drupal community. Hopefully, you can catch my "Webforms for Everyone" presentation at DrupalCamp NJ, MidCamp, or DrupalCon Minneapolis.

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.

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OK

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web