Return to site

Drupal 8 and the Webform module helps NYC online voter registration bill get passed

· Drupal,Webform,Case Study


My family and I got to see Mayor Bill de Blasio sign the online voter registration bill into law which Ben Kallos, a New York City councilman and true fan of Open Source, sponsored. Kallos used the Webform module to demonstrate how easy it easy it is to capture a digital signature. The most ironic thing about watching the mayor sign the online voter registration bill, which is driven by the concept of digital signatures, into law, was the fact that he used used multiple pens to sign the bill. My daughter Lili and I both received pens that the mayor used to sign the bill. Everyone, myself included, has Kallos to thank for making this bill and experience happen. I guess - and this is a good thing - we’ll have to find other uses for our pens.

Last month, Kallos did a presentation at the NYC Drupal Meetup about how he used the Webform module to help get legislation passed to allow online voter registration for New Yorkers.

We all know that we can’t vote online yet, but I was surprised to realize that people can’t even register to vote online! Sure governments and municipalities move slowly, but how hard should it be to set up an online voter registration application? There is even an online HTML form that generates a filled-out PDF form that you have to print out, sign, and mail in. Next, someone manually re-enters your information, with no typos…duh. Kallos gets technology, which is why he sponsored this legislation and tackled the real challenge of showing his fellow council members how to capture a digital signature, which is essential for registering voters.

...As a demonstration of the ease with which a portal can be created, he built his own fully functional microsite, which he said took only a few hours. “I hope the city doesn’t wait years or months but gets it done in weeks, days or even hours,” he said, also hoping that every city agency integrates links to the portal in online forms, which isn’t mandated in the legislation.


From: Gotham Gazette

Kallos’ 'fully-functional microsite' was a Drupal 8 instance on Pantheon with the Webform module. Kallos rebuilt the static voter registration PDF generator using the Webform module. Besides making an exact duplicate of the existing form, he was able to create a versatile mechanism that captures a digital signature by allowing users to enter a signature with their finger or mouse, or upload a photo of their signature on a piece of paper.

Signature element in action

Even though Kallos built this experience using the Webform module's UI, I think it’s cool to show developers and site builders the simple YAML code behind his flexible digital signature.

Signature Element YAML Source

It is really great to see how Kallos took the 'Signature' and 'Image file' elements and combined them with conditional logic to create a flexible digital signature. I’d like to take a moment to share the story behind these two elements.

Image File Element

The 'Managed file' element was one of the first elements supported by the YAML Form module, which became the Webform module. I was not even aware that the HTML5 file upload input supported the 'accept' and 'capture' attributes until shaunikm created Issue #2823448: Mobile Native Form Fields, which inspired me to build dedicated video, audio, and image file upload with media capture.

Adding media-specific file uploads also led me to include the test files directory, which was copied from Sample Files for Development provide by Even though the 'test' files directory added 4MB to the Webform module's overall size, I want to note that I use these files to test my webforms on a daily basis. I personally enjoy seeing how shaunikm's simple suggestion flows into other ideas and improvements to the Webform module.

Signature Element

Everyone is so impressed by the slick looking 'Signature' element, but it’s really only a few lines of codes in two plugins (Element/WebformSignature and WebformElement/WebformSignature) that integrate the Open Source SignaturePad project by Szymon Nowak. The SignaturePad project does the real magic and provides the HTML5 signature capturing input. How the Webform module is leveraging the SignaturePad project is a great example of an Open Source project leveraging the accomplishments of another Open Source project.

Not invented here

The Webform module for Drupal 8 fully adopted the not invented here mindset and relies on external Open Source projects to provide many features and enhancements to forms and elements. The Webform module integrates with over a dozen external Open Source libraries and projects. I am pretty sure that is a record for a contributed module in the Drupal community.

Having Freedom

Open Source allows communities to freely collaborate to create software that gives people the freedom to build amazing things. The fact that Kallos was able to freely use Drupal 8 and the Webform module to facilitate making it easier for New Yorkers to register to vote is why I love Open Source. I am not working on the Webform module for 'free'; I am contributing something back to the Open Source community to help support the freedom that is given to us by Open Source software.

Kallos also understands the freedom behind Open Source and it is great to see someone in politics pushing government further into the digital age using Open Source software.

You can skip ahead to extremely cool moment where
Mayor Bill de Blasio says he "likes the name "Drupal'".



One significant step for government, one more giant, proud leap for Drupal.

All Posts

Almost done…

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