Update existing signup pages

Previously, a person could tag themselves on a signup page using a dropdown menu. Now, you can allow signups to select tags from a list.

Updated over a week ago

Table of Contents

Updating your signup page if you have a stock theme

No change is needed if you have a signup page with one of our stock 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:

Will be moved to Signup settings > Radio buttons

Note that if you currently have a dropdown 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.

Consider editing your tag options from the dropdown 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 dropdown menu format.

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

Click Select files to upload. 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.

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 %}

Replace that code with:

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

Click Save and publish changes to save your changes and have them go live. The dropdown menu will disappear and all tag options will display with radio buttons or 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" %}

Related HOWTOs

Did this answer your question?