Bootstrap staged donation pages on NationBuilder websites

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

Bootstrap staged donation pages on NationBuilder websites
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.
Get the code View the demo

Relevant Files

  1. pages_show_donation_wide.html
  2. _staged-donations.scss
  3. jquery.ui.effect-slide.min.js
  4. jquery.ui.effect.min.js
  5. staged-donations.js

The problem

The standard bootstrap donation page does not currently include a staged donation form:

The standard NationBuilder donation page using the Bootstrap template

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.

Get the code View the demo

Have any questions? We're always happy to help
Get in touch on email: info@codenation.com