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.
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.
Introducing Webform Cards
Webform Cards provides a ‘Card’ container element for fast client side multistep form pagination.
Without further ado, here is a demo of the Webform Cards module.
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 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.
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.