Power-up NGP Contribution Forms with Custom Themes
Ankur Kumar runs Oakwoodology, a West Virginia based technology company built with passion for crafting great user experiences on the web. He used NGP VAN’s Digital tools to customize the donation page for the Smith for West Virginia campaign. Here’s how he built it:
Successful online contribution pages enable campaigns and progressive organizations to raise more money every day. We used NGP Custom Themes to super-charge ours.
NGP Themes provide control over the HTML/ CSS/ JS powering contribution pages. With this, contribution forms can be tailored to campaign branding and extended with cool custom features.
In this blog post, I’ll show you how we created four custom features:
- Custom Branding — Represent your brand accurately with elements like colors and logo. With full access to CSS, the design is a home-run.
- Thermometer & Ticker — The thermometer and donor counter are the most advanced pieces, but really easy once you get it!
- Youtube & Content — Adding formatted HTML content and embeds like YouTube are quick and easy since we have access to the code for our page.
- Donation Tool — By and far the easiest part of the theme (thanks NGP!).
This post will be a tutorial to give you a real example of how we used Themes. If you aren’t technically inclined or need more help, I’ve included my contact at the end of the post.
Basics
Where do we start? Log in to NGP. Under Digital Engagement click Online Actions. Then, in the top menu, click Themes. Pro-tip: if you’re logged in to NGP already, just click here to get to Themes Dashboard: https://actions.ngpvan.com/Dashboard/ThemeDashboard
From here, click on “Create New Theme” – and presto, we’re on the only page we’ll need to create our custom NGP Theme.
Just six inputs? Yep, in six inputs we’ll make a custom fundraising portal.
Let’s get started. Go ahead and set the Theme Name and Description to something you will recognize. That’s two inputs down. Only four to go!
Custom Theme Merge Fields
This input is easy. We’ll need a place to update our Donor Count for the counter and thermometer. Click Add a Custom Theme Merge Field, put “Donor Count” as the Short Name and set the Field Type to “Text”. Click Add. That’s all for now — we’ll use this later.
<body> Content
I like starting with HTML to build the skeleton of the page.
We’ll break this down piece by piece, just the skeleton – don’t worry about the styles for now. First, the header and logo:
Okay, that’s easy enough. Replace *** Embed File *** with a real logo. Click “Manage & Embed Files”, upload your logo, and insert the real URL there.
Great, now, let’s tackle the thermometer portion. Add this after </header> from the last step. Notice the comments in the code while you do this:
The thermometer is two images, the base image and the fill image. Embed your thermometer base image file here (like you did the logo). You can use our thermometer images for testing (only, please):
Thermometer base: https://mountain-mama.sfo2.digitaloceanspaces.com/campaign/bridge-empty.png
Thermometer fill: https://mountain-mama.sfo2.digitaloceanspaces.com/campaign/bridge.png
Awesome. Now, we need to create the content section with room for a video, the donation form, and some custom content. Add this after </div> from the last step. Again, see the comments in the code:
That wraps up the main content area. Now, we just need a place for the fine print. Add this after </div> from the last step.
That’s the skeleton of our donation page!
We’ve got one more thing to do inside the <body> Content section: javascript. We’ll use some simple javascript to power the thermometer and donor counter. Add this after </div> from the last step.
<body> CSS Classes
This one’s a freebie. Skip this section, only one to go!
<head> Content
Now that we’ve got our skeleton all good to go, we’ll need to apply some styles to make it really shine. But first, there’s some basic setup inside <head> to make the page function properly. Comments are in the code:
There are a few places to replace in the snippet above. Make sure to set your title, your favicon, or even pull in another font from Google Fonts.
Now, the styling. This goes directly after the last snippet (<link…):
https://gist.github.com/ankurkwv/d7469a52caf570d8e9a9f9cb7a78e9fc#file-head-htmlWoo! That’s a lot, and we’ve still got the white content area and footer to tackle, no worries! We got this, and we’re just ~100 lines of CSS away from finishing! Keep going. Continue directly from the last snippet:
With that, we’ve tackled creating a custom Theme on NGP. I hope it wasn’t too bad, and I’d really love to see what you come up with these. Once you save the Theme, it’s as simple as assigning it to a Contribution Form like so:
We can’t wait to see what you build! Please tweet your custom pages to @NGPVAN and email them to Ankur at me@ankurk.com.
This is a guest blog from Ankur Kumar. Ankur runs Oakwoodology, a West Virginia based technology company built with passion for crafting great user experiences on the web.
Have questions, want to learn more? Email Ankur (said: encore) at me@ankurk.com.
