Как создать онлайн-калькулятор: пошаговая инструкция

Обновлено 03.11.2026

Здравствуйте.

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

Что мы будем делать

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

Формула расчёта

Используем формулу простых процентов:

Здесь S — сумма, которую вкладчик получит в конце срока, P — начальная сумма, I — годовая процентная ставка в процентах, t — число дней начисления процентов, K — число дней в году (365 или 366). Для вклада 100 000 под 10,5% на шесть месяцев (182 дня) получаем S = 100 000 + 100 000 × 10,5 × 182 / 365 / 100 = 105 235,62. Проверим, что наш калькулятор даст то же число.

Шаг 1. Создайте пустую форму

Войдите в личный кабинет. Можно сразу кликнуть создать форму или открыть список форм.

Нажмите «Создать форму». Откроется окно «Выбор шаблона»: выберите «Пустой шаблон» и нажмите «Создать новую форму».

В окне «Название формы» введите название калькулятора и нажмите «Сохранить».

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

Шаг 2. Добавьте поля

Нашему калькулятору нужны три поля: сумма вклада (элемент «Цифры» или «Ползунок»), годовая процентная ставка («Цифры») и срок вклада («Выпадающий список» или «Переключатели»). Чтобы добавить поле, перетащите нужный элемент из списка слева в центральную область конструктора.

Для срока возьмём выпадающий список с четырьмя вариантами: 1 месяц, 3 месяца, 6 месяцев и 12 месяцев. Сделайте все три поля обязательными, чтобы расчёт никогда не шёл по пустым значениям.

Шаг 3. Добавьте формулу

Теперь добавим элемент «Формула», в котором настраивается весь расчёт:

Можно использовать поиск для добавления нужного элемента.

Откройте его настройки. В Основных параметрах можно изменить название элемента, добавить префикс или суффикс (мы поставили суффикс «руб.»), выбрать разделитель тысяч и число знаков после запятой. На скриншоте знаков после запятой ноль, поэтому итог позже округлится до рубля. Чтобы увидеть копейки, поставьте 2. Затем нажмите «Формула расчёта».

Откроется окно «Формулы расчета». Следуя нашей формуле, запишем:

сумма вклада + сумма вклада × годовая ставка × срок вклада / 365 / 100

Чтобы вставить элемент формы в формулу, нажмите «Добавить элемент» и выберите поле. Для компактности редактор показывает не названия элементов, а их порядковые номера, но если навести курсор на номер, название появится.

На этом скриншоте в строке формулы только произведение: поле №1 × поле №2 × поле №3 / 365 / 100. Так калькулятор вернёт одни проценты, около 5 236. Чтобы получить сумму к выдаче, как на скриншоте результата, в начале добавьте сумму вклада ещё раз, через плюс: сумма вклада + сумма вклада × ставка × срок / 365 / 100.

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

Нажмите «Назад», и вы вернётесь в окно формулы. Нажмите «Сохранить», после чего формула готова.

Шаг 4. Проверьте результат

Откройте форму и попробуйте. Для 100 000 под 10,5% и варианта «6 месяцев» точный результат — 105 235,62. На скриншоте форма показывает 105 236 руб.: при нуле знаков после запятой сумма округляется. Если поставить 2 знака, на форме будет 105 235,62. При желании сумму вклада можно сделать ползунком и ограничить минимальное и максимальное значение. Подходят оба варианта, выбирайте тот, что удобнее вашим посетителям.

Тут как кому больше нравится, никаких ограничений нет!

Шаг 5. Добавьте условие в формулу

Калькулятор выше — самый простой вариант. Когда результат зависит от нескольких параметров, в формуле используют логические выражения. Нажмите значок условия в редакторе формулы, и в формулу добавится условие. Откройте его настройки значком шестерёнки и нажмите «Добавить выражение».

В качестве примера зададим, что если сумма вклада меньше 50 000, в формулу возвращается значение 0,95 иначе 1(чтобы условие не влияло на другие значения вклада). Тогда результат для небольших вкладов уменьшается на 5%. В формуле вместо условия подставляется число первого выражения, которое оказалось верным. Это открывает много возможностей: ступенчатые скидки, разные ставки для разных регионов, наценка за срочный заказ.

Встройте калькулятор на сайт

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

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

Если у вас остались вопросы, то оставляйте их в комментариях ниже!

Удачного дня!