Калькулятор расчета стоимости ремонта на сайте в 2026 году: пошаговая сборка

Ниже пошаговая инструкция: восемь шагов и готовые промпты к каждому. Подставь свои услуги, цены и ограничения, а затем проверь страницу на примерах.

! Схема калькулятора: услуга, объём, материал и предварительный итог Если хочешь собрать такой инструмент на своей задаче, посмотри инструкцию по вайб-кодингу с нуля. Схема подходит для ремонта, мебели на заказ, автосервиса, клиники или студии.

Обычно всё начинается с вопроса клиента: сколько примерно будет стоить кухня или шкаф?

Я принимаю заказы сам. Клиент присылает размеры и пожелания, а мне приходится проверять, хватает ли данных для расчёта. Потом я уточняю материал, фурнитуру, обработку кромок, доставку и собираю предварительную сумму вручную.

С кухней или шкафом особенно легко застрять. Вроде бы похожие изделия, но у каждого свой размер, материал, раскрой, кромка и фурнитура. Одно сообщение превращается в несколько частей, которые приходится держать перед глазами и не перепутать.

В соседних сферах происходит то же самое. Владелец автосервиса собирает цену из работ и запчастей. Салон считает услугу, объём и дополнительные процедуры. Клиника уточняет вид приёма и набор услуг. Пока эти параметры не собраны в одном месте, клиент ждёт ответа, а владелец снова открывает таблицу.

Готовый калькулятор не должен обещать невозможное. Сложный заказ всё равно проверяется вручную. Но простые заявки можно собрать на одной странице и сразу показать человеку ориентир.

Что изменилось, когда цена стала считаться на странице?

Раньше клиент пишет размеры кухни или шкафа, потом я задаю встречные вопросы. Для расчёта мне обычно нужно уточнить материал, фурнитуру, обработку кромок и доставку. Именно эти параметры стоит собрать в одной форме. Пока не хватает хотя бы одного параметра, точную сумму называть нельзя.

Теперь простая заявка начинается иначе. Человек выбирает тип изделия, вводит размеры или объём, отмечает материал и дополнительные работы. Страница показывает предварительную стоимость. Контакт остаётся вместе с параметрами расчёта.

Для бизнеса сохраняется ручной расчёт. Меняется место, где начинается разговор. Вместо серии уточняющих вопросов клиент видит состав цены и понимает, из чего сложился ориентир.

Важна именно формулировка «предварительная стоимость». Если в расчёте нет состояния объекта, точных замеров, особенностей монтажа или нестандартных работ, итог нельзя выдавать за окончательную смету.

У меня время ручного расчёта зависит от числа параметров и от того, прислал ли клиент всё с первого раза. Когда клиент присылает размеры и пожелания отдельными сообщениями, специалисту приходится сверять их с прайсом и уточнять пропуски, пока параллельно идут звонки, производство и доставка.

На странице я оставляю пометку: сложные и нестандартные заказы проверяются отдельно. Так калькулятор не притворяется менеджером, который знает всё заранее.

Почему своя страница удобнее готового калькулятора?

В мебели цена редко состоит из одного произведения. Можно считать площадь фасадов, длину кромки, количество секций, стоимость фурнитуры и доставку. Если всё спрятать в один коэффициент, через месяц станет непонятно, почему итог изменился.

В своей странице я задаю отдельные строки:

• материал;
• раскрой;
• кромка;
• фурнитура;
• доставка;
• дополнительные работы.

Так проще проверить расчёт и объяснить его клиенту. Если меняется цена материала, не приходится пересобирать всю страницу. Если появилась новая услуга, её можно добавить в таблицу или в правила расчёта.

Готовый сервис может не учитывать специфическую логику бизнеса, поэтому перед выбором проверь, поддерживает ли он нужные поля, формулы и отдельные строки расчёта. Если посетителю непонятно, из чего складывается итог, он всё равно может позвонить менеджеру, поэтому состав расчёта лучше показывать отдельными строками.

У готового калькулятора есть сильная сторона. Не надо самому собирать интерфейс, подключать формы и думать о размещении. Если логика простая и менять её почти не придётся, сервис может оказаться рациональнее.

Моя задача другая. Мне нужен один экран, который считает цену по заданным правилам и не притворяется точным там, где надо проверить заказ. Если хочешь собрать такой инструмент на своей задаче, посмотри инструкцию по вайб-кодингу с нуля.

Что должно быть внутри калькулятора стоимости ремонта?

