📌 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 split up the standard donation form into multiple steps. They are built into all public themes except the Aware and Bootstrap themes. This HOWTO provides information on adding staged donations to the Bootstrap base theme. If you are currently using Aware, you can still add staged donations to the Aware theme.

The first step to implementing a Bootstrap staged donation page is to download the special Bootstrap staged donation kit. The kit is made specifically for the Bootstrap theme. The Aware and Bootstrap kits are not compatible.   

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

2. In the control panel go to Website > [Select site you wish to modify] > Theme.

3. If you already have a custom bootstrap theme, select Current custom theme. Otherwise, select New custom theme and choose Start with Bootstrap framework.

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 Templates and open layout.html.

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

It should look like this when you are done: 

6. Click Save and publish changes. Return to Templates and open theme.scss. Add the following below the final SASS partial import on line 3, and click Save and publish changes.

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