Help with code for Cost Estimate Calculator

Design help Custom code
1

Hey,

Just trying to get this cost estimate calculator to work, I’ve been using Slater to help build this.

Unfortunately, just not able to currently get the cost to show:

Any help/tips would be great!

Thanks
Chris

2

Hi Chris,

While Webflow doesn’t have built-in cost calculator functionality, you can create one using custom code or by integrating third-party solutions. Here are some options:

You can build a calculator using JavaScript and custom code elements in Webflow. Alternatively, you can embed calculator tools from services like Calculoid, MathMax, or similar platforms that offer embeddable calculators for websites.

For more complex calculations, consider using Webflow’s CMS collections to store pricing data and combining this with custom code to create dynamic pricing calculations.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Here’s the custom code I’m using:

// Declare all variables and initialize budget
let type, size, finish, listed, conservation, sloping, maindrain, partywall, greenroof, kitchen,
featurejoinery;
let budget = 0;

function Calculation() {
budget = 0; // Reset budget each time Calculation is called

// Ensure numeric conversion (parseInt for select-like inputs)
const typeVal = parseInt(type);
const sizeVal = parseInt(size);
const finishVal = parseInt(finish);

// Base cost by type
if (typeVal === 1) budget = 1000;
else if (typeVal === 2) budget = 1250;
else if (typeVal === 3) budget = 1350;
else if (typeVal === 4) budget = 1450;
else if (typeVal === 5) budget = 1550;

// Subtract by size
if (sizeVal === 1) budget -= 1000;
else if (sizeVal === 2) budget -= 1250;

// Subtract by finish
if (finishVal === 1) budget -= 1000;
else if (finishVal === 2) budget -= 1250;
else if (finishVal === 3) budget -= 1350;
else if (finishVal === 4) budget -= 1450;
else if (finishVal === 5) budget -= 1550;

// Add costs for boolean options
if (listed) budget += 1000;
if (conservation) budget += 1000;
if (sloping) budget += 1000;
if (maindrain) budget += 1000;
if (partywall) budget += 1000;
if (greenroof) budget += 1000;
if (kitchen) budget += 1000;
if (featurejoinery) budget += 1000;

// Update the budget on the page
document.getElementById(‘budget’).textContent = “Total: £” + budget.toLocaleString();
}

// Initial text content
document.getElementById(‘budget’).textContent = “Total: £0”;

// Attach listeners to all inputs
document.querySelectorAll(‘input’).forEach(function (input) {
input.addEventListener(‘input’, function () {
let name = input.name;
let value = input.value;

if (input.type === 'checkbox') {
  window[name] = input.checked;
} else {
  window[name] = parseInt(value) || 0;
}

Calculation();

});
});

// Initial calculation
Calculation();

4

Hi, you could use convertcalculator for this. We are a 3rd party platform that specialize in cost calculators. People use it to turn a spreadsheet into an interactive calculator to embed in Webflow. They can also follow up with customers via email, sms or pdf proposals with Convert. Happy to walk you through a demo if you’d be interested in exploring a no-code solution as a last resort.