Updating existing signup pages

May 11, 2015: Signup pages created before this date need to be updated to take advantage of new functionality. A person signing up can now add multiple tags to her profile. 

Previously, a person could tag themselves on a signup page using a drop-down menu on the website. The signup selected one option from the menu and a corresponding tag was appended to her profile. Now you can now allow signups to select one or multiple tags from a list using either radio buttons or checkboxes.


Updating your signup page if you have a public theme

No change is needed if you have a signup page with one of our public themes. Your template will be updated automatically to the new format. Any tags you may have added to the “Ask signups to tag themselves with one of these” text box will be moved to the “Current radio button options” section under Signup settings > Radio buttons.

Any tags from Signup settings > Basics:

Signup old ask tags

Will be moved to Signup settings > Radio buttons: 

Signup current radio button options

Note that if you currently have a drop-down menu on your signup page, it will change to radio buttons. If you would like to have your supporters select multiple tags you can change the tag list to checkboxes at Signup settings > Basics.

Allow signups to tag themselves with

Consider editing your tag options from the drop-down menu since it might take up substantial space on your updated signup page. Please refer to our signup page HOWTO to learn how to adjust current tag options.


Updating your signup page if you have a custom theme

If you have a custom theme for your signup page, one change will automatically occur when the page is updated. Any tags added to the “Ask signups to tag themselves with one of these” text box will be moved to the “Current radio button options” section under Signup settings > Radio buttons. 

On the signup page your users will still see the tags in a drop-down menu format.

Signup drop down

If you want to display your tags using radio buttons or checkboxes you must update the code manually in the page template.


Transitioning your custom signup page

First, go to [Website] > Theme > Current custom theme > Files. 

Custom theme uploads

Click Upload files. Select the “_labeled_tags.html” file available in the Signup Tag Upgrade Kit.

If your custom theme is cloned from a public NationBuilder V2 theme (Publish, Verve, Presence, etc...) use the html file from the “NationBuilder V2 Themes” folder. Alternatively, refer to our Bootstrap instructions if you use a Bootstrap framework. 

Once the file is successfully uploaded, go to signup page you want to update and go to the “Template” tab.

Template signup page

Find this snippet of code:

{% if page.signup.has_optional_tags? %}

<div class="row-fluid">

<div class="span12"><label for="signup_optional_tag">Choose one</label>{% collection_select "optional_tag", page.signup.optional_tags, class:"select" %}</div>

</div>

{% endif %}

old liquid for signups

Replace that code with:

{% if page.signup.has_labeled_tags? %}

{% include "labeled_tags" %}

{% endif %}

It should look like this:

new liquid for signups

Click Save and publish to save your changes and have them go live. The drop down menu will disappear and all tag options will display with radio buttons or checkboxes.

new signup checkboxes

Although you do not have to update your signup page, it is highly recommended in order to get the most out of the update which allows users to select multiple tags on your front-facing site.


Bootstrap framework

If you’re using the Bootstrap framework, upload the "_labeled_tags.html" file from the "Bootstrap framework" folder in the Signup Tag Upgrade Kit. You will upload this file at [Website] > Theme > Current custom theme > Files. After the file is uploaded, go to the Template tab of your signup page to replace the following snippet of code.

Your class names will look a little different, but you will still want to find the code that starts and ends with: 

{%if page.signup.has_optional_tags?%}
[...]
{%endif%}

Replace that code with: 

{% if page.signup.has_labeled_tags? %}
{% include "labeled_tags" %}
{% endif %}


How to create a signup page

How to use tags to organize people

Why create a tag library

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.