Онлайн-калькулятор для сайта: как создать и встроить без кода
Обновлено 25.10.2026
Онлайн-калькулятор выдаёт результат прямо в браузере: посетитель вводит числа и видит итог на той же странице. Калькулятор на сайте делает это для цены услуги ещё до того, как с вами кто-то связался. В FormDesigner такой калькулятор собирается без кода: вы добавляете поля, задаёте формулу и вставляете готовый код на любую страницу или в любую CMS.
Попробуйте пример ниже, а затем соберите свой.
Что такое онлайн-калькулятор
Онлайн-калькулятор — это страница, которая считает по мере заполнения. Ничего не нужно устанавливать: результат появляется в браузере.
Калькулятор на сайте — тот же инструмент на сайте компании. Посетитель выбирает варианты, видит цену услуги или заказа и только после этого отправляет заявку. Студия разработки для этого не нужна: калькулятор собирается в визуальном конструкторе и встраивается готовым кодом. Формулы и цены задаются один раз, а посетитель видит только результат.
Из чего состоит калькулятор на сайте
Простой калькулятор — это короткий набор полей, и каждое из них меняет итог:
| Элемент | Что делает посетитель | Пример |
|---|---|---|
| Выпадающий список | Выбирает один вариант | Вид работ: косметический ремонт или капитальный |
| Ползунок | Задаёт число | Площадь, 40 м² |
| Флажок | Добавляет дополнительную услугу | Вывоз мусора |
| Переключатель | Включает или выключает опцию | Срочная доставка |
| Курс валюты | Видит итог в другой валюте | Цена в евро, итог в долларах |
| Отправка результата | Оставляет заявку или оплачивает | Почта, CRM или оплата |
Калькулятор ремонта хорошо показывает схему. Посетитель вводит площадь и выбирает вид работ. Формула: площадь × цена за м² + дополнительные услуги. При 40 м², цене 25 и допуслугах на 150 итог равен 1 150. Это число видно на странице ещё до отправки заявки.
Где онлайн-калькулятор работает лучше всего
Калькулятор удерживает посетителя на странице дольше и превращает вопрос «сколько это будет стоить?» в заявку с уже заполненными цифрами. Лучше всего он работает там, где цена зависит от нескольких параметров: строительство и ремонт, перевозки, ипотека и кредиты, клининг, мебель, окна, косметология и бьюти-услуги. О пользе для бизнеса читайте в статье калькулятор на сайте: польза для маркетинга.
Калькулятор даёт потенциальному клиенту понятную цену без долгой переписки, а вам — заявку от человека, который уже знает примерную стоимость. С онлайн-конструктором калькуляторов вроде FormDesigner его можно добавить на любую страницу без кода. Отвечайте на такие заявки быстро: чем быстрее вы отвечаете, тем больше из них превращается в заказы.
Способы добавить калькулятор на сайт
Есть четыре распространённых способа. Можно написать калькулятор самому на HTML и JavaScript: это даёт полный контроль, но нужны разработчик и человек, который будет поддерживать код при каждом изменении цен. На WordPress можно взять плагин с вычисляемыми полями: это удобно, если весь сайт на WordPress, но работает только там и требует регулярных обновлений. Готовые виджеты встраиваются быстро, но простые из них часто умеют считать по одной формуле и несут бренд поставщика.
Четвёртый способ — конструктор форм с вычисляемыми полями, как FormDesigner. Вы визуально собираете поля и формулу, добавляете логику, форму заявки или оплату после итога и вставляете код на любой сайт. Именно этот подход описан в остальной части статьи.
Создание калькулятора в FormDesigner: три шага
Для создания калькулятора программирование не нужно. Это три шага:
- Добавьте поля и формулу. Списки, ползунки, флажки и поле «Формула» собираются в конструкторе, а посетитель видит итог до отправки.
- Настройте логику. Показывайте только те поля и страницы, которые подходят под выбор посетителя.
- Опубликуйте. Скопируйте готовый код и вставьте его на страницу. Он работает на любом сайте и в любой CMS, а позднее изменения вносятся онлайн в вашем аккаунте.
С конструктором калькуляторов для любого сайта FormDesigner можно быстро создавать калькуляторы с разными наборами параметров. Выберите шаблон или начните с чистой формы, введите свои цены и варианты и проверьте результат прямо в конструкторе: любое изменение видно сразу. Темы и собственный CSS помогут подогнать калькулятор под дизайн вашего сайта. Итог из поля расчёта можно сразу передать на платёжный терминал, чтобы клиент оплатил сразу после расчёта. Посмотреть, как это выглядит, можно на примере калькулятора, который считает стоимость работы.
Когда цена меняется, измените формулу в аккаунте. Страница на сайте обновится без разработчика и без нового кода вставки. Ветвления, курсы валют и оплата после итога настраиваются в том же конструкторе. FormDesigner — это онлайн-конструктор форм, в котором можно собирать также квизы, опросы и формы записи.
Как поставить калькулятор на сайт
Когда код скопирован, вставьте его в блок, который принимает HTML. На WordPress это блок «Произвольный HTML» (Custom HTML). В Wix добавьте элемент «Встроить код» (Embed Code) и выберите вариант с кодом. В Squarespace используйте блок Code: часть возможностей с пользовательским кодом зависит от тарифа. В Shopify откройте редактор темы и добавьте блок Custom Liquid в то место, где должен появиться калькулятор. Названия блоков могут отличаться в разных темах и версиях, но суть одна: HTML- или embed-блок, затем сохранить и проверить опубликованную страницу.
Если вы не хотите править страницу вообще, калькулятор можно открывать по прямой ссылке или показывать во всплывающем окне.
Примеры калькуляторов по отраслям
Разные компании используют одну и ту же схему с разными формулами. Ремонтная или строительная компания умножает площадь на ставку и добавляет допуслуги. Транспортная считает по расстоянию и весу. Кредитор показывает ежемесячный платёж по сумме и сроку. Прокат автомобилей считает дни и опции, как в шаблоне Аренда авто. Страховому агентству подойдёт калькулятор вроде расчёта ОСАГО, а студии детейлинга — расчёт по классу автомобиля и услугам, как в шаблоне для детейлинга. Больше идей в каталоге шаблонов. Формулы и примеры для калькуляторов ремонта, уборки и ипотеки есть в статье калькулятор стоимости для сайта.
Советы: как сделать калькулятор, который приводит заявки
Разместите калькулятор там, где посетитель спрашивает о цене: на странице услуги, рядом с прайс-листом или в начале страницы. Делайте калькулятор простым: несколько понятных полей и заметный итог, и каждый параметр должен менять результат. Слишком много параметров заставляют посетителей уходить со страницы.
Задайте разумные значения по умолчанию, чтобы посетитель сразу увидел результат и мог его подправить. После итога дайте один понятный следующий шаг: заявку, обратный звонок или оплату. Проверьте калькулятор на телефоне: поля и кнопки должны быть достаточно крупными, чтобы попасть пальцем. Если вы пользуетесь веб-аналитикой, посмотрите, где посетители уходят: поле, на котором бросают калькулятор, нужно переписать. Чтобы увеличить средний чек, добавьте скидку за больший объём или бонус за повторный заказ.
Калькулятор не отображается?
Если после вставки кода калькулятор не появился, первым делом проверьте блок: текстовые блоки часто вырезают скрипты, поэтому используйте HTML- или embed-блок. Если на телефоне всё сжато, задайте контейнеру полную ширину колонки. Если итог неверный, проверьте, что каждое поле подключено к нужному месту в формуле, и протестируйте простыми числами, результат которых вы знаете.
