Dynamic destinations for NationBuilder Signup Pages

NationBuilder’s features out of the box are pretty versatile, but when I built the take action section of Climate for Change’s website, I wanted some more flexibility on the way Signup pages worked.

Why would you want a dynamic destination for your signup page?

In our case, there were two reasons – first, we wanted to guide our supporters through several activities they could do, and we wanted to know both when they started and when they finished.

To do that, our index page had to itself be a signup page which would tag people when they clicked through to the actual signup page. (See also my post on dynamic tagging as to how we gave different tags depending on which action they chose.

Secondly, we wanted to know if a user found a particular action too hard and gave up – so on the actual signup pages, we gave them two buttons, one for success, and one for “I couldn’t finish”, and we wanted the failure button to take them to a sorry page. Each button was wrapped in a separate Liquid form_for, and then we used the technique below to change the destination for each button.

NationBuilder creates a hidden element with the destination

Have a look at the source for a signup page, and where you use Liquid’s {% form_for signup %}, you’ll see something like this:

Nation Builder inserts a hidden input named page_id that holds the id of the page to land on.

We can create some Javascript to update this hidden element. In our case, I wrote an Angular directive.

Note: This code will only work with jQuery, not with angular’s built in subset of jQuery, because the built in find from angular won’t accept the jQuery selector to find the hidden form input.

So make sure you include a jQuery script tag before your Angular include if you’re going to use this code. (in most NationBuilder themes, you’ll find this is already the case)

The crux of this is this line of code:

$element.find("input[name='page_id']").attr('value', page_id);

Which uses jQuery to find the page_id input, and change it’s value.

How do you get the page id?

In our application, I built a map from page slugs to page id’s of the children of the current page.

Then, if you wanted to send them to the page with, say, the slug well_done. You can get it’s id by:

 

Do note: page.children only lists published pages. Unlisted, and hidden pages will not be included.

For pages that are siblings or not related to the current page, I haven’t yet found a way to programatically get their id from NationBuilder based on slug. In those cases in our application I put them into a spreadsheet that our angular app loads.