Как сделать калькулятор для сайта: 4 способа, их плюсы и минусы

Как сделать калькулятор для сайта, если вы продаёте окна, потолки, уборку или доставку и хотите, чтобы клиент сам видел примерную цену? Способов четыре: написать калькулятор самому на JavaScript, заказать программисту, собрать его встроенными средствами конструктора сайта или подключить готовый онлайн-сервис. Ниже разбираем каждый честно: что получите, сколько сил уйдёт и где подвох.

Если вы ещё сомневаетесь, нужен ли калькулятор вообще, начните со статьи о калькуляторе стоимости на сайте в нашем блоге.

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

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

1. Считает цену по параметрам клиента: размерам, материалу, количеству, допуслугам.
2. Собирает заявку: имя, телефон, иногда фото или план помещения.
3. Доставляет заявку туда, где вы её увидите: на почту, в Telegram, в CRM. И не теряет её, если почта или CRM не ответили.
4. Защищается от спама и от подделки суммы. Если цена считается только в браузере, хитрый посетитель может отправить заявку с любой суммой.

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

Способ 1. Написать калькулятор самому на JavaScript

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

Плюсы:

• бесплатно, если не считать своё время;
• полный контроль над формулой и внешним видом;
• никаких внешних сервисов и подписок.

Минусы:

• Расчёт в браузере это только половина дела. Чтобы получать заявки, нужен сервер, который их принимает, сохраняет и отправляет вам. Это уже backend, хостинг и поддержка.
• Защиту от спама придётся делать самому. Без неё форма быстро начнёт собирать мусор.
• Цена, посчитанная только в браузере, не защищена: в заявке может прийти любая сумма.
• Каждое изменение прайса означает правку кода.
• Если письмо не дошло, вы об этом не узнаете, пока клиент не позвонит сам.

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

Способ 2. Заказать программисту или фрилансеру

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

Плюсы:

• можно реализовать нестандартную логику расчёта, которой нет ни в одном конструкторе;
• дизайн один в один с сайтом;
• калькулятор принадлежит вам.

Минусы:

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

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

Способ 3. Встроенные средства конструктора сайта

Многие конструкторы и CMS умеют считать прямо в форме. Например, в формах Тильды есть поле «Калькулятор»: вы задаёте переменные полям и пишете формулу. По справке Тильды в формуле можно использовать только базовые операторы: сложение, вычитание, умножение, деление и скобки. Для WordPress есть плагины с полями-формулами.

Плюсы:

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

Минусы:

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

Подробно про оба варианта: калькулятор на Тильде и калькулятор для WordPress.

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

Способ 4. Онлайн-конструктор калькуляторов

Специальные сервисы дают редактор или готовые шаблоны, а вы вставляете калькулятор на сайт кодом. Так работают Qalca, uCalc, formdesigner, Marquiz, StepFORM. У каждого свой подход: одни дают собрать форму с нуля, другие делают упор на квизы, третьи на готовые решения под нишу. Сравнение сервисов с ценами в статье лучшие конструкторы калькуляторов.

Плюсы:

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

Минусы:

• ежемесячная подписка;
• вы зависите от сервиса: если он перестанет работать, перестанет работать и калькулятор;
• гибкость ограничена возможностями конкретного конструктора. В Qalca, например, вы работаете с готовым шаблоном: можно задать свои цены, переименовать и скрыть поля, но добавить новое поле или поменять формулу самому нельзя. Если в шаблоне не хватает нужного варианта, нам пишут, и мы смотрим, как его добавить.

Кому подходит: малому и среднему бизнесу, которому калькулятор нужен как инструмент продаж, а не как проект разработки.

Сравнение способов в одной таблице

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

Как выбрать способ

Задайте себе три вопроса.

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

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

Что важнее: заявка или расчёт? Калькулятор на сайте нужен, чтобы клиент оставил контакты. Если вам важно, чтобы ни одна заявка не потерялась, смотрите в первую очередь на доставку заявок, а не на красоту формулы. Спросите у исполнителя или сервиса, что будет с заявкой, если почта или CRM временно недоступны.

Как сделать калькулятор для сайта на Qalca

Qalca это конструктор калькуляторов стоимости с формой заявки. В каталоге 84 готовых шаблона в 13 нишах. Вот как выглядит запуск.

1. Выберите шаблон под свою нишу. Например, калькулятор пластиковых окон считает конструкцию, размеры, профиль, стеклопакет, монтаж, подоконник, отлив и откосы. Есть шаблоны для натяжных потолков, уборки квартир, доставки, мебели и других ниш.

2. Поставьте свои цены. Цены в шаблоне это настройки. Вы меняете их в кабинете под свой прайс: стоимость за метр и за штуку, надбавки, скидку, минимальный заказ. Подписи полей можно переименовать под свой бизнес, а лишние поля скрыть.

3. Настройте, куда приходят заявки. Почта, Telegram, вебхук в CRM вроде amoCRM или Битрикс24, по желанию SMS. Заявка приходит с выбранными параметрами и итоговой суммой. Форма может быть до трёх шагов, с условными полями и загрузкой файлов, например фото или плана.

4. Вставьте одну строку кода на сайт. Калькулятор работает на Тильде, WordPress, Битриксе, Wix, Flexbe, LPgenerator и на любом сайте, куда можно вставить HTML-код. Его можно разместить на странице или открывать попапом по кнопке. Пошагово в инструкции по установке.

Что происходит дальше без вашего участия. Каждая заявка сначала сохраняется в базу и только потом отправляется. Если канал не ответил, отправка повторяется до 8 раз в течение суток, а после трёх неудач канал помечается красным и вам приходит уведомление. Цену пересчитывает сервер, поэтому подделать сумму в заявке нельзя. От спама защищают скрытое поле-ловушка, проверка времени заполнения, невидимая проверка браузера, лимит по IP и по желанию капча Яндекса (SmartCaptcha).

Тарифы за один калькулятор: Старт 490 ₽ в месяц (300 заявок, почта, Telegram, вебхук в CRM, статистика), Бизнес 1 490 ₽ (1 500 заявок, плюс онлайн-запись, приём оплаты, файлы, автоответ клиенту), Про 2 990 ₽ без лимита заявок, с SMS, без ссылки Qalca и персональной поддержкой.

Попробуйте Qalca 7 дней бесплатно

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