#45 - Use checkbox, radio and select to create a pricing calculator

In Webflow Hack #45, we learn how to create a pricing calculator with checkboxes, radios, and selects fields. We are combining hack #42, #43, and #44 to create this all-in-one pricing calculator hack #45. We'll be applying values to every single form element, and when the user selects those values in the form, we will add up the total cost of whatever they are selecting. We'll also send that value through with the form submission.
TIMESTAMPS:
00:08 - Intro
00:41 - Live Example
01:35 - Structure
07:36 - Code Breakdown
17:41 - 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.com/45
Webflow cloneable: finsweet.com/hacks-clonable-t...
Request a new hack: finsweet.com/hacks-request
Stay updated with new hack releases: hacks.finsweet.com/#cta-block
Get FREE help with implementation: sweetjs.finsweet.com/
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// 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/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#webflow #jquery #hack45
-----------------------------------------------
Thanks for your support! 🤟

[@eliasnabi]

Thank you so much for all the helpful tips and hacks! You have a great channel and I subscribed!!! Much Luv! ❤️🇨🇦

[@Finsweet]

You're welcome!!! Thanks so much for your support!!!

[@Sergy_Kondrashin]

Thank you very much! Your work is amazing!

[@Finsweet]

You're welcome!!!

[@felixwagnerfromamaaze]

when you just highlight the text of a form field it also gets recognized. that way you can add up the same service infinite times, also subtract it

[@Finsweet]

Check out - hacks.finsweet.com/48

[@felixwagnerfromamaaze]

@@Finsweet thank you :)

[@hanneswendel1877]

Hey, thanks for the nice video. In Hack #50 you have build a slider for total projects count. Can this slider be integrated in this framework with radios and selects? If it can, is there a ressource i need to be looking at or have you done that before? Thanks in advance..

[@chaddavis9039]

Such a great video, thank you! How do you recommend the final sum be passed over to Stripe for payment after the form is submitted?

[@Finsweet]

Head over to sweetjs.io for hands on technical support.

[@essanmedia]

Thank you for this tutorial. I was able to make it work but I can't figure out how to send the total to another form. Would you help me with that? thanks

[@scottworley4869]

is there a way to create dependent costs? Like a pull down menu for small med large, and the rest of the check boxes and radios add price according to the first pull down?

[@BlackXice175]

Thank you for this tutorial, but I'm facing an issue right now. Seems like it doesn't add any value when I click on the checkboxs. I may have found the problem, which is the "" in the code. I don't know which body to give this classe. Would it possible for me to send you my page to see what's wrong with it?

[@specki9850]

There is a mistake in the code i guess. If i select everything except the strategy Service and after selecting everything else and go back to strategy Service and I add a strategy Service, we go super high in numbers and the calculation doesnt make any sense anymore.

[@mujtabanadeem7116]

What if I want to multiply values? For example: Service one is $100 / hour and I want to ask the user how many hours they want this service. Then multiply the number of hour typed by user with the hourly rate of service.

[@fannm4515]

Hi, I love your videos, I have a question, I have created a small grid with 4 checkboxes that I have used to tell the user how they want to contact me (call, text message, email or whatsapp). But, how can I get the user to fill in only one mandatory, I have done it, but one by one, but I need that only 1 is mandatory to know what they chose, could you help me with that? thanks.

[@user-oh3fh6ps2t]

Hi, How can this link to checkout payment?

[@ninamartinez8726]

Is this possible with Add to Cart in Webflow Ecommerce?

[@Finsweet]

Hey, Nina! Can you please describe the usecase?

[@charles6685]

Hi there, I have a couple of radio button groups that I have added the "add-value" and I have also changed of the code to fit my class, but the number shown is "NaN". It won't show the sum numbers Do I have to use "else if" on the radio button code or what should I do in order to make it run properly? I know I'm so close, but I just can't wrap my head around it. Thanks for the tutorial tho! Subbed!

[@charles6685]

I got the radio button figured out, thanks for that. But now, comes the second problem, the checkbox button shows minus number when I *deselect* it. How is that possible? And the check box doesn't even want to add to each other, and other radio buttons.

[@Finsweet]

Please submit this request over at Sweetjs.io and someone from the technical team will reach out to help. We do not offer this level of support on KZbin.

[@charles6685]

@@Finsweet I have figured it out myself, thanks

[@loulou81400]

+Finsweet Hello, is it possible to integrate this calculator in a webflow ecommerce?I work for a customer who runs a fast food store, and he would like his customers to be able to choose between several types of sandwiches, (burgers, wrap, tacos), then they could customize it by choosing different side dishes, (sauces, vegetables, drinks...). Once the choice is made it should be possible to add it to the cart, with the order summary, and place the order. As in your example, you should be able to send the total and the different choices. Hello from france !

[@Finsweet]

Hey! We haven't worked with Webflow eCommerce sites yet!

[@loulou81400]

@@Finsweet no problem, i will try i think the process will not be different !! Thank you for all your amazing tutorials !

[@3243625]

Thank you so much! It would be cool if it was also possible to enter values in the calculator using range. Like here, for example joxi.ru/82QqZ7PFw0g1M2 Is it possible to implement this in webflow?

[@Finsweet]

Hey! Yes, this is totally possible! We'll do a hack on this! In the meantime, send us a message over at www.sweetjs.io/ and one of our devs will help you sort this!