​

Webform cards open up infinite possibilities that are beyond our current expectations of the Webform module.

Our expectations of the Webform module are directly tied to Drupal’s Form API, a robust and secure framework for building, validating, and submitting forms. Still, Drupal’s current Form API implementation is about ten years old. It is starting to show its age. When Drupal’s Form API was built 16 years ago, form rendering and validation were always executed server-side; Ajax was a new kid on the block. Now, with modern frontend frameworks, like React and VueJS, form rendering and validation happen clientside, in the web browser. This approach results in a faster, more flexible ‘modern’ user experience. 

Users now expect a fast and responsive user experience.

Modernizing Drupal and Webform User Experience

The Drupal community is working on modernizing Drupal’s user interface and experience. In the meantime, Drupal and the Webform module should provide the best user experience possible. Any request to the server (aka the Drupal backend) is, by definition, slower than changes and behaviors happening in the client (aka web browser). The first step to improving Drupal and the Webform module’s user experience and performance to move most data validation to the client’s web browser using clientside validation. 

Clientside validation

Even though modern browser’s support HTML 5 Clientside validation, the implementation is inconsistent and there are known accessibility issues. The Clientside Validation module , which uses the jQuery Validation plugin, solves some of these accessibility issues and offers the most consistent user experience. Installing the Clientside Validation module will immediately improve everyone’s single page webform user experience because the server won’t have to keep validating and rebuilding the form. 

There is still the problem with multistep ‘wizard’ webforms because each wizard page must be requested and built by the backend server. In the best environment, each page request for a multistep wizard form page will take about a ½ second, on a more complex website multistep webform, a page request can take more than a second. One second is a lot of time, especially for a form with dozens of steps. For example, paging through a questionnaire with 30 questions can take an extra 30 seconds of waiting for each page render; this is on top of having to fill out the form.

Users should be able to flip through a multistep wizard webform as fast as a carousel of image.

Clientside (aka JavaScript) pagination

Clientside pagination is not a new concept; it is how all image slideshows are set up. All the assets are sent to the web browser, and JavaScript allows users to quickly page through the slides. Sending a few dozen images to a browser is not a big deal, so I decided to experiment with downloading the entire multistep webform HTML markup to the web browser and use JavaScript to handle the pagination. The result of the multistep webform’s performance was exponentially faster. Once upon a time, sending a large packet of HTML to the web browser could have been a performance issue, but the rendering performance on modern browsers is now ridiculous fast. Once I had a proof-of-concept, I decided to implement this new approach as an optional Webform sub-module, called Webform Cards.

Introducing Webform Cards

Webform Cards provides a ‘Card’ container element for fast client side multistep form pagination.

Saying something is fast is not the same as showing how fast it is, but before I demo the Webform Cards module, it is worth pointing out some key concepts. First, Webform Cards is an experimental module that takes your existing wizard configuration and presentation and moves them to JavaScript. To use cards, you need to convert your wizard pages to cards. The Webform Card module includes a tool to make this conversation for you. To create the best user experience for end-users, the Webform Cards module requires Drupal core’s Inline Form Errors module and the contributed Clientside Validation module with the Webform Clientside Validation sub-module. I know this sound like a lot of dependencies, but once you all these modules download and installed, the only thing left to do is to build a webform using cards

Without further ado, here is a demo of the Webform Cards module. 

Watch Video ►

To infinity and beyond... well kind off

When I completed building out the Webform Cards module, I had a “too infinity and beyond” moment because this new approach opens up so many new possibilities for people building webforms. The saying ”To infinity and beyond” comes from the movie “Toy Story,” which is about an old and maybe outdated toy cowboy, called Woody, learning to work and become close friends with the modern and sleek Buzz Lightyear, a space ranger. In contrast to Drupal, Form API is slowly becoming outdated like Woody, and Form API needs to work with more modern ‘buzz’ frameworks. The Webform Cards module like Buzz Lightyear is nudging our old toy, Form API, to explore new possibilities and gradually become more modern. There is some irony in this analogy because Buzz Lightyear’s wings and lasers don’t exactly work as expected, and Webform Cards is not exactly a ‘modern’ solution. Still in, the end, Buzz Lightyear and Woody, survive and grow. Webform Cards is helping the Webform module survive and thrive, but there is still more work to be done. 

There is still more work to be done

The Clientside Validation module needs your help with finding and fixing issues. Drupal’s Admin UI & JavaScript Modernisation needs everyone’s help. Drupal’s Form API needs some love and modernization. Meanwhile, the Drupal community now has multistep webforms that provide a modern feeling user experience.

The new Webform Cards sub-module is available in the latest release of Webform 8.x-5.x (for Drupal 8) and Webform 6.x (for Drupal 8 and 9). 

Who sponsored this feature?

Memorial Sloan Kettering Cancer Center (MSKCC) has been my primary client for the past 20 years. Without MSKCC’s commitment to Drupal and their early adoption of Drupal 8, I would most likely not be maintaining the Webform for Drupal 8. Most of my work on the Webform module is done during my free time. Occasionally, MSKCC will need a Webform-related enhancement that can be done using billable hours. In the case of “Webform Cards”, MSKCC, needs to build faster and modern screening forms for patients.

I am very fortunate to have an ongoing relationship with an institution like MSKCC. MSKCC appreciates the value that Drupal provides and the work that I am doing within the Drupal community.

If you want to sponsor a feature, please read my blog post and create a ticket in the Webform module’s issue queue.