Three weeks ago we've released our first public open-source version of Campaignion. It allows you to set up online actions, like petitions and email protests. You can also set up donation pages with fully customizable forms. All data ends up in the built in CRM system (based on Redhen) and you can filter you supporters. Using integrations like email marketing you can build a platform that can replace tools such as Salsa Labs and Convio.
This blogpost is the beginning of a series where we'll explain what we did and how Campaignion works. In this blogpost we'll focus on how we've created the "setting up online actions" experience, based on webforms.
Campaignion under the hood - webform based online actions.
One of the core features of Campaignion is setting up online actions. Those online actions always have forms. That's why we did a lot of work around Webform. It makes very fast handling of submissions possible and provides us with a way to create an arbitrary number of customizable forms.
With campaignion we've pushed it to its limits with several hundred thousands submissions and extended it a lot:
Webform confirm email
Webform confirm email: We use it to create forms with double-opt-in. While developing we've found several bugs and provided patches until at one point Matthias took over maintainership of the module. Since then we've made several rearrangements to make it more robust and extensible.
Webform custom buttons
We've built Webform custom buttons to have an easy way for our users to manipulate the submit button labels - right below the form_builder preview. It's not perfect yet. Currently it overrides everything that's configured in the page-break settings. We are working on that though.
For one of our clients we built personalized landing pages. That means each supporter (after filling out the form) gets a special link for sharing. Everyone following this link will be invited to take action too - by the person who shared his/her link. For that we've developed campaignion_webform_tokens (released as part of the campaignion module). It allows us to use values from a webform submission in other content. It's built as a text-filter that replaces values whenever special $_GET values are set.
Counters and progress bars - pgbar
Most of our online-actions come with some kind of animated counter or progress bar. These counters increase the conversion rate on forms. Those are provided by our module pgbar. It's main features include:
- It's configurable per node or entity using a custom field-type.
- It uses pluggable "counter sources" to get the current number. Most of the time we want to show either the number of webform submissions made ("3.151 people already signed the petition!") or the sum of all values stored in a webform component ("€ 41.151 have been donated.")
- All the bundled plugins have support for node-translations. So they don't only count the submissions for the current node but also for it's translations.
- It's fully themeable: We use progressbars and thermometers as well as number-only counters.
- It's animated: It uses jquery to animate the progress-bar as well as the number
By default webform stores the IP-address with the webform submission. For our campaigns it's crucial to know a bit more about our supporters then their IP-address (and thus their approximate location). Therefore we've developed Webform Tracking. It additionally stores things like the external-referer, internal-referer, the actual URL used to get the form, the country, and even customizeable parameters.
To make the stored data visible (and exportable), we've created a patch that allows us to extend the data displayed in webform results. Sadly this won't go into webform-7.x-3.x.
Webform paymethod select
For our donation pages we needed payment forms embedded into webforms. After closely examining webform payment that it didn't quite meet our requirements. This was the birth of webform paymethod select. Basically it's a (rather complex) webform component that shows a complete form allowing users to choose a payment method and then it shows the corresponding payment forms.
Especially donation pages tend to have more than one page. To show supporters that it's easy and just a few steps away we wanted something like a step bar above the webform. Therefore we've created Webform steps.
Wait - hasn't webform 4.0 a step bar built in? - Yes it has. We've started the development on webform steps more than a year before we even knew about the plans for webform 4. Actually webform steps has at least one feature that the step bar in webform 4 doesn't have at the moment: It's navigateable. So perhaps there is even going to be a webform 4 version of webform steps.
We came to love and hate Form builder at the same time. It's great: It provides a much simpler user interface for webform. On the other hand it provided us with hours and hours of debugging and trying to figure out what the hell is going with that API.
It seems that we've pushed form builder further than most:
- We've implemented some new webform components (webform paymethod select being only one of them).
- We've created pre-configured webform components tailored to collecting supporter data.
- We've made fields unique based on their form_keys …
This one is quite easy: Webform blocks that's CCK-blocks for webforms. It allows us to freely position the webform of the currently viewed node in any region. No - that didn't exist before. We had to develop that ourselves.
Currently we still use webform-7.x-3.x because most of the modules we use are not yet ported to webform-7.x-4.x.
With Drupal and it's contrib modules we had a head start in terms of features. A lot of the functionality that we wanted was already there. On the other hand building campaignion wasn't as easy as putting a bunch of modules together. At times it was a pretty bumpy ride.
We created very detailed interface designs and a lot of work went into extending existing modules. On top of that we've developed a whole set of modules around every component to really meet the requirements (in terms of scalability as well as feature completeness). We hope you like it and you'll definitly see more work around webform from our side.