Подробная инструкция по созданию калькулятора для сайта

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

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

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

Главная страница личного кабинете в конструкторе веб-форм FormDesigner

Давайте для примера создадим калькулятор расчета вклада по депозиту. Для этого нажмите на кнопку «Создать форму» и выберите тип формы «Другая форма»:

Создание калькулятора для сайта

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

Настройка названия калькулятора

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

Элементы калькулятора

Именно на этой странице создаются все элементы нашего калькулятора.

Формула расчета депозитного вклада выглядит так:

Формула простых процентов

Где,

S — сумма денежных средств, причитающихся к возврату вкладчику по окончании срока депозита. Она состоит из первоначальной суммы размещенных денежных средств, плюс начисленные проценты.
I – годовая процентная ставка
t – количество дней начисления процентов по привлеченному вкладу 
K – количество дней в календарном году (365 или 366)
P – первоначальная сумма привлеченных в депозит денежных средств

Предположим, что мы хотим открыть депозит на сумму 100 000 рублей сроком на 6 месяцев, с процентной ставкой – 10,5%. Применяя формулу, получаем следующий результат:

S = 100000 + 100000 * 10,5 * 180 / 365 / 100 = 105 178,08

Исходя из этой формулы наш калькулятор будет содержать такие поля

  1. Сумма вклада – поле для ввода цифр или ползунок
  2. Годовая процентная ставка – поле для ввода цифр
  3. Срок депозита – выпадающий список или переключатель

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

Добавление элементов в калькулятор

В качестве срока депозита я указал такие значения:

  • 1 месяц
  • 3 месяца
  • 6 месяцев
  • 12 месяцев

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

Теперь нам необходимо добавить в наш калькулятор элемент формы «Формула», где и будет происходить вся настройка расчета. Данный элемент находится в «Экстра» полях:

Добавление формулы в калькулятор

Давайте теперь перейдем к редактированию этого элемента и настроим формулу расчета:

Настройка калькулятора

Здесь вы можете изменить название этого элемента, прописать префикс или суффикс (я поставил суффикс «руб.»), а также выбрать разделитель числа, т.е. как будет форматироваться вывод суммы.

После чего мы переходим к самому главному – настройке формулы расчета нашего калькулятора. Для этого необходимо кликнуть по кнопке «Настройка формулы», после чего перед вами откроется такое окно:

Настройка формулы расчета

Следуя нашей формуле нам нужно добавить в формулу такие значения:

сумма вклада + сумма вклада * годовая процентная ставка * срок депозита / 365 / 100

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

Формула расчета депозитного вклада

Для компактности формулы названия элементов не выводятся, а вместо этого выводится их порядковый номер. Но если навести курсор на поле, то название выведется. Хочу обратить ваше внимание на поле №3 – это срок депозита. Так как у нас в форме оно представлено в виде списка и имеете разные варианты, то нам необходимо для каждого варианта ответа прописать нужное количество дней. Для этого необходимо нажать на иконку «шестеренки», после чего перед нами откроется окно, где можно прописать значения, для каждого варианта ответа:

Настройка срока депозита

Для простоты расчета я указал такие значения:

  • 1 месяц – 30 дней
  • 3 месяца – 90 дней
  • 6 месяцев – 182 дня
  • 12 месяцев – 365 дней

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

Теперь если открыть форму, то мы увидим, как работает расчет:

Расчет депозита

При необходимости сумму вклада можно сделать в виде ползунка и ограничить минимальную и максимальную суммы вклада:

Калькулятор расчета депозита

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

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

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

Добавление условия в формулу расчета

После чего в формулу добавиться логическое условие:

Условие

Для его настройки необходимо нажать на иконку «шестеренки», после чего вы увидите следующее окно:

Добавление выражения в условие

Для того, чтобы добавить логическое выражение, необходимо нажать на кнопку «Добавить выражение»:

Настройка логических выражений в уловии

Таким образом можно настраивать различные логические выражения, в результате чего, в формулу, вместо условия, будет подставлено число, того логического выражения, которое окажется верным. В нашем примере, я настроил что если сумма вклада будет меньше 50000 руб., то в формулу вернется значение 0,95. Таким образом мы уменьшаем итоговую сумму на 5%.

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

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

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

Комментарии