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

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

Источник: https://vibeceh.ru/cases/kalkulyator-stoimosti-remonta-na-sayte
Автор: Сергей Мазур · опубликовано 2026-08-19

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

![Кот сравнивает готовый сервис и свою страницу с отдельными строками расчёта.](https://s3.regru.cloud/crossmark/statejnik/images/guides/kalkulyator-stoimosti-remonta-na-sayte/kadr-1.webp)

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

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

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

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

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

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

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

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

Я собираю минимальную схему из HTML-страницы, JavaScript, Apps Script, Google Таблицы и размещения. На странице ставлю поля услуги, объёма и материала. JavaScript считает итог, Apps Script повторно проверяет данные и записывает заявку, Таблица хранит цены и обращения, а размещение открывает страницу клиенту.

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

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

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

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

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

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

**Проверка.** Браузер не должен принимать пустой материал, нулевой объём или отрицательное значение. Но клиентская проверка не заменяет серверную. Значения можно отправить вручную, минуя интерфейс, поэтому 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. Я скачиваю инструменты, запускаю установщики и вхожу в аккаунт. Перед сборкой проверь, входит ли Claude Code в выбранный план Anthropic и какие условия действуют для твоего аккаунта ([тарифы Claude](https://claude.com/pricing?m=1), [Claude Code в Pro](https://support.claude.com/en/articles/11145838-use-claude-code-with-your-pro-or-max-plan)).

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

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

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

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

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

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

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

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

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

![Мужчина раскладывает на столе три первых шага сборки калькулятора.](https://s3.regru.cloud/crossmark/statejnik/images/guides/kalkulyator-stoimosti-remonta-na-sayte/kadr-2.webp)

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

В простом варианте в папке может лежать один файл `index.html`, внутри которого находятся HTML, CSS и JavaScript. Его можно открыть в браузере или встроить в HTML-блок сайта. Если подключены Apps Script и Google Таблицы, появятся серверная часть, таблица цен и журнал заявок. В код без необходимости лезть не надо.

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

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

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

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

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

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

Сначала зафиксируй симптом, затем попроси помощника проверить журнал, входные данные и последний изменённый файл. Возможные причины: повторный submit, параллельные запуски, истёкший токен, лимит API, часовой пояс и CORS. Если сервер принял данные, а браузер показывает ошибку, не нажимай кнопку повторно: сначала проверь `request_id`.

![Собака реагирует на схему защиты от дублей заявок с request_id и LockService.](https://s3.regru.cloud/crossmark/statejnik/images/guides/kalkulyator-stoimosti-remonta-na-sayte/kadr-3.webp)

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

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

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

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

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

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

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

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

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

Самостоятельная сборка требует времени и подписки помощника. Claude Pro официально стоит $20 в месяц. Для готового сервиса и заказной разработки цену нужно сверять по актуальному предложению: сравнение зависит от сложности логики, интеграций и дальнейшего сопровождения.

| Вариант | Цена | Ограничение |
|---|---:|---|
| Свой простой HTML-калькулятор | отдельная плата за расчёт не указана | цены и заявки надо настраивать самому |
| Claude Pro | $20 в месяц | лимиты общие для Claude и Claude Code |
| Claude Pro через посредника | по условиям посредника | цена зависит от посредника и способа оплаты, проверь её перед публикацией |
| StepForm | по тарифам на дату проверки | лимиты форм, ответов и элементов |
| QuizGo | по тарифам на дату проверки | условия зависят от числа калькуляторов и функций |
| Заказная сборка | цену нужно запросить по составу работ | интеграции и сопровождение нужно уточнять |

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

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

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

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

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

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

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

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

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

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

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

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

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

Если начать с одного HTML-файла, отдельной платы за расчёт нет. Платными могут быть помощник, размещение и сервисы для заявок. Если нужен план Pro, его цена указана на официальной странице тарифов Anthropic: $20 в месяц ([тарифы Claude](https://claude.com/pricing?m=1)).

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

Да, простой вариант работает в одном HTML-файле. JavaScript получает значения формы, применяет формулу и выводит итог в браузере. Серверная часть нужна для хранения заявок, доступа к актуальному прайсу, генерации документов и сложных интеграций.

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

Бесплатный расчет стоимости ремонта можно начать с локального HTML-варианта без платы за сам расчёт. У готовых сервисов встречаются бесплатные тарифы, но у них есть ограничения по формам, ответам, просмотрам и элементам. Помощник Claude Code связан с платной подпиской Claude Pro, если нужен рабочий доступ к нему.

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

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

- [Using HTML form validation and the Constraint Validation API - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)
- [Web Apps - Google Apps Script](https://developers.google.com/apps-script/guides/web?hl=en)
- [HTML Service: Communicate with Server Functions - Google for Developers](https://developers.google.com/apps-script/guides/html/communication)
- [Quotas for Google Services - Google for Developers](https://developers.google.com/apps-script/guides/services/quotas?authuser=01&hl=en)
- [Калькулятор для сайта нейросетью в 2026](https://blog.fillikam.com/guides/kalkulyator-dlya-sayta-neyrosetyu/)
- [Конструктор калькуляторов - StepForm](https://stepform.io/ru/calculator)
- [Онлайн конструктор калькуляторов для сайтов - QuizGo](https://quizgo.ru/calc/)
- [Plans & Pricing - Claude](https://claude.com/pricing?m=1)
- [Use Claude Code with your Pro or Max plan](https://support.claude.com/en/articles/11145838-use-claude-code-with-your-pro-or-max-plan)
- [Как оплатить Claude из России](https://companies.rbc.ru/amp/news/cbc6c3e1-2b3f-4330-98be-a03ad28f7883/)
- [Почему дублируются заявки с сайта?](https://qna.habr.com/q/513943)
- [Usage limits - Google Sheets API](https://developers.google.com/workspace/sheets/api/limits)
- [Калькулятор стоимости ремонта квартир, офисов и домов](https://www.eremont.ru/remont/calc/)
- [Статья 9. Согласие субъекта персональных данных](https://www.consultant.ru/document/cons_doc_LAW_61801/6c94959bc017ac80140621762d2ac59f6006b08c/)
- [Статья 18. Реклама, распространяемая по сетям электросвязи](https://www.consultant.ru/document/cons_doc_LAW_58968/f892dec1383709792452f18d36e7043306e2be0a/)

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