Add a progress bar to your campaign form | CampaignNow Support Center

Add a progress bar to your actions when using CampaignNow to power supporter submissions on your NationBuilder website. You can see an example progress bar on this action page: https://www.createrangerparks.org.au/take_action.

NOTE: This progress bar is currently configured to work with themes built using the Bootstrap template. You will need to amend the HTML slightly for use with older themes based on "Aware" or other earlier NationBuilder template options.

STEP 1:
Ensure you are using a custom theme for your NationBuilder website. If not, you can see instructions on creating a custom theme here: https://nationbuilder.com/theme_documentation#create_a_new_theme

STEP 2:
Next, create a new file in your custom theme called "_campaign_progress_bar.html" paste the following code into the new file and click the "save and publish" button:

{% assign submissions_count = 0 %}
{% assign directory_slug = "" %}
{% for child in page.children %}
  {% if child.type_slug == "directory" %}
    {% assign submissions_count = child.directory.listings_count %}
    {% assign directory_slug = child.slug %}
  {% endif %}
{% endfor %}
{% unless directory_slug == "" %}
<div class="clearfix padtop padbottommore">
  <div class="progress" style="width: 100%;">
    <div class="bar progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="min-width:2em; width: {{ submissions_count | times:100 | divided_by:submissions_goal }}%;">
      <div class="bar-text count">{{ submissions_count | number_with_commas }} supporters</div>
    </div>
    <div class="bar-text goal">{{ submissions_goal | number_with_commas }}</div>
  </div>
</div>
{% endunless %}

STEP 3:
In the NationBuilder backend navigate to the page where you have included your CampaignNow form. Click the "subpages" tab and create a new Directory subpage with an appropriate name and slug. Ensure this page is published and, under "Directory settings", configure it to show all people with the specific tag used for your campaign.

STEP 4:
Finally, navigate to the template of the page where you have added your CampaignNow action. Paste the following code in that template where you would like the progress bar to appear (change the XXXXX to whatever number you wish to set as your progress goal):

{% assign submissions_goal = XXXXX %}
{% include "campaign_progress_bar" %}