All Collections
Website
Theming
Template updates
Turn your donation page into a staged donation page
Turn your donation page into a staged donation page

This HOWTO provides information on adding staged donations to the Aware theme and the retired public themes - ⚠️ pre 2018 pages only.

Updated over a week ago

📌 Note: This HOWTO is for a pre 2018 version of NationBuilder donation pages. If you are using NationBuilder Payments this HOWTO will not work.

Staged donations

The 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.

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

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. 

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. Click on Theme.

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

4. 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).

5. Select the Templates and open layout.html.

Add the following before the </head> tag on line 30, 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: 

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

@import "staged-donations";

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

Did this answer your question?