New distro for eCampaigning, fundraising and digital marketing

Roman Zimmermann's picture
Roman Zimmermann

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.

Webform tokens

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.

Webform widgets

Often our clients want to embed their action forms on other websites. Webform widget (released as part of the Campaignion module) will take care of that. It provides a small JavaScript and an HTML snippet. To control what is displayed inside the widget you can simply use a special context.

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

Webform tracking

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.

Webform steps

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.

Form builder

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 …

All in all we've had some WTFs (mostly concerning the API) but also fixed and reported few bugs and generally contributed to the issue queue. (Those are only some of the issues we were active in.)

Webform blocks

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.

Webform template

Webform template provides the ability to copy webform components and settings from one node to another. We've extended it to also support Webform Validation and Webform confirm email.

Other modules

Last but not least we also use Webform AJAX (and discovered a security issue that was finally fixed in Drupal 7.26) and Webform validation.

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.

Conclusion

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.

Comments

Impressive work, congratulations on that! I was having my fair share of pulling my hair with inadequacies and bugs around much of the webform modules myself, and not being a developer, I'm delighted to see that there is huge progress being made.

Looking forward to exploring campaignion for my future work.

I wanted to look at webform_widget, but the link doesn't work :-(

Roman Zimmermann's picture

Hi rainer,

thanks for your compliments. I've just checked and we didn't (not yet) make webform_widget an independent module - currently it's bundled as a sub-module of the campaignion module. I've fixed that in the blogpost above too. It's likely that we make it independent module at one point.

Pages

Add new comment