How to implement a staged donation form for the Bootstrap theme

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.   


Download the Bootstrap Staged Donation Conversion Kit


Installation Steps

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


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

Upload files


5. Select "Templates" and open layout.html.


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

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

@import "staged-donations";

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

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.