Я делю калькулятор на шесть частей.

Поля. Для услуги и материала подходят выпадающие списки. Для объёма нужен числовой ввод. Я отмечаю обязательные поля через required, а допустимый диапазон задаю с помощью min, max и step.

Правила цены. В простом случае площадь умножается на цену. Для мебели формула может выглядеть так:

стоимость = материал + раскрой + кромка + фурнитура + доставка

Если отдельная работа считается по площади, она добавляется как отдельная строка:

стоимость работы = площадь × цена работы за единицу

Проверка. Браузер не должен принимать пустой материал, нулевой объём или отрицательное значение. Но клиентская проверка не заменяет серверную. Значения можно отправить вручную, минуя интерфейс, поэтому Apps Script проверяет их повторно.

Итог. Показывай не только общую сумму, но и состав расчёта. Клиенту легче понять цену, если отдельно видны материал, работа, доставка и дополнительные услуги.

Запись заявки. В Google Таблице можно сделать отдельные листы для услуг и цен, материалов и заявок. В заявке сохраняются выбранные параметры, итог, дата и контакт, если клиент его оставил.

Уведомление. Apps Script может передать заявку в Telegram через Bot API. Для метода sendMessage нужны chat_id и text; ограничения метода и длину сообщения проверь в актуальной официальной документации Telegram Bot API.

Прямо под итогом я бы написал: «Это предварительный расчёт. Финальная стоимость подтверждается после проверки размеров и состава работ».

MDN описывает встроенную проверку форм как механизм, который использует типы полей и Constraint Validation API ( Using HTML form validation and the Constraint Validation API).

Цены можно хранить в одном объекте JavaScript для простого варианта или вынести в Google Таблицу, если их часто меняешь. Сервер нужен для хранения заявок, документов и сложных интеграций. Само умножение площади на цену можно выполнять в браузере.

Что поставить перед сборкой и сколько это стоит?

Часть кода можно получить по текстовому описанию. Ты объясняешь задачу словами, как подрядчику, а помощник создаёт файлы и показывает результат, который нужно проверить и при необходимости исправить вручную.

Visual Studio Code ставится один раз. После установки я бы не тратил время на изучение редактора. Достаточно понимать, где находится папка проекта, какой файл отвечает за страницу и как открыть результат в браузере.

В материале о работе с Claude Code над проектом показано, как агент читает файлы из терминала, вносит изменения и запускает проверки ( журнал решений для проекта). Visual Studio Code можно использовать для просмотра файлов и результата. Это удобнее, чем каждый раз отправлять отдельный кусок кода в чат: помощник видит, что уже собрано.

Условия доступа к Claude Code зависят от выбранного плана и могут меняться. Перед сборкой проверь актуальные условия на официальной странице Anthropic. Если нужен план Pro, его цена указана на странице тарифов: $20 в месяц ( тарифы Claude).

Доступность Claude и способы оплаты зависят от региона и актуальных условий сервиса. Проверь их до начала сборки на официальных страницах Anthropic.

За сам HTML-расчёт я отдельно не плачу. Деньги могут понадобиться за подписку и сервисы, поэтому перед запуском я проверяю их условия. У Apps Script есть квоты, зависящие от типа аккаунта и сервиса. Перед публикацией проверь актуальную таблицу квот, особенно время выполнения и лимиты внешних запросов, а затем оцени их на ожидаемом числе заявок ( квоты Google Apps Script).

После установки не обязательно изучать все настройки. Важно видеть папку, запускать страницу и проверять расчёт глазами.

Как собрать расчёт стоимости ремонта по шагам?

1. Опиши задачу словами.

   Создай папку проекта calculator-remont, открой её в Visual Studio Code и попроси помощника сначала разобраться в процессе, а не писать программу.

   Разобрать задачу до начала сборкиСкопировать промпт

   У меня небольшое производство мебели на заказ. Клиент присылает размеры и пожелания, а я уточняю материал, раскрой, кромку, фурнитуру и доставку. Хочу страницу калькулятора для предварительного расчёта: клиент выбирает тип изделия, вводит размеры или объём, выбирает материал и дополнительные работы, получает ориентировочную стоимость и оставляет контакт. Сложные и нестандартные заказы должны помечаться для ручной проверки. Пока не пиши код. Разбери задачу, перечисли поля, правила цены, проверки и состав файлов. Задай вопросы, если данных не хватает. Отвечай простым языком.

   Помощник должен вернуть список полей и вопросов, а не готовую простыню кода. Если он сразу добавил регистрацию, личный кабинет и базу данных, останови его и верни к одной странице.

