Bootstrap staged donation pages on NationBuilder websites
Update NationBuilder's staged donation pages for use with the Bootstrap template.

Relevant Files
- pages_show_donation_wide.html
- _staged-donations.scss
- jquery.ui.effect-slide.min.js
- jquery.ui.effect.min.js
- staged-donations.js
The problem
The standard bootstrap donation page does not currently include a staged donation form:
The solution
This is based on the original post by the NationBuilder team that explains how to add a staged process to a donation page on the Aware theme. Our code below includes a few general improvements as well as the necessary updates for use with the Bootstrap theme:
Step 1
Download all 5 files found at this link and upload them to your custom NationBuilder theme.
Step 2
Open the theme.scss
file of your custom theme and include the _staged-donations.scss
partial directly below the existing @import
statements, using the line below:
@import "staged-donations;"
Step 3
Open the layout.html
file of your custom theme and include the three JavaScript files by adding the following lines of code before the closing </head>
tag:
<script type="text/javascript" src="staged-donations.js"></script>
<script type="text/javascript" src="jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="jquery.ui.effect-slide.min.js"></script>
Step 4
And that’s it :) If you wish, you can change the colours and other styles for the staged donation page in the _staged-donations.scss
file.
Have any questions? We're always happy to help
Get in touch on email: info@codenation.com