Для создания калькуляторов или форм-калькуляторов на различные тематики понадобятся виджеты "Форма", "Поля" и другие, для кастомизации внешнего вида формы, а также базовые знания о переменных в языке JavaScript.

Основа для любого калькулятора - это виджет "Форма" и "Поля" в этой форме. В настройках каждого поля можно указать переменную, значение переменной, а в специальном поле "Калькулятор" формулу расчета.

ПРИМЕРЫ НАСТРОЙКИ КАЛЬКУЛЯТОРОВ

Кредитный калькулятор

1. Поместим виджет "Форма" в секцию, удалим стандартные поля, кнопку "Отправить заявку" и изменим название формы.

2. Добавим в форму два поля "Ползунок" и два поля "Калькулятор".

3. Изменим названия полей следующим образом:

  • Первое поле "Ползунок" - название "Сумма кредита";
  • Второе поле "Ползунок" - название "Срок кредита (мес.)";
  • Третье поле "Калькулятор" - название "Ежемесячный платеж";
  • Четвертое поле "Калькулятор" - название "Общая сумма выплаты".

4. Укажем для полей минимальные, максимальные значения и шаг.

  • Для поля "Сумма кредита" минимальное значение 30000, максимальное - 500000, шаг - 10000;
  • Для поля "Срок кредита (мес.)" минимальное - 1, максимальное - 36, шаг - 1;

5. К каждому полю нужно добавить переменную, чтобы значения из этих полей считались в полях "Калькулятор".

  • Для поля "Сумма кредита" укажем переменную - credit;
  • Для поля "Срок кредита (мес.)" - term;
  • Для поля "Ежемесячный платеж" - payment;

6. В поле "Ежемесячный платеж" добавим формулу расчета по кредиту.

Формула: (credit + (credit * 0.117 * term) / 12) / term

Заметка: в формуле указаны переменные, которые мы указали каждому полю в предыдущем шаге. Каждая переменная содержит какое-то значение и при передвижении ползунка оно меняется. Значение 0.117 - это процентная ставка по кредиту, то есть она равна 11,7%.

Нажав на знак вопроса возле поля "Формула" можно увидеть какие операции поддерживаются.

7. В поле "Общая сумма выплаты" добавим формулу - payment * term. Где сумма ежемесячных платежей умножается на количество месяцев.

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

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

Форма-калькулятор заказа еды

1. Добавим виджет "Форма" в секцию и укажем положение для формы "По ширине".

2. В форме будет три поля:

  • Тип поля "Имя", название "Введите вашу фамилию и имя";
  • Тип поля "Номер телефона", название "Укажите ваш номер телефона";
  • Тип поля "Текстовое поле", название "Укажите адрес доставки".

3. Изменим название формы на "ЧТО ХОТИТЕ ЗАКАЗАТЬ?" И добавим в неё ещё несколько виджетов:

  • Текст;
  • Линия;
  • Колонки из двух ячеек;
  • Колонки из четырех ячеек.

4. В виджетах "Колонки" выполним следующие действия.

Для колонки состоящей из четырех ячеек:

  • В первые три ячейки добавим поля "Галочки" и "Ползунок;
  • В четвертую ячейку поле "Калькулятор";
  • Удалим все виджеты "Текст" лежащие в каждой ячейке.

Для колонки состоящей из двух ячеек:

  • В левой ячейке укажем текст "При выборе количества товара их количество умножается на выбранное значение." Выровняв его по левому краю;
  • В правой ячейке удалим виджет "Текст".

Дополнительно в ранее добавленном виджете "Текст" напишем "Ваши контактные данные" и поместим между этим текстом и колонками виджет "Линия", чтобы визуально разделить калькулятор от формы.

5. Настроим поля.

  • Для полей "Ползунок" укажем названия, минимальные и максимальные значения;
  • В полях "Галочка" напишем названия продуктов и их разновидность;
  • Поле "Калькулятор" переименуем в "Итоговая цена".

6. В настройках полей "Галочки", "Ползунок" укажем переменные и цены на каждый вид товара.

Поле "Гамбургеры":

  • Переменная - hamburgers;
  • C говядиной - 320 руб;
  • Cо свининой - 200 руб;
  • C телятиной - 450 руб;

Поле "Чай":

  • Переменная - tea;
  • Черный - 180 руб;
  • Зеленый - 180 руб;
  • Белый - 200 руб;

Поле "Мороженное":

  • Переменная - ice;
  • Клубничное - 120 руб;
  • Кокосовое - 120 руб;
  • Ванильное - 120 руб;

Для всех полей "Ползунок":

  • Переменная - amount_ (после знака нижнего подчеркивания добавим соответсвующее имя переменной из полей "Галочки", чтобы получилось так amount_hamburgers, amount_tea, amount_ice);
  • Минимальное значение - 1;
  • Максимальное значение - 20;
  • Шаг - 1.

7. В поле "Итоговая цена" настроим формулу вычисления итоговой суммы.

Формула: (hamburgers * amount_hamburgers) + (tea * amount_tea) + (ice * amount_ice)

Калькулятор расчета суточной нормы потребления калорий

1. Добавим в секцию виджет "Форма", удалим стандартные поля, в том числе, кнопку "Отправить заявку" и добавим в форму новые поля:

  • Три поля "Количество";
  • Одно поле "Выпадающий список";
  • Одно поле "Калькулятор".

2. В заголовке формы напишем "РАСЧЕТ СУТОЧНОЙ НОРМЫ ПОТРЕБЛЕНИЯ КАЛОРИЙ", а поля формы назовем так:

  • Первое поле - "Рост (в сантиметрах)";
  • Второе поле - "Вес (в килограммах)";
  • Третье поле - "Возраст";
  • Четвертое поле - "Степень активности".

3. В поле "Выпадающий список" добавим такие варианты:

  • Отсутствие физических нагрузок, сидячая работа;
  • Физические нагрузки 2 раза в неделю;
  • 4/5 тренировок в неделю или активная работа «в движении»;
  • 5/6 интенсивных тренировок в неделю;
  • Тренировки 7 дней в неделю;
  • Ежедневные нагрузки 2 раза в день;
  • Интенсивные тренировки 2 раза в день или же тяжелые физические нагрузки на работе.

Сразу укажем переменную и значения переменной для каждого из вариантов:

  • Переменная - activity;
  • Значение переменной для варианта "Отсутствие физических нагрузок, сидячая работа" - 1.2;
  • Значение переменной для варианта "Физические нагрузки 2 раза в неделю" - 1.4;
  • Значение переменной для варианта "4/5 тренировок в неделю или активная работа «в движении»" - 1.46;
  • Значение переменной для варианта "5/6 интенсивных тренировок в неделю" - 1.55;
  • Значение переменной для варианта "Тренировки 7 дней в неделю" - 1.63;
  • Значение переменной для варианта "Ежедневные нагрузки 2 раза в день" - 1.72;
  • Значение переменной для варианта "Интенсивные тренировки 2 раза в день или же тяжелые физические нагрузки на работе" - 1.9.

4. Добавим имена переменных во все остальные поля.

  • Рост (в сантиметрах) - growth;
  • Вес (в килограммах) - weight;
  • Возраст - age.

5. В поле "Калькулятор" изменим название на "Суточная норма потребления калорий", положение выберем "По центру" и зададим формулу для вычислений.

Формула: (weight * 9.99 + growth * 6.25 - age * 4.92 + 5) * activity


Для просмотра, как настроены калькуляторы, перейдите в редактор
по этой ссылке.
Для просмотра калькуляторов в работе -
по этой ссылке.

ДОПОЛНИТЕЛЬНЫЕ МАТЕРИАЛЫ

Вы нашли ответ?