2. Опиши поля калькулятора.

   Сначала собери минимальный вариант. Для примера возьми тип изделия, материал, площадь, дополнительные работы и доставку.

   Создать структуру полейСкопировать промпт

   Создай простой калькулятор предварительной стоимости. Поля: тип изделия (кухня, шкаф, тумба), материал (ЛДСП, МДФ, массив), площадь в квадратных метрах, раскрой, обработка кромки, фурнитура, доставка и контакт клиента. Тип изделия и материал обязательны. Для площади используй числовое поле с min 0.1, max 100 и step 0.1. Дополнительные работы сделай отдельными переключателями. Не собирай паспортные данные и не делай регистрацию. Покажи понятные подписи на русском языке.

   Проверь, что помощник вернул форму с отдельными параметрами. Проверь, что площадь нельзя оставить пустой, а дополнительные работы не спрятаны внутри одной непонятной строки.

3. Задай правила цены.

   Не называй один итог без объяснения. Пусть каждая часть расчёта живёт отдельно.

   Задать правила расчётаСкопировать промпт

   Добавь в калькулятор такие демонстрационные правила: базовая цена зависит от материала, работа считается как площадь, умноженная на цену за квадратный метр, раскрой считается отдельной строкой, кромка считается отдельной строкой, фурнитура добавляется отдельной суммой, доставка добавляется отдельной суммой. Показывай пользователю состав расчёта и общий предварительный итог. Пометь демонстрационные цены как тестовые данные, чтобы я заменил их на свой прайс. Если выбран нестандартный размер или значение выходит за допустимый диапазон, покажи сообщение о ручной проверке и не выводи ложную точную цену.

   В простом примере базовая формула строится вокруг произведения количества на цену. Числовые поля используют min и step, а итог считается как количество, умноженное на цену. Ты описываешь задачу помощнику обычными словами, проверяешь его результат и просишь о следующих правках. Такой способ сборки называют вайб-кодингом.

4. Добавь проверку данных.

   Проверяй значения не только после нажатия кнопки, но и перед отправкой заявки.

   Добавить проверку формыСкопировать промпт

   Проверь калькулятор перед расчётом и перед отправкой заявки. Не принимай пустой тип изделия, пустой материал, площадь меньше 0.1, площадь больше 100, отрицательные значения и текст вместо числа. Проверь, что итог не является NaN или бесконечностью. Для каждого ошибочного поля покажи короткое сообщение рядом с полем. Повторно выполни те же проверки на серверной стороне Apps Script. Если заказ нестандартный, покажи сообщение «Нужна ручная проверка» вместо точной суммы.

   Клиентская проверка нужна для удобства, серверная для защиты расчёта и заявки. Проверь нулевое значение, дробное значение, максимум и слишком большое число.

5. Выведи итог на странице.

   Клиент должен увидеть результат без перезагрузки.

   Показать результат расчётаСкопировать промпт

   После нажатия кнопки «Рассчитать» покажи на странице отдельный блок результата. В нём выведи выбранное изделие, материал, площадь, стоимость работы, стоимость материала, раскрой, кромку, фурнитуру, доставку и общий предварительный итог. Если данных не хватает, останови расчёт и покажи ошибку возле нужного поля. Добавь текст «Предварительный расчёт. Финальная стоимость подтверждается после проверки размеров и состава работ». Не округляй промежуточные значения до вывода, а общий итог покажи в рублях с понятным разделителем тысяч.

   Проверь заранее посчитанные примеры вручную. Если сумма не совпадает, сначала попроси помощника показать все промежуточные строки, а не исправляй итог на глаз.

6. Подключи таблицу цен.

   Она нужна, если стоимость материалов и работ меняется чаще, чем сама страница.

   Подключить Google Таблицу с прайсомСкопировать промпт

   Подключи к калькулятору Google Таблицу с тремя листами: «Услуги», «Материалы» и «Заявки». На листе «Услуги» храни название работы и цену за единицу. На листе «Материалы» храни название материала и цену или коэффициент. На листе «Заявки» записывай дату, выбранное изделие, площадь, материал, состав расчёта, итог и контакт клиента. Apps Script должен повторно проверить значения, прочитать актуальные цены, посчитать итог и вернуть его на страницу. Не храни токен Telegram в HTML-коде.

   После ответа помощник должен объяснить, какие листы создал и какие столбцы использует. Не открывай доступ к таблице по публичной ссылке, если там будут контакты клиентов.

7. Записывай заявки и уведомляй.

   Сначала сохрани данные, потом отправь уведомление владельцу.

   Добавить запись заявки и уведомлениеСкопировать промпт

   После расчёта добавь отдельную кнопку «Оставить заявку». До отправки покажи клиенту состав данных, ссылку на опубликованную политику конфиденциальности и отдельное согласие на обработку для расчёта и обратной связи. Согласие на рекламные сообщения сделай отдельной необязательной галочкой. После отправки сначала запиши заявку в Google Таблицу, затем отправь владельцу уведомление в Telegram с услугой, объёмом, материалом, составом расчёта, итогом и request_id. Отключай кнопку после первого клика, возвращай понятный статус успеха или ошибки и не создавай дубль при повторной отправке с тем же request_id.

   В Telegram-сообщении не должно быть лишней рекламы. Бот не должен писать первым человеку, который не ожидал контакта. Для первичного хранения персональных данных граждан РФ отдельно проверь требования к месту записи, хранения и обработки с юристом.

8. Проверь мобильный экран.

   Часть посетителей может пользоваться телефоном, поэтому проверяй не только окно редактора.

   Проверить мобильную версиюСкопировать промпт

   Проверь калькулятор на узком экране. На телефоне расположи поля в одну колонку, сделай крупные подписи и кнопку, не допускай горизонтальной прокрутки. Проверь, что итог не уезжает за край экрана, кнопка остаётся над клавиатурой, а сообщение об ошибке видно рядом с нужным полем. Проверь страницу на ширине телефона и на широком экране. Не меняй формулу и правила цены без отдельного объяснения.

   На мобильном экране поля должны располагаться в одну колонку. Проверь калькулятор через мобильный интернет и повтори отправку с телефона.

Что появится в папке после сборки?

Открой index.html глазами. Проверь, что в index.html есть:

• поля формы;
• подписи;
• стили страницы;
• формула;
• вывод результата;
• обработка ошибок.

Простой вариант можно хранить в одной папке и открывать через index.html. Для самого расчёта сервер не нужен. Это хороший черновик: сначала проверяешь логику локально, потом добавляешь заявки и уведомления.

При подключении серверной части схема становится сложнее. HTML отвечает за экран, JavaScript передаёт значения, Apps Script принимает запрос и работает с Google Таблицей. Таблица хранит прайс и заявки, а базовые возможности Google Таблиц разобраны в отдельном материале ( Google Таблицы).

Тебе не надо понимать каждую функцию. Достаточно знать, какой файл отвечает за страницу, где меняются цены и куда записываются заявки. Если помощник меняет работающий файл, проси сначала перечислить изменения и показать предполагаемый diff, как описано в инструкции по проверке Claude Code ( code review до правки).

Что делать, если расчёт не отправляется или заявка дублируется?

Кнопка создаёт две заявки. Повторный клик или повторный запуск submit создаёт дубли. Нужны блокировка кнопки, уникальный request_id и проверка идентификатора на сервере.

После одного нажатия кнопки «Оставить заявку» в Google Таблице появляются две одинаковые записи. Проверь обработчик submit, повторные клики и параллельные запуски. Добавь блокировку кнопки до получения ответа, уникальный request_id для каждой попытки и защиту от повторной обработки одного request_id на сервере. Покажи, какие файлы меняешь, и не меняй формулу расчёта.

Один submit запускается несколько раз. В отдельных сценариях обработчик submit может запуститься повторно. Для критического участка нужна блокировка LockService, а заявку следует связывать с конкретным request_id.

Проверь журнал выполнений Apps Script. Один submit иногда запускает обработчик несколько раз. Найди участок, где заявка записывается или отправляется в Telegram, и защити его через LockService. Не бери «последнюю строку» таблицы для определения заявки, используй данные конкретного события или request_id. Объясни, как проверить исправление на повторной отправке.

Время заявки съезжает. Разные часовые пояса таблицы и Apps Script меняют время записи.

Время заявки в Google Таблице отличается от времени на телефоне. Проверь часовой пояс проекта Apps Script, таблицы и формат даты. Предложи безопасный вариант хранения времени и отдельно объясни, что именно будет показываться клиенту и владельцу. Не меняй дату старых заявок без моего подтверждения.

Токен перестал работать. Срок действия OAuth-токена Google зависит от режима приложения и настроек авторизации, поэтому проверь актуальные условия в консоли и документации Google.

Интеграция с Google Таблицей работала, а затем перестала принимать заявки. Проверь авторизацию, режим OAuth-приложения, срок действия refresh token и права доступа. Покажи, как повторить авторизацию и как добавить понятное уведомление владельцу при следующем истечении токена. Не выводи секреты в HTML и не записывай их в общий файл проекта.

Появился HTTP 429. При работе с Google Sheets API учитывай ограничения запросов: используй пакетные операции и exponential backoff, сверяясь с актуальной документацией по лимитам ( лимиты Google Sheets API).

Google Sheets API иногда возвращает HTTP 429. Проверь, сколько запросов выполняется на один расчёт и не читается ли каждая цена отдельным запросом. Объедини чтение и запись там, где это возможно, добавь exponential backoff для временных ошибок и покажи пользователю понятное сообщение, если лимит всё же превышен. Не создавай повторную заявку при повторе запроса.

Браузер показывает CORS-ошибку. Самая опасная ситуация: сервер мог принять данные, а клиент решил, что отправка не удалась.

Браузер показывает CORS-ошибку после отправки формы, но в Google Таблице заявка появляется. Проверь, как сервер возвращает ответ и как браузер обрабатывает ошибку. Не предлагай пользователю нажимать кнопку повторно. Используй request_id и сделай повторный запрос безопасным: если заявка уже сохранена, верни существующий результат вместо новой записи. Объясни, как проверить это в браузере и журнале Apps Script.

Итог выглядит слишком точным. Калькулятор показывает ориентир, а не окончательную цену: точность зависит от полноты введённых параметров и условий конкретного заказа.

Проверь текст и внешний вид результата. Сейчас калькулятор показывает одну точную сумму, хотя не учитывает все фактические условия заказа. Замени формулировку на «предварительный расчёт», перечисли параметры, которые влияют на финальную цену, и добавь сообщение о ручной проверке нестандартных размеров. Не меняй расчётную формулу без отдельного списка изменений.

Начинай поиск с журнала заявок. Если запись есть, но уведомления нет, не создавай новую заявку. Сначала проверь канал уведомления.

Сколько стоит своё решение против сервиса и подрядчика?

У StepForm есть тарифы с ограничениями по формам, ответам, просмотрам и элементам, но цены нужно сверять на дату публикации. У QuizGo встречаются разные тарифы и пакеты, поэтому перед сравнением проверь актуальную страницу сервиса ( StepForm, QuizGo).

Рекламная цена заказа сама по себе не показывает, входят ли в неё дизайн, размещение, интеграция с таблицей, уведомления и сопровождение. Перед сравнением запроси состав работ и условия дополнительных платежей.

Готовый сервис может потребовать меньше собственной разработки на старте, собственная страница гибче, а подрядчик подходит для сложной интеграции, если ты не хочешь заниматься сборкой; после передачи проекта изменения будут зависеть от исполнителя.

Домен, хостинг и размещение в эту таблицу не включаю. Единой цены для них здесь не указываю.

Что сделать сегодня, если ты не разбираешься в технологиях?

Сначала выпиши правила на обычном листе:

1. что продаётся;
2. какая единица измерения;
3. какая цена за единицу;
4. какие материалы меняют стоимость;
5. какие работы считаются отдельно;
6. когда нужен ручной расчёт.

Потом собери локальную страницу и проверь её на примерах. Для первого запуска можно пройти маршрут от пустой папки до рабочей страницы в отдельной инструкции ( первый сайт без строчки кода). Не добавляй сразу каталог, личный кабинет, оплату и CRM. Каждая лишняя часть увеличивает число мест, где что-то может сломаться.

Контакты подключай после проверки формулы. Согласие на расчёт и согласие на рекламу разделяй. В Telegram не отправляй первое сообщение человеку без ожидаемого контакта. Для хранения персональных данных и схемы с Google Таблицами проконсультируйся со специалистом по российским требованиям.

В инструкции по первому сайту без строчки кода такой маршрут проходит от описания задачи до проверки готовой страницы. Метод подходит для калькулятора и небольших инструментов, которые повторяют правила конкретного бизнеса. Перед подключением заявок сначала проверь расчёт локально.

Вопросы и ответы

Примеры в статье собраны из типовых задач участников практикума; это собирательный сценарий, а не описание одного подтверждённого кейса.