технология

Создаем интерактивный калькулятор
для своего сайта:
сервис calconic.com

Сервис calconic.com предлагает выбрать из набора готовых к использованию шаблонов или создать собственный калькулятор с нуля без каких-либо знаний в программировании.

После регистрации сервис calconic.com предлагает 14-дневный бесплатный пробный период, когда вам будут доступны все функции сервиса. По окончании бесплатной пробной версии вы останетесь на бесплатном плане, где можно создать 5 калькуляторов в месяц, которыми в общей сложности смогут воспользоваться 500 пользователей. Цены на платную подписку составляют от 5 до 55 долларов (в зависимости от выбранного тарифного плана).

Сначала посмотрите, как калькулятор будет выглядеть на сайте. Он — адаптивный и будет подстраиваться под экран.


Откройте сервис calconic.com. Нажмите на бургер в правом верхнем углу (три горизонтальные полоски), выберите «SIGN UP» (зарегистрироваться). Зарегистрируйтесь через электронную почту.

Посмотрите видеоинструкцию по сервису. Или нажмите на плюс в панели слева. Затем в появившейся колонке — «CREATE NEW» (создать новый). На главном экране появится два «окна»:

 

  • NEW FROM BLANK (создать с нуля),
  • USE A TEMPLATE (использовать шаблон).

В шаблонах есть калькуляторы: сложных процентов, индекса массы тела, ипотечный, калорий, бюджета, пенсионных сбережений, для поездки, инвестиционный, уборки дома. Когда выберите подходящий шаблон, нажмите на зеленую кнопку «USE TEMPLATE» (использовать шаблон).

Откроется редакторская панель. Выделяйте блок и в появившемся окне вносите свои данные.

Когда все блоки будут отредактированы, в правом верхнем углу нажмите на «SAVE» (сохранить). Рядом значок превью, нажав на который можно проверить, как работает интерактивный калькулятор.

Когда создаете калькулятор с нуля, вверху над редакторским полем нажмите «+» (Add New Element — добавить новый элемент). Сервис calconic.com содержит следующий набор элементов:

 

  • Numeric Input — ввести цифру,
  • Text Input — вписать текст,
  • Select Field — выбрать ответ из всплывающего списка,
  • Slider — слайдер (передвигать бегунок),
  • Radio Box — выбрать ответ,
  • Checkbox — подтвердить ответ «флажком»,
  • Formula — прописать математическую формулу калькулятора,
  • Gauge — показать результат на цветовой линии,
  • Text Gauge — вписать итоговый текст,
  • Title — вписать заголовок,
  • Element Group — группировать элементы,
  • Information — добавить описание калькулятора или инструкцию, как им пользоваться,
  • Separating Line — добавить разделительную линию.

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

В конце обязательно добавьте блок «Formula» — именно здесь нужно прописать математическую формулу, по которой будет произведен расчет.

Значок шестеренки — это настройки калькулятор, например, здесь можно настроить цветовую гамму, поменять блоки местами. Нажмите на значок галочки в кружочке, чтобы активировать калькулятор.

Проверьте, как калькулятор работает, затем нажмите «SAVE» (сохранить).

Калькулятор готов.

Чтобы получить код на калькулятор, нажмите на соответствующий значок в верхней панели. В открывшемся окне, переключайтесь между вкладками «HTML/Lightbox/iFrame/Share», чтобы получить нужный код или ссылку для расшаривания.

Инструкция актуальна на январь 2022 года.

Спецпроекты sdelano.media

Над материалом работала
Ольга Бердецкая

Иллюстрации
скриншоты сервиса calconic.com

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: