Webflow

Custom fundraising or progress thermometer

How to create a custom fundraising thermometer that's connected to a CMS Collection

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: