How Drupal’s Form API is Reinventing Progressive Activism on WordPress & Beyond

Regardless of what gets you excited about progressive politics – whether it’s health care reform, or making college affordable, or a clean energy future – the chances are pretty good that you’ve encountered a signup form, contribution form, or petition. These forms, which political campaigns use to gather supporters and survey their volunteers, are just about ubiquitous today.

At NGP VAN, we work hard to give our clients beautiful, user-friendly forms that increase conversion rates. Our solution is known as ActionTag, and it’s used by progressive campaigns up and down the ballot.

ActionTag is based on an important insight. While digital organizers use our cutting-edge Online Actions product to build sophisticated forms, they need to make those forms available to end users on a wide variety of websites – anywhere from a simple WordPress blog to a large, professionally-built campaign website.

Consequently, we built ActionTag as a Javascript application which can be embedded on any web page with just a couple lines of code. But how do those couple lines of code work?

The key is an API which our Online Actions application makes available to ActionTag. If you use Firebug (or a similar tool) to inspect a page that features an ActionTag form as it loads, you’ll notice some network activity like this:

That GET request is issued by ActionTag, to retrieve what we call a “form defintion”. That strange number you see there (-323668…) is the formId, which uniquely identifies each form in our system.

Now take a closer look at (a piece of) one of these form definitions:

{
    "maxlength": 50,
    "name": "FirstName",
    "required": true,
    "title": "First Name",
    "type": "textfield"
},
{
    "maxlength": 50,
    "name": "LastName",
    "required": true,
    "title": "Last Name",
    "type": "textfield"
},
{
    "name": "StateProvince",
    "options": "states",
    "required": true,
    "title": "State or Province",
    "type": "select"
},
{
    "maxlength": 100,
    "name": "EmailAddress",
    "queryString": "em",
    "required": true,
    "title": "Email",
    "type": "textfield",
    "validation": "email"
}

Astute observers may note the remarkable similarity between this form definition and the Drupal Form API. That similarity is no mistake! When we started designing this data contract, we looked around to see what other solutions existed for general-purpose form rendering. It turns out that Drupal has been doing this job, for untold number of sites and even more forms, for well over a decade. Inspired by Drupal’s tremendous technical success, we decide to create a basic data contract that suited our purposes, and make it available via a simple, JSON-formatted REST API.

To make this data contract work in our context, we had to add a lot of properties that make ActionTag tick. Since our form definitions are rendered in Javascript, we encode the post-form-submission experience in the “confirmation” property – instead of relying on a server-side submit workflow, as Drupal does. In order to boost the search engine and social network optimization of our forms, we’ve built in native support for Open Graph metadata properties in the “metatags” property, instead of requiring a third-party module to implement that feature. The ideas behind the Drupal data contract proved to be a great jumping-off point.

This approach has worked out just as well as we hoped. ActionTag forms are used in every corner of the progressive movement. What started out as a bold experiment in helping organizers find supporters and raise money has become more powerful still. We recently added advocacy capabilities to ActionTag, so that progressive activists can lobby key decision makers – in Congress, the executive branch, and beyond – and we can point to a robust, time-tested open source CMS for a lot of inspiration in developing this data contract. As it happens, the Drupal Form API data contract is just one component of this very sophisticated app – we’ll have a lot more to say about how rigorously we’ve optimized and fine-tuned ActionTag, in future blog posts.

Care to join us? We’re always looking for talented engineers. We have challenging problems, incredible clients, and all the free snacks you want. Join our team at https://www.ngpvan.com/careers, today!