Fundraising Thermometers can be a great way to show off your progress, gamify your fundraising and motivate people. The problem is that most thermometers out there aren't on brand or visually appealing. Additionally, if you do created a branded thermometer, they are usually static images you need to upload every time you've advanced closer to your goal.
This tutorial shows how to build a custom fundraising thermometer directly in Webflow. We'll also show how to hook it up to CMS collection so you don't need to keep uploading images over and over again.
Think beyond fundraising
Progress Thermometers can be a great way to display a wide variety of situations — so think beyond fundraising. You could should school enrollment (as shown in the video), ticket sales, group weight loss, savings goals— really anything with a defined goal and tracked progress. With the approach in this tutorial, you can create a branded, custom thermometer to track progress for nearly anything!
Embed Code
Copy the code below to create a custom fundraising thermometer in your Webflow project.
A few important items:
- Give your embed element an ID of "thermometer". You can name it something else, but will need to update the "getElementbyID" code to match your new ID name exactly
- To ensure the image always looks correct on the screen, give your "thermometer" embed container class a fixed height and width equal to the size of your background thermometer image
Horizontal Display
If you want the thermometer to grow horizontally, you would use javascript to alter the "meter-level" width, instead of the height. Additionally, if you want the thermometer to grow from left to right, you will need to add an additional property to make the inner div float right. So your new code would look something like this:
