Пример: Калькулятор заказа еды

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)

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