#42 - Use checkbox to create a pricing calculator

In Webflow Hack #42, we learn how to create a pricing calculator with checkboxes. We'll be putting checkboxes in our form, we'll assign values to the checkboxes; and when somebody checks or unchecks the checkbox, we will show the total value, and then submit that total value with the form.
TIMESTAMPS:
00:08 - Intro
00:29 - Live Example
01:09 - Structure
05:17 - Code Breakdown
12:15 - Thank You
F'IN SWEET WEBFLOW HACKS: A custom-code focused video-tutorial series for Webflow websites. Learn how to use jQuery and javascript to extend the functionality of your Webflow project. Built by ‪@Finsweet‬ for the ‪@Webflow‬ Community.
See all videos from the playlist: • F'in sweet Webflow Hacks
Check out all videos from the Pricing Calculator series: • Pricing Calculator ser...
-----------------------------------------------
// RESOURCES FROM THE VIDEO
F'in sweet Webflow Hacks: hacks.finsweet...
Webflow cloneable: finsweet.com/h...
Request a new hack: finsweet.com/h...
Stay updated with new hack releases: hacks.finsweet...
Get FREE help with implementation: sweetjs.finswe...
Subscribe to Finsweet: www.youtube.co...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/f...
🛍 Shop our merch store - finsweet.com/m...
💪 Superpowers for your Webflow website - finsweet.com/a...
🧰 Your toolkit for Webflow - finsweet.com/e...
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/t...
Behance: www.behance.ne...
Webflow: webflow.com/te...
-----------------------------------------------
// TAGS
#webflow #jquery #hack42
-----------------------------------------------
Thanks for your support! 🤟

[@pierre-jeanduval4580]

You're a legend ! We just had a client asking for such features a few days ago. Big F*in thanks.

[@Finsweet]

Thank you for the kind words!!!!

[@shaneveldhuizen2094]

I've been trying to do this for a while so I'm super thankful you made this when you did!

[@Finsweet]

Thank you so much, Shane! Thrilled to know we could help you out!!!

[@shaneveldhuizen2094]

@@Finsweet I wonder if you might consider doing a version where you incorporate multiplication? For example if someone wanted to buy x-amount of a certain product.

[@Finsweet]

@@shaneveldhuizen2094 That's an awesome suggestion! We'll do this!

[@jeremycohen8730]

Awesome, exactly what I needed 👍🏼

[@Finsweet]

You're welcome!!!

[@nikitamanchenko7507]

Why maximal sum is 1500? How I can increase them?

[@medicenjuande]

Thanks for this video!

[@jeansvanjeansington1794]

Doesn't work :( I did everything according to the video, but everytime I check the checkbox, the calculation is totally off and males no sense, total non-sens calculations with random numbers. Any idea?!

[@belchev2007]

that's great, now will just wait once it will be available in CMS collection :)

[@Finsweet]

Great idea!

[@rosannemac]

hey! just wondering if this still works today (?) I've checked out the cloned project and the calculator isn't working there for me.

[@juliennekita7128]

Neither for me. It's very frustrated...

[@YuLi-gx2ep]

Thank you! your videos are super-helpful and really easy to follow! Can you make a video on how to make a price calculator where user can input numbers, please? For example width + height etc? It would be amazing and probably useful to many people!

[@Finsweet]

You're welcome!!! Yes, we're going to do a pricing calculator series!

[@juliennekita7128]

Thank you for this wonderful video but it's not working for me 😭...

[@andrelima7425]

Works like a charm! Is there a way to add a progress bar to this?

[@jasinAmsterdam1976]

Does anyone know why we can't set the "native" checkbox value in webflow??

[@RenatoEsquarcit]

Very nice! Can I ask why jquery is used? I've heard that is losing ground and less and less being used for projects. Can be done the same using vanilla javascript in Webflow? Thank you guys

[@jasinAmsterdam1976]

How do I multiply the result? Say the selection as an hour rate and I want to multiply it by 8 for working day?

[@ZakkeryBock]

Hey Joe, I have a question. How do I make it so you can only select one of the check boxes? BTW great video, I literally was looking around to making a page like this and your video popped up. Perfect Timing lol. Thanks

[@Finsweet]

Hey! You would use radios, check this walkthrough - kzbin.info/www/bejne/inqUXoujecZ2ras

[@benjamingrey4064]

Amazing video. I have a question. I'm creating a website for a nutritionist and we want to display recipes and meal plans. Each recipe will have set macros such as Carbs, Fats, Protein etc. The meal plan CMS will be made using references to the recipes CMS. On the meal plan page, I want there to be a calculation at the bottom of the plan stating the total macros of the plan, so breakfast + lunch + dinner = x. Any idea how to achieve this?

[@Finsweet]

Hey, Benjamin! Could you send us a message on www.sweetjs.io/? One of our devs will try to help you out!

[@dtmccarson]

I just had a client ask me for something like this yesterday.

[@Finsweet]

We hope this hack helped you out!