Building a (Long) Petition with Civicrm

outline

We're going to use Drupal 7, CiviCRM, and two drupal modules: webform and webform_civicrm.

Civi recommends surveys for a small number of questions, and petitions for longer questionairres. Each submission becomes a "Petition Signature", and is captured as an activity of type "Petition Signature".

Petition Setup

Normally, a petition consists of two profiles (a CiviCRM "profile" is a set of fields). There's a contact field to gather information about the signer, and an activity profile to hold petition-specific fields. With webform_civicrm, it seems as though we can skep the Activity Profile.

The built-in "Name and Address" profile seems suitable for contact information.

Custom Fieldset

All of our questions will reside in a custom fieldset. There will be one field for each question, and the fields will hold form submission data.

It's helpful to code field names: use the first few letters to indicate what section of the form the field corresponds to, followed by a short phrase describing the question itself. The person filling out the form won't see these coded labels; we'll use webform to relabel the fields.

Here's a screen capture of a custom fieldset.

Webform

Webform_civicrm allows you to use Drupal's webform module as the front-end for CiviCRM activities (e.g., the intake petition). Within webform setup we'll

• Enable CiviCRM processing
• Choose contact fields to associate with the form
• Switch to the the Activities tab, choose "Petition Signature" as the activity type, add all fields from our custom fieldset
• Name the webform

From there, we lay out the form fields

Media:Civicrm-webform-setup.png

As you can see, I've changed the field name, to look more like "real" questions.

Several form elements are "page breaks". This allows one to break a long petition into a series of pages.

Some pages begin with a "Markup" field (e.g., "instructions", above). This is useful for adding instructions at the top of the page.

You can spend a lot of time tweaking form layout. For example

• Deciding whether labels appear above or to the left of input elements
• Adding symbols before or after fields. For example "%", to indicate that the a percentage value is expected.
• Providing field validation where appropriate. For example, if a field is supposed to have a value from 1--100, you can add a validation check to enforce this.

Webform has other feature that are useful for long forms:

• Adding a progress bar
• Enabling "Save Draft", so a person can start the form in one sitting, and finish in another.
• Automatically saving drafts between pages. This is a good way to ensure that work doesn't get lost.