How to turn your donation page into a staged donation page

Staged donations split up the standard donation form into multiple steps. They are built into all public themes except the Aware theme. This how to provides information on adding staged donations to the Aware theme and the retired public themes. 

A widely-purported benefit of a staged form over a standard form is that it's less overwhelming than viewing a long form all at once. Indeed, real-world benefits have been demonstrated in usability tests, including those done by one of the pioneers of this type of form, the Obama campaign.

Standard Donation
Standard donation page
Staged Donation
Staged donation page

NationBuilder's implementation of staged donations split up the standard donation template into three steps:

  1. Donation amount selection and entry
  2. User information input
  3. Payment information input
Standard Donation

Please make sure to download the Aware staged donation conversion kit if you're using the Aware theme. Otherwise, you should download a v1 conversion kit. If you're using a custom donation page template, this will overwrite your current donation page

Download the Aware Staged Donation Conversion Kit

or download the kit for NationBuilder version 1 themes,
Victory themeCivitas themeBusyBiz theme, or IndiePro theme.


Installation Steps

1. Download the conversion kit via the link above, and unzip the archive.

2. In control panel go to "Website" and select the site you wish to modify. 

3. Click on "Theme."

4. If you already have a custom theme, select "Current custom theme". Otherwise, select "New custom theme" and create a clone of the Aware theme.

Currentecustom theme

5. Select "Files" and upload the stylesheet, template, and scripts included in the unzipped directory created in step 1 (_staged-donations.scss, jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, pages_show_donation_wide.html, staged-donations.js).

Upload files

6. Select the "Templates" and open layout.html.

layout

Add the following before the </head> tag on line 35, and save and publish:

<script type="text/javascript" src="jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="jquery.ui.effect-slide.min.js"></script>
<script type="text/javascript" src="staged-donations.js"></script>

It should look like this when you are done: 

Layout template

7. Click "Save and publish." Return to "Templates," and open theme.scss. Add the following below the final SASS partial import on line 72, and save and publish:

@import "staged-donations";

8. Staged donations should now be enabled on your donation pages.

Do you like this page?

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.