Gather your slugs! Direct to different URLs using NationBuilder signup tags

Automatically tag and route a person to a new url using a signup page with radio buttons. Demo.

This article describes a possible solution to a question posted on the NationBuilder Facebook Group, asking if there was a way for a user to be automatically directed to a specific page after choosing a tag on a signup page. There is, and it can be done by a beginner with just a couple lines of code. 

Begin by setting up two pages:

  1. A signup page with tag settings set to one tag (radio buttons) 
  2. A basic page. It will appear for a few seconds, so give it a name like "Thank You"

NationBuilder already allows you to designate a landing page where a user will automatically be directed to after taking an action, and allow a user to tag themselves from a checkbox or radio list of options, but at the time of this writing, the two functions are not linked. Luckily, with a little HTML and Liquid, we can connect them, and the result is a logical transition controlled by the user. 

Page 1: Signup

Set to auto-direct to basic page

Starting with your signup page, go to Signup settings and put the slug of the basic page you created in the field labeled "After signing up, what page should they land on next?" After a person uses this signup page, they should be automatically directed to your Thank You page.

Gather your slugs

Next, make a list of the urls and slugs you want to offer as options/destinations. Here's an example using my website's sitemap:

URL Slug
https://www.chrisarobinson.com/services services
https://www.chrisarobinson.com/projects projects
https://www.chrisarobinson.com/notes notes
https://www.chrisarobinson.com/contact_me contact_me

 

Use slugs as tags

Last, pull up your signup page and adjust your tag settings. Go to Signup settings > Radio buttons/Checkboxes, add each slug as a radio button option tag, and include a short description. The description is the label that the user will see. Ensure that each tag exactly matches the slug, otherwise it will generate a bad link. Here's how it should look:

NationBuilder tag radio button example redirect

Note: If you're using a signup page published before 2016, you will need to follow these directions to update the page, or else this won't work. 

That's all for the signup form. Be sure to inform the user that they will be redirected to a new page depending on the option they select. Most people like to know what's coming when they submit information. Double check that your "Thank You" page is set as the page they should land on next.

Page 2: Thank You

Paste code in page-level template

Now pull up your basic "Thank You" page and post the code below anywhere in the page Template:

<meta http-equiv="refresh" content="3;url=/{% for tag in request.current_signup.tags %}{% if forloop.last %}{{ tag }}{% endif %}{% endfor %}" />

That's it! Give it a test run, or check out my working version below:

Signup Page Demo

The HTML above will refresh the page after 3 seconds. You can change that number to increase or decrease the wait time. The Liquid Logic Tag {% for %} requests to see if the user viewing the page has logged in. Since the user had to pass through a signup form to get here, the answer is yes (or sorta) and the system now classifies them as a signup (with an account in NationBuilder). Next, it checks their tags and isolates the last one applied, which should be whatever they selected in the signup form. The tag/slug is output and plunked into a newly-minted URL, which loads and directs the signup to a page thats address ends with whatever text you used to create the tag. 

Please let me know if you have suggestions for improvement, or if anything written here goes out of date. 

- Chris