Как собрать калькулятор для сайта за вечер

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

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

Кому калькулятор нужен, а кому только мешает

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

Такие ниши видно сразу. Ремонт и отделка, окна и потолки, грузоперевозки и переезды, полиграфия, аренда спецтехники, клининг, металлоконструкции, страхование, наружная реклама. Общее у них одно: менеджер и так считает цену по формуле, просто делает это в блокноте после звонка. Калькулятор переносит ту же арифметику на сайт и снимает с менеджера десятки одинаковых разговоров в неделю.

А вот где он лишний:

• Прайс из трёх позиций. Проще показать таблицу с ценами, чем заставлять человека что-то выбирать ради известного результата.
• Уникальные проекты без типовых ставок. Архитектура, разработка, сложный консалтинг. Здесь любая цифра на экране будет враньём, и лучше честное «считаем под задачу».
• Крупные закупки через тендер. Решение принимает комитет по документам, а не человек на сайте с калькулятором.

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

Заказать разработку, взять готовый виджет или собрать самому

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

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

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

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

Дальше статья про третий путь. Оговорюсь сразу: stepFORM это наш продукт, поэтому в конце будет раздел про него. Но механика, формулы и ошибки ниже одинаковы для любого инструмента, включая написанный руками.

Из чего состоит калькулятор

Внутри любого расчёта четыре части, и путать их вредно.

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

Переменные и веса. Выбор «эконом, стандарт, премиум» сам по себе ничего не считает. За каждым вариантом стоит число: цена за метр, коэффициент, надбавка. Человек выбирает слово, формула получает цифру.

Формула. Арифметика, которая собирает из переменных сумму. Умножение, сложение, коэффициенты, скидки, округление.

Результат и следующий шаг. Экран с суммой и понятным действием: оставить телефон, вызвать замерщика, оплатить. Калькулятор без этого шага работает как справочник, посчитал и отпустил.

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

Какие поля спрашивать, чтобы формула сошлась

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

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

Данные бывают трёх сортов, и каждый попадает в формулу по-своему:

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

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

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

Как собрать формулу и не получить цену с потолка

Базовая конструкция одна и та же почти в любой нише: объём умножить на ставку, прибавить постоянные работы, применить коэффициенты. Дальше начинаются детали, из-за которых расчёты и расходятся с реальностью.

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

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

Округление. Сумма 207 483 рубля выглядит как ошибка машины. Округлите до тысяч, и цифра начнёт читаться как оценка, каковой она и была с самого начала.

Как это выглядит на живых нишах:

• Ремонт квартиры. Площадь × цена за метр по классу отделки + стоимость дизайн-проекта, всё умножить на коэффициент срочности.
• Пластиковые окна. (Ширина × высота × цена профиля + цена стеклопакета) × количество окон + монтаж + вывоз старой рамы.
• Грузоперевозки. Километры × тариф за километр + погрузка × число грузчиков + надбавка за подъём без лифта.
• Полиграфия. Тираж × цена за экземпляр с учётом порога скидки + приладка + постпечатная обработка.

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

Точная сумма или вилка «от и до»

Вопрос спорный, и ответ зависит от того, чем вы торгуете.

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

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

Что написать на экране результата

Экран с суммой разбирают реже всего, а именно он превращает расчёт в заявку. Цифра сама по себе ничего не продаёт: она отвечает на вопрос и отпускает человека.

Начните с того, что это за сумма. Не голое число, а «предварительный расчёт по вашим параметрам». Одно слово «предварительный» снимает половину будущих споров и никому не мешает.

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

Третье, что стоит написать: что входит в цену, что не входит, сколько займёт работа и когда сумма поменяется. Три строки текста экономят десять минут телефонного разговора.

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

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

Куда уходит расчёт после кнопки

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

Уведомление менеджеру приходит сразу: на почту, в SMS или в Telegram. Пока посетитель ещё на сайте, у вас есть повод позвонить и сказать по делу, а не «здравствуйте, вы оставляли заявку».

Заявка уходит в CRM со всеми вводными. Это и есть разница между калькулятором и обычной формой. В карточке лежит телефон, а рядом площадь, материал, срок и посчитанная сумма. Менеджер видит бюджет клиента до звонка и сразу понимает, целевой это заказ или нет.

Для товаров и услуг с фиксированной ценой цепочку можно замкнуть: поставить корзину с онлайн-оплатой прямо в калькулятор. Человек посчитал, увидел сумму, оплатил картой или по QR, не переходя никуда. Заявка превращается в заказ в том же окне, где начиналась.

Пять ошибок, из-за которых калькулятор не приносит заявок

Все пять встречаются регулярно, и все лечатся за вечер.

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

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

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

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

Калькулятор спрятан. Ссылка в подвале, на четвёртом уровне вложенности, под заголовком «Дополнительные сервисы». Расчёт ставят там, где человек задаёт вопрос о цене, а спрашивает он его на первом экране.

Куда поставить калькулятор на сайте

Мест обычно четыре, и они друг другу не мешают.

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

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

Четвёртый вариант самый недооценённый. Калькулятор живёт по своей ссылке, без всякого сайта: в рекламе, в мессенджере, в описании профиля, на QR-коде в зале ожидания. Небольшому бизнесу этого иногда хватает вместо сайта целиком.

По каким цифрам понять, что калькулятор работает

Четыре показателя, и все снимаются без отдельной аналитики.

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

Доля оставивших контакт. Из тех, кто дошёл до цифры. Проседает она обычно из-за экрана результата, а не из-за цены.

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

Что дошло до сделки. Метрика честная и очень неудобная. Бывает, калькулятор приносит вал заявок, а половина из них с бюджетом втрое ниже вашего минимального заказа. Менеджеры при этом ходят довольные, отдел продаж занят, а выручка не растёт. Лечится одним квалифицирующим полем, которое отводит такие запросы в сторону ещё до результата.

Как это сделано в stepFORM

Всё, что описано выше, собирается в конструкторе калькуляторов stepFORM без программирования. По шагам это выглядит так:

1. Соберите поля. Семнадцать типов на выбор: число, выбор одного или нескольких вариантов, выбор с картинками, текст, загрузка файла. Каждое поле на своём экране или несколько разом, как удобнее.
2. Задайте веса вариантам. За каждым вариантом выбора стоит своё число: цена, коэффициент, надбавка.
3. Напишите формулу. Поддерживаются почти любые математические функции и формулы любой сложности, так что условия, пороги скидок и минимальная сумма заказа собираются без разработчика.
4. Настройте логику переходов. Ответы ведут человека по разным веткам, лишние поля просто не показываются. Расчёт остаётся коротким даже в нише со сложным прайсом.
5. Опишите результат. Сумма или вилка, разбивка по статьям, текст под сегмент клиента и кнопка следующего шага.
6. Подключите, куда пойдут заявки. Почта, SMS, Telegram, webhook, передача в CRM с ответами клиента. При необходимости корзина с онлайн-оплатой.
7. Опубликуйте. Встроить на сайт, открыть по прямой ссылке или показать по QR-коду. Внешний вид подгоняется под ваш дизайн, на телефоне всё работает так же, как на компьютере.

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

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

Частые вопросы