How to Add a Fundraising Progress Bar With OptinMonster

Are you looking for an easy-yet-eye-catching way to show off your fundraising progress to current and potential donors? People just love seeing those fundraising thermometers and knowing that their donations are making a real impact.

In this post, we’re going to show you how to add a fundraising progress bar to OptinMonster using our floating bar template, Yes/No buttons, and a teensy bit of custom CSS.

And, even if you’re not a nonprofit with fundraising goals, you can still use this type of campaign for lead generation goals or campaigns:

Customer Satisfaction Score

You can use the skills from this tutorial to show off your commitment to customer satisfaction.

customer satisfaction score using buttons

Special Content

A progress bar can also be used to incentivize social media sharing or create buzz around a lead magnet.

social media incentive progress bar

With a little creativity, you can use progress bars to keep visitors engaged and informed in a fun, unique way.

Let’s get this party started!

Create a Campaign

Here’s the campaign we’re going to create:

fundraising progress bar example

To get started, you’ll need an OptinMonster account. Since we’re using the Canvas template, be sure to sign up for at least a Plus account. Signing up for OptinMonster is quick, easy, and worth it. Also, it only takes about 60 seconds.

Sign up for an OptinMonster Plus account now and come back to continue with the tutorial. We’ll wait. šŸ˜Ž

Once you’re signed up, log in to your OptinMonster account.

When you first log in you’ll see your dashboard. If you’re brand new to us, it’ll be empty. If you’ve been around, you’ll see the campaigns you’ve already created.

Click theĀ Create Campaign button to create a new campaign.

create_campaign

Select yourĀ Campaign Type. We’re usingĀ Floating Bar for this campaign.

select the floating bar campaign type

Next, select theĀ CanvasĀ template.

select the canvas template

Now, name your campaign and clickĀ Start Building.

name your campaign and start building

The Campaign Builder

After you click theĀ Start Building button, you’ll be taken into the campaign builder. Here, you’ll see the default Canvas floating bar campaign.

Make note of the green button in the top right corner. That’s theĀ Save button. Use it often.

default canvas floating bar campaign

Here’s where the fun really begins and you get to start creating the campaign of your dreams! šŸ˜šŸ˜šŸ˜

First, let’s move the floating bar to the top so our fundraising progress meter shows up there. To do that, click onĀ Floating Settings then toggleĀ Load Floating Bar at Top of Page? to green.

load floating bar at the top of the page

Next, let’s remove the close button from the campaign. To do that, click directly on the close button in the live preview of the campaign on the right side of the campaign builder. This will bring up the editing tools for that element on the left side of the screen.

remove the close button from your campaign

If you have a Pro subscription, you can also remove the “Powered by OptinMonster” branding following this same process.

Adding Blocks to Your Campaign

ClickĀ Add Blocks, click the block you want and just drag and drop it onto the live preview of your campaign. We’re going to use the large, single rectangle.

add a block to your campaign

Next, add a text block to your campaign by dragging and dropping the text element right on top of the block you just added.

add a text element to your campaign

Editing Campaign Blocks

You can easily edit the blocks you add to your campaign by clicking directly on the block you want to edit in the live preview. This will bring up the editing tools on the left side of the screen.

optinmonster's campaign builder makes it super easy to edit your campaign

Design Your Campaign

Here’s what we added to ourĀ fundraising progress bar example for this tutorial:

  • 1 single rectangle block (you’ve already added this)
  • 2 text blocks (you’ve added 1 text block already)
  • 1 Yes/No block

Go ahead and add the remaining text block and Yes/No block. For reference, your campaign should look like this:

floating bar campaign with no customization

Now that we have the framework, it’s time to make it pretty. Below you’ll find detailed notes for each change we made to every section of the campaign to create the final version.

Text Box 1

edits to text box 1

We used text box 1 to create the headline of our campaign. We wanted our headline text to be larger and contrasting, but not to detract from the fundraising progress meter.

Here’s what we did:

  • Text: “We’re halfway to our goal!”
  • Font: Bree Serif
  • Size: 35
  • Alignment: Center
  • Color: hex code #DF6A0D

Everything else was left at its default value.

Text Box 2

edits to text box 2

We used this text box as an appeal. We kept the text smaller and added a call to action with instructions on how to donate.

Here what we did:

  • Text: “We need your help to make it all the way. Just click on the progress bar below to make a donation right now!”
  • Font: Arial (sans serif)
  • Size: 18
  • Alignment: Center

Everything else was left at its default value.

Yes/No Button Styling

This block is our amazing fundraising thermometer. We’re going to make some design changes to customize the look of our buttons and then finish them off with a little bit of custom CSS.

You have to edit each button individually, but it’s super easy to do. Simply bring up the editing tools for the buttons just like you would for another block, by clicking on the block in the live preview.

You’ll have the option to edit the regular and hover look of each button, as well as the button’s action.

how to edit campaign buttons

Let’s start by setting theĀ Display yes/no buttons inline? option to green.

set buttons to display inline

Here’s how we set up our Yes button:

  • Text: “$50,000 raised”
  • Background Color: hex code #0d82df
  • Font Family: Arial (sans serif)
  • Font Color: hex code #fff
  • Font Size: 43px
  • Font Weight: 600
  • Border Width: 0
  • Border Style: None
  • Border Radius: 10px
  • Padding: 25 20 25 20 px
  • Margin: 0 0 0 0 px

yes button formatting

We also need to set up theĀ Action for our button. The action is what happens when someone gives the button a click.

In our body text, we told visitors to click the fundraising progress bar to donate, so we’ll want to set up the button action to send visitors to a donation page.

To set up the button action, click into theĀ Action tab and set theĀ Button Click Action toĀ Redirect to a url and enter your donation page URL in theĀ Redirect URL field:

set button action

Now it’s time to set up ourĀ No button. Here’s what we did:

  • Text: “Goal: $100,000”
  • Background Color: transparent
  • Font Family: Arial (sans serif)
  • Font Color: hex code #b2b2b2
  • Font Size: 43px
  • Font Weight: 600
  • Line Height: .5
  • Border Width: 0
  • Border Style: None
  • Border Radius: 10px
  • Padding: 25 12 25 12 px
  • Margin: 0 0 0 0 px

We’re going to customize theĀ hover styling for the no button, so click into the hover section and toggleĀ Customize Button hover styling? to green. From there, simply click onĀ Copy Regular Styles.

edit hover styling for no button

Set the No button action to redirect to the same URL as the Yes button. This way, no matter where on the fundraising progress bar your visitor clicks they’ll be taken to the donation site.

Format the Yes/No Block

There’s one last thing we need to do before we add our custom CSS and that’s to edit the entire block around our buttons.

Right now, the buttons are just sort of floating without borders or anything containing them, but we’re going to fix it right now. To do that, click onĀ Block to go into the block editing tools.

edit the yes/no block

We want to make the buttons look like a single fundraising progress bar that goes from left to right without interruption. Here’s how we did it:

  • Box Shadow: hex code #888888
  • Spread: 10
  • Border Radius: 10px
  • Padding: 0 10 0 0 px
  • Margin: 5px

It will look a little weird right now:

block styling without css

Don’t worry; we still need to add our custom CSS to finish this off. Let’s do that now.

Save your campaign (why not, right?) and click on theĀ DesignĀ tab or theĀ Home button in the campaign builder to get back to the main menu.

get to main menu

From the main menu, click onĀ Display Settings then scroll down to the CSS section:

custom css field

Here’s the code that we used:

html div#om-{{id}} .{{ns}} .{{ns}}-YesNoElement--wrapper {
box-shadow: inset rgb(136, 136, 136) 0px 0px 10px !important;
}
html div#om-{{id}} .{{ns}} .{{ns}}-YesNoElement--content button.{{ns}}-YesNo--Yes {
width: 50% !important;
}
html div#om-{{id}} .{{ns}} .{{ns}}-YesNoElement--content button.{{ns}}-YesNo--No {
width: 50% !important;
}

Design-wise, our fundraising progress meter is done! Our next step is to decide when we want the campaign to display.

Set Display Rules

To get to the display rules, just click on theĀ Display Rules tab. You’ll see that the default rules are set to show your campaign on any page after a visitor has been on your site for at least 5 seconds.

For this campaign, we’re going to leave the rule to show the campaign on every page so it shows up throughout our site. However, it’s really easy to show it only on specific pages by changing theĀ Current url path condition:

display rules can help you target your campaign based on specific urls being viewed

To remove a condition from your display rules, simply click theĀ minusĀ button next to the condition you want to remove:

remove condition from display rule

If you want to show a separate campaign to desktop viewers and mobile viewers, you can do that with display rules too! Just set a condition to show your optin based on your visitor’s device:
target devices to show campaigns only to desktop or mobile users

Publish Your Campaign

Now you’re ready to publish your campaign! To do that, click on theĀ Publish tab and change theĀ Status toĀ Live:

publish your fundraising thermometer campaign

OptinMonster campaigns can easily be published anywhere:

select publishing platform

Updating Your Fundraising Progress Bar

You can follow the steps above to edit your fundraising progress bar at any time, making it incredibly easy to target your campaign throughout your fundraising efforts!

Whenever you want to update your fundraising numbers, you can do so by simply changing the text on yourĀ YesĀ button, and changing the percentages in the custom CSS.

Depending on how much of your text you change, the entire process takes around 20 seconds:

updating your fundraising progress meter campaign

There you have it, folks. A fully customizable fundraising progress bar for your website, powered by OptinMonster. Pretty cool, right? šŸ¤©šŸ™Œ

If you’re interested in more cool stuff, you should definitely add Google Analytics to track your campaign’s performance. Or, see how a different design might impact visitor response to your campaign with A/B testing (don’t forget that you’ll have to update numbers and text in 2 places if you try this).

Are you looking for more actionable tutorials like this? Check out OptinMonster University!

Jacinda Santora
Jacinda Santora is a writer specializing in ecommerce and growth marketing. She prides herself on her ability to make complicated things easier. When she isn't writing you can find her daydreaming about campervans, drinking coffee, and listening to podcasts.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.