Калькулятор стоимости в Tilda
готовый код.

<div class="tselno-calc" data-tilda-calculator>
  <div class="tselno-calc__head">
    <span>Предварительный расчёт</span>
    <strong data-calc-result>75 000 ₽</strong>
  </div>

  <label class="tselno-calc__field">
    <span>Тип проекта</span>
    <select data-calc-service>
      <option value="50000">Лендинг — от 50 000 ₽</option>
      <option value="90000">Многостраничный сайт — от 90 000 ₽</option>
      <option value="150000">Интернет-магазин — от 150 000 ₽</option>
    </select>
  </label>

  <label class="tselno-calc__field">
    <span>Количество страниц: <b data-calc-pages-output>6</b></span>
    <input data-calc-pages type="range" min="1" max="20" value="6">
  </label>

  <div class="tselno-calc__options">
    <label><input data-calc-option type="checkbox" value="50000" data-label="SEO на первый месяц"> SEO на первый месяц +50 000 ₽</label>
    <label><input data-calc-option type="checkbox" value="30000" data-label="Айдентика"> Айдентика +30 000 ₽</label>
  </div>
  <p>Точная смета — после короткого брифа.</p>
</div>

<style>
.tselno-calc {
  --calc-bg: #f2f0e9;
  --calc-text: #10110f;
  --calc-accent: #d9ff43;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid var(--calc-text);
  background: var(--calc-bg);
  color: var(--calc-text);
  font-family: Arial, sans-serif;
}
.tselno-calc__head {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--calc-text);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.tselno-calc__head span { font-size: 13px; text-transform: uppercase; }
.tselno-calc__head strong { font-size: clamp(34px, 7vw, 78px); line-height: 1; }
.tselno-calc__field { margin-top: 32px; display: grid; gap: 14px; }
.tselno-calc__field > span { font-size: 14px; }
.tselno-calc select {
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid var(--calc-text);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
}
.tselno-calc input[type="range"] { width: 100%; accent-color: var(--calc-text); }
.tselno-calc__options { margin-top: 28px; display: grid; gap: 14px; }
.tselno-calc__options label { font-size: 15px; line-height: 1.4; }
.tselno-calc__options input { margin-right: 8px; accent-color: var(--calc-text); }
.tselno-calc > p { margin: 32px 0 0; padding: 12px 14px; background: var(--calc-accent); font-size: 13px; }
@media (max-width: 640px) {
  .tselno-calc__head { align-items: flex-start; flex-direction: column; }
}
</style>

<script>
(function () {
  var FORM_SELECTOR = 'form';
  var root = document.querySelector('[data-tilda-calculator]');
  if (!root) return;

  var service = root.querySelector('[data-calc-service]');
  var pages = root.querySelector('[data-calc-pages]');
  var pageOutput = root.querySelector('[data-calc-pages-output]');
  var result = root.querySelector('[data-calc-result]');
  var options = root.querySelectorAll('[data-calc-option]');
  var total = 0;
  var details = '';

  function formatPrice(value) {
    return new Intl.NumberFormat('ru-RU').format(value) + ' ₽';
  }

  function setHiddenField(form, name, value) {
    var field = form.querySelector('input[name="' + name + '"]');
    if (!field) {
      field = document.createElement('input');
      field.type = 'hidden';
      field.name = name;
      form.appendChild(field);
    }
    field.value = value;
  }

  function syncForms() {
    document.querySelectorAll(FORM_SELECTOR).forEach(function (form) {
      setHiddenField(form, 'calculated_price', formatPrice(total));
      setHiddenField(form, 'calculation_details', details);
    });
  }

  function calculate() {
    var pageCount = Number(pages.value);
    total = Number(service.value) + Math.max(0, pageCount - 1) * 5000;
    var selected = [service.options[service.selectedIndex].text, pageCount + ' стр.'];

    options.forEach(function (option) {
      if (!option.checked) return;
      total += Number(option.value);
      selected.push(option.dataset.label);
    });

    result.textContent = formatPrice(total);
    pageOutput.textContent = pageCount;
    details = selected.join(' · ');
    syncForms();
  }

  root.addEventListener('input', calculate);
  root.addEventListener('change', calculate);
  new MutationObserver(syncForms).observe(document.body, { childList: true, subtree: true });
  calculate();
})();
</script>