Skip to main content

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.

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.

layout

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

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