Bootstrap Staged Donation v2 Pages for NationBuilder

NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

Get the code

Introduction

When asking people to donate to your cause, you want that process to be as straightforward and transparent as possible. Sometimes having all of the various donation information and steps on the one page - including choices about donation amounts, terms and conditions, payment details etc - can be overwhelming. One way to avoid this and help get people on board is to use a staged donation approach. This breaks the various steps and important information into digestible chunks that the donor can move through one at a time. We often create staged donation forms for our clients, such as this one.

We have previously written about the process for creating a staged donation process using the NationBuilder donation page v1 with the Bootstrap template. The NationBuilder team has also provided instructions for this process and noted the benefits of a staged donation approach here.

In this tutorial we are going to show you how to create a staged dontation process for v2 of the NationBuilder donation page (currently available to users in the US and Canada).

Relevant Files

1. _styles_theme.scss
2. _styles_tablet_and_desktop.scss
3. _styles_staged_donations.scss
4. jquery.ui.effect-slide.min.js
5. jquery.ui.effect.min.js
6. staged-donations.js
7. pages_show_donation_v2_wide.html
8. pages_show_donation_wide.html (optional)

Step 1

Download all the respective files within Github here. Including them properly should replace the actual Donation page with our version. You can always edit the three “.scss” files and even combine them in one or add the styles into your own stylesheet files. For now these three files will bring a base design with some example colours, as well as many useful styles and classes.

The third is stylesheet file more specific to donation forms, while the first two bring some general structure to the page and useful mixins, classes, and styles both for tablet-and-desktop and a mobile-first approach.

Step 2

The “theme.scss” file includes the three “.scss” files at the bottom as follows:

@import "styles_theme;"
@import "styles_tablet_and_desktop;"
@import "styles_staged_donations;"

Step 3

In the “layout.html” file there are three javascript files just before the closing “</head>” tag similar to the example below:

<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

Replace the actual “pages_show_donation_v2_wide.html” file with our modified version. (Optionally replace the normal “pages_show_donation_wide.html” file too and both pages will take some of the same styles and similar structure, or follow our previous tutorial).

Feel free to edit any style, colour or remove anything. You can use the Bootstrap grid system (“row”, “col-md-6”) instead of the provided “panel-half-for-relative” classes if you wish.

This will also look better on a page with a background image.

Enjoy!

Get the code