Creating an interactive pricing calculator | Webflow Logic + JS + Airtable

Hey friends! Here's a little tutorial on how I made this interactive calculator with Webflow Logic, some Javascript, and Airtable automations.
Links
Live Site: logic-sample-product-photo.we...
Clone Here: webflow.com/made-in-webflow/w...
My Website: www.kckat.com/
* A note: I cannot find where I found that codepen increment counter code but if anybody knows where it came from hmu and I'll link it.
0:00 Overview
2:12 Webflow designer setup
5:56 Javascript time
12:36 Webflow Logic
19:55 Airtable automations
21:30 finished product!

[@mirkamwt]

Thank you for an amazing tutorial KC! Few times I experienced some issues honestly, but that was only my fault tbh 😂 for anyone wondering, these were the issues that I experienced: 1. keep.track.of.your.changes.in.naming.stuff - I was changing the script ids and then adjusted ids of my elements (instead of products I needed pages etc.) and FORGOT that when I change the Name of the element it immediately changes the id name. So make sure you name everything correctly, I didn't and it took me half an hour to realise that hahah 2. Airtable works wonders, but, I also didn't listen very much to the crucial part (again, my fault) - using the "Bearer". I too have like zero experience with APIs, therefore I didn't really know that the word bearer needs to be in there as well. So like, bearer + space + api key. Had to create 3 credentials just to test it hahaha. 3. I thankfully had Success Message immediately in Webflow Logic, but when I tried to test live form, I received error message. I didn't realise I am using recaptcha on my website and that was the reason - so make sure you have recaptcha inserted in this form (which I quite struggled with because well... where to put it so I don't mess up the amazing layout you created?). After these three were solved, the calculator now works magic. I also had to use rounding in total amount, so if anyone is working with prices like $199 you should also incorporate this in your script. :) So yeah, it works perfectly, thank you very much for this amazing tutorial, subscribe button hit! 🫶

[@emilylonetto3482]

KC! This is awesome! Thank you so much for putting this together 🎉

[@connorfinlayson]

Awesome KC! Love to see it.

[@KeeganLeary]

Nice work - looks really slick.

[@brudsonmedia]

This is one of the coolest things I've seen! Thanks for sharing :)

[@benjaminaguilera8097]

KC you're goated. Thanks so much, this helped me A LOT with my client!

[@fictionplus]

I love this! Gonna watch this x10 times and try it myself later :D ty

[@emikohigman]

this was very helpful thanks for sharing KC!

[@pablogday]

Love this!! 🚀

[@kevynlevine]

Incredible thank you for sharing hoping to recreate this!

[@jelenajovanovic1472]

The only tutorial that works to me! Tnx! 🤗

[@uialexk]

Great tutorial

[@design.mindfulness]

Amazing work, I am inspired

[@therasounds4448]

Thank you so much for sharing this just what I needed!

[@RominMirmotahari]

This is so helpful, thank you!

[@roysaucedo]

SOOOOO COOOOOOOOL!!!

[@fictionplus]

Welcome back lol

[@primaljayanfernando]

So cute...thanks

[@chakradharisaurabh]

Hey, Thank you for the tutorial, It's really helpful, just wanted to know if we have a Radio button instead of Checkbox how can we make it work?

[@isabeledwards]

Thank you for this tutorial KC! Has anyone done this with a styled email template using SendGrid, Mailchimp etc?

[@ZianiLounes]

Hey KC Katalbas, great tutorial! Would you know how to connect the final calculated price to a checkout page in the context of an e-commerce site? Thanks 😊

[@leonardlucas6158]

That's so cool, thank you for this tutorial, one question remain, how can we embed a payment link in the email at the end of the processus ? I thought to use stripe and zapier so before sending mail we can automate product creation and then attach to the mail. Let me know what do you think about this solution ! Thanks again that's super useful.

[@studiokom5035]

Hey @Kc Katalbas! What a great Video. I did everything the exact same way and even in Webflow Logic get the Status Successful Message. But in the JSON Code under the success message, it says: { "error": { "type": "INVALID_REQUEST_BODY", "message": "Could not parse request body" } } And nothing gets posted into the Airtable Base.... Anyone has any idea how to fix this?? Would be highly appreciated

[@luissamouco2518]

What a great video! What is the difference between using webflow logic and wized? Have you got any ideias on that? I am trying to learn webflow and I am trying to learn how to use logic! Great channel! 1+ Subscriber!

[@jeansvanjeansington1794]

Somehow.. nothing works for me :'D The totalCost do not show up, no matter what I do. Got all the IDs right und copy-pasted the custom code into webflow. Doesn't work. Any ideas?

[@josecortes3030]

same here, did you manage to solve this?

[@krishcshah]

No cats in the intro? 💔