Progress bars are kinda like a coach, encouraging supporters to keep on adding their voices until the goal of a campaign is reached. New/Mode progress bars are dynamic - this means that the bar automatically updates as supporters complete an action using the New/Mode tool.
Use the following steps to add a progress bar to your New/Mode tool.
Step 1: Add a Markup component type from the Components screen under Advanced settings:
Step 2: Copy this progress bar code:
Progress Bar HTML Code
<div class="form-item webform-component webform-component-markup webform-component--goal-meter" style="margin-bottom: 10px;">
<div class="rtecenter" style="color:#ffffff ;"> </div>
<div class="rtecenter" style="color:#000;">[node:webform-submission-total] Signatures</div>
<div style="width:100%; background-color: #666;">
<p class="rteright"><em>Goal: # signatures</em></p>
Step 3: Paste this code into the Value field of your new progress bar component page (remember to do this under Source Code view!), and Save Component:
Step 4: If you want to reposition your new progress bar on the campaign tool form, return to the Components page under Advanced settings, and drag and drop to the position you want it on the page:
Step 5: Take a moment to admire your new progress bar in Preview:
- Set the total percent of signatures by changing the # (on line 7) to the actual number of signatures desired.
- Edit the progress bar goal by editing line 11 of the progress bar HTML code. Change # to actual number of signatures desired. (For example: Goal: 2000 signatures)
- Cheat code: You can use the [node:webform-submission-total-plus:INSERT_NUMBER_HERE] token to bump up progress bar results in emails.