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

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

Чтобы наглядно показать, как это работает на практике, мы рассмотрим не только основные способы создания калькуляторов, но и пошаговый пример на базе конструктора uCalc, одного из самых популярных инструментов в Рунете.

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

Способы создания онлайн-калькуляторов

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

Итак, если ваш движок не умеет создавать сложные формы и производить онлайн-расчёты на основе данных, которые вводят пользователи, и если у вас нет навыков программирования, то фактически остаётся только один вариант – использование готового профильного онлайн-конструктора калькуляторов. Как раз о таком и расскажем ниже.

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

Давайте разберём подробный пример создания онлайн-калькулятора на сервисе uCalc, который можно будет встроить в свой сайт. Предположим, что нам нужно посчитать стоимость услуг веб-агентства Divly на основе их официального-прайс-листа.

Шаг 0. Создайте сайт

Онлайн-калькуляторы, которые работают в роли квизов и форм для сбора лидов (как элемент геймификации и стимулирования внимания), лучше всего показывают себя в связке с одностраничными лендингами, посвящёнными какому-то конкретному товару или услуге.

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

Например, чаще всего калькуляторы требуются для сайтов и блогов, посвящённых строительной тематике.

От выбранной платформы для создания сайтов будет зависеть способ встраивания форм:

• Для WordPress и Joomla есть готовые плагины (их нужно установить и авторизоваться в них для подключения к свой учётной записи в uCalc). Мануал о создании сайта на WordPress.
• В uKit есть готовый виджет, его достаточно перетащить из набора доступных блоков на страницу своего сайта.
• Во всех остальных случаях вставка осуществляется на уровне HTML-кода.

Шаг 1. Регистрация и вход в uCalc

Перейдите на сайт uCalc.pro и зарегистрируйтесь, если у вас ещё нет учётной записи. Потребуется либо стандартная связка email + пароль, либо имеющийся аккаунт в соцсети.

После входа вы попадаете в панель управления.

Шаг 2. Создание нового калькулятора

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

Если калькуляторы уже есть, то нажмите кнопку «+».

Платформа предложит два варианта:

1. Собрать самостоятельно
2. Использовать шаблон.

Готовые шаблоны будут интересны для типовых задач и определённых тематик. Внутри конструктора более дюжины категорий и несколько десятков шаблонов.

У нас задача нетиповая, поэтому начнём с чистого листа.

Чтобы собрать наш калькулятор, мы использовали следующие опции прайса Divly:

Чтобы их обыграть, нам потребуются простейшие галочки (чек-боксы).

Логично добавить текст (название калькулятора) и итоговую сумму для оплаты (как результат расчёта).

Вот так это будет выглядеть в редакторе:

1. Сначала перетаскиваем элемент «Текст». В опциях элемента активируем галочку «заголовок» и наполняем его текстом. В настройках текста меняем размер шрифта и выравнивание (делаем по центру).

   

2. Теперь добавляем элемент «Галочка» и наполняем его. В качестве подзаголовка пишем про необходимость выбора опций. Добавляем недостающие чек-боксы – нам нужно 4 штуки. И не забудьте убрать активную галочку по умолчанию, чтобы опция сразу не суммировалась с общим итогом.

   

3. Меняем подпись для вывода результата расчётов. Вместо слова «Формула» вписываем свою формулировку:

   

Шаг 3. Настройка логики и формул расчёта

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

Прописываем свою формулу в боковой панели слева.

Результаты, которые рассчитываются по формуле и позже выводятся в калькуляторе, обозначаются буквами R (R1, R2, R3 и т.п.). Каждый элемент страницы обозначается латинскими буквами: A, B, C, D и т.д.

В нашем случае сумма по всем активным опциям в списке уже считается автоматом, так как экран с галочками воспринимается как единый элемент. Поэтому формула имеет вид R1 = B. Если бы у вас было несколько разных полей, то можно было бы прописать формулу в формате R1 = A + B + C … и так далее.

Наша итоговая формула будет выглядеть так: R1 = 4200 + B.

Где 4200 – это базовая стоимость услуги, без каких-либо опций. Теперь, если клиент будет отмечать галочкой нужные ему опции, то они будут суммироваться с базовой ценой.

Внутри формулы можно использовать скобки для определения приоритета расчётов и логические операторы (если… то…, больше/меньше, равно/неравно, и/или), а также автоматическую конвертацию курса валют (сами курсы определяются на основе данных ЦБ).

Формул может быть несколько. При этом результаты одной можно использовать внутри другой, главное не создавать замкнутых циклов.

Профессионалы могут активировать опцию текстового калькулятора и описать логику на JavaScript.

Шаг 4. Сохраняем свою форму и получаем код для вставки

Тут всё максимально просто. Нажимаем кнопку «Сохранить». uCalc автоматически покажет окно для копирования кода.

Шаг 5. Вставляем код на страницы сайта

Порядок действий сильно зависит от того, на каком движке у вас работает сайт. Например, в облачных конструкторах можно воспользоваться специальными виджетами для встраивания произвольного HTML-кода. В CMS-системах может потребоваться редактирование блоков шаблона и т.п.

Предположим, что для создания сайта мы использовали конструктор uKit.

Тогда процедура добавления калькулятора на страницы будет выглядеть так:

• Переключаемся в режим редактирования страниц.
• Находим виджет «Калькулятор услуг».

  

• Перетаскиваем его на страницу, в нужную нам область.

  

• Нажимаем на ссылку внутри виджета и в открывшейся панели кликаем на кнопку «Привязать аккаунт».
• Соглашаемся с привязкой аккаунта uCalc.
• Готово! Осталось сохранить изменения на странице.

Шаг 6. Тестирование

Обязательно проверьте работоспособность своего калькулятора и убедитесь, что расчёты проводятся правильно.

Ещё до момента публикации можно воспользоваться предпросмотром и узнать, как ваша форма будет выглядеть на разных типах устройств.

Уже после публикации рекомендуем открыть страницу с калькулятором на ПК и мобильных, чтобы убедиться в правильной вёрстке и отсутствии проблем – вдруг что-то куда-то съехало или не помещается в отведённом блоке.

Особое внимание уделите отправляемым данным – доходят ли уведомления из форм и происходит ли обмен информацией с внешними сервисами, на случай, если вы подключали CRM.

Что ещё можно сделать – дополнительные шаги (по желанию)

Изменение дизайна и внешнего вида калькулятора. Можно принудительно задать ширину виджета в пикселях, сменить цвет фона и выбрать одну из готовых цветовых схем. Если нужно изменить шрифты и оформление элементов ввода, то можно сменить тему оформления. Свои темы создавать нельзя, но отдельные параметры можно изменить за счёт задействования CSS-стилей (за счёт вставки HTML-кода внутри формы).

Добавление других элементов и форм ввода. В Drag&Drop-конструкторе доступно 11 элементов: текст, галочка, флажок, список, ползунок, поле (здесь сразу 8 форматов, включая форматированный ввод, например, для номеров телефона, дат, email-адресов и даже для загрузки файлов), картинка, кнопка, HTML-код, результат и бронирование. У каждого из них свои настройки: подсказки, дефолтные значения, описания и т.п. Поля можно делать обязательными и необязательными к заполнению. Результаты могут быть промежуточными и в виджете могут не отображаться.

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

Сбор статистики. Помимо сквозных скриптов аналитики (Google и Яндекс), в uCalc можно настроить отслеживание целевых действий, например, нажатия на кнопки. Аналитика подключается без копирования/вставки кода.

Антиспам-защита. У uCalc есть два механизма защиты от ботов – свой (встроенный) и на основе ReCAPTCHA. Они пригодятся, если через форму поступает спам.

Обмен данными с внешними сервисами. Данные из форм (лиды) могут отправляться в CRM-системы amoCRM, AirCRM и Битрикс24. Для всех остальных сервисов можно использовать коннектор Zapier. Открытого API у u Calc нет.

Онлайн-оплата. Для прямой оплаты итогового расчёта по товару или услуге можно подключить следующие платёжных шлюзы: ЮMoney (для физлиц), ЮKassa (для юрлиц), PayPal (не для РФ) и Stripe (тоже не для РФ).

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

Подключение к Telegram-боту. Онлайн-калькулятор может работать в виде мини-приложения прямо внутри мессенджера Telegram. Его можно подключить к своему каналу.

Отправка уведомлений. Данные из форм, например, с результатами расчёта, могут отправляться не только владельцу, но и самому пользователю. В качестве каналов уведомлений можно подключить: SMS, email и Telegram. Для каждого канала в зависимости от используемого тарифа предоставляются определённые лимиты. При необходимости их можно докупить. Шаблон уведомления можно изменить на свой.

Если вам интересен такой подход к созданию онлайн-калькуляторов, то рекомендуем изучить более детальный обзор возможностей uCalc ниже.

Обзор uCalc – возможности лучшего конструктора онлайн-калькуляторов в Рунете

Краткая справка: в Ру-сегменте существует несколько профильных сервисов, которые позволяют реализовать онлайн-расчёт. Но они уже либо уже заброшены, либо заточены под создание квизов (это многошаговые формы для привлечения внимания клиентов, применяются для стимулирования роста лидов в маркетинге), например, как тот же stepFORM (подробный обзор).

uCalc вышел на рынок одним из первых, ещё в 2016 году, и до сих пор удерживает лидерство. Аналогов у него практически нет. Зарубежные альтернативы, такие как Formsite, Jotform, Calculoid и т.п., имеют проблемы не только с оплатой и доступом из РФ. Они не подходят для работы с персональными данными российских клиентов – а ведь формы чаще всего применяются для сбора контактов.

Ключевые преимущества и функциональные возможности uCalc

• Совместимость с любыми CMS и конструкторами сайтов. Единственное требование – доступ к вставке HTML-кода. Код виджета вставляется один раз, все последующие настройки и изменения – только в дашборде сервиса. Встраивание можно реализовать на уровне блока или всплывающего окна. Форму можно открыть по прямой ссылке – ею удобно делиться в сообщениях и в email. Есть готовые плагины для WordPress и Joomla, приложение VK и виджет для конструктора uKit.
• Любая сложность формул и логики. Возможно применение математических и логических операторов. Если стандартных функций не хватает, можно перейти на синтаксис JavaScript. Формулы можно подставлять одна в другую.
• Огромный выбор готовых калькуляторов. На любой вкус и цвет – для разных задач и ситуаций применения. Кафе и рестораны, ипотека и финансы, строительство и ремонт, работа с недвижимостью и т.п. Любой из шаблонов можно отредактировать под свои нужды.
• Всё для качественного дизайна. Готовые темы оформления и возможность настройки внешнего вида вручную.
• Подходит для создания квизов. Формы могут иметь много шагов и сложную логику перехода между экранами.
• Подходит для бронирования/записи. С помощью форм uCalc можно организовать запись на конкретное время – на основе графика работы и свободных слотов.
• Сбор лидов. Собирайте контактные данные из форм и передавайте их в CRM-системы. Для нестандартных интеграций есть Zapier и экспорт в CSV.
• Рассылка уведомлений. По разным каналам – email и SMS. Владельцы калькуляторов могут получать оперативные уведомления о лидах в Telegram.
• Приём онлайн-оплаты. uCalc можно использовать для реализации кнопки «Купить» для любого сайта, даже если он свёрстан на чистом HTML в блокноте. Есть автоматическая конвертация курса валют и работа с картами российских банков.
• Калькуляторы для Telegram. Формы можно подключить к своему каналу. Они будут работать прямо в мессенджере, в виде мини-приложений.
• Создание форм и онлайн-калькуляторов под ключ. Любые работы с гарантией результата. За проектирование логики и настройку дизайна отвечает собственное веб-агентство Divly. Цены – от 4200 руб.
• Подключение внешней аналитики. Это может быть Google Аналитика или Яндекс Метрика. Для Метрики можно настраивать целевые действия.
• Покупка навечно. Конструктор калькуляторов можно приобрести навсегда и не платить больше никаких подписок.

Минусы и нюансы uCalc

• Нет бесплатного тарифа. Только триал на 2 недели для полноценного тестирования. После истечения срока редактировать калькулятор можно, но публиковать нельзя – клиенты не смогут им воспользоваться.
• При покупке «навечно» могут быть дополнительные расходы. Речь о докупке SMS и email-сообщений сверх выделенных лимитов.
• Тарифы в у.е. Конвертация производится по внутреннему курсу, который может быть выше официального курса доллара. Хотя оплата в рублях.
• К форме нельзя прикрепить свой домен. Это для ситуаций с прямыми ссылками на формы. При встраивании в существующие сайты неактуально.
• Нет сводной статистики по ответам. Соответственно, uCalc не подходит для создания опросов. Их лучше делать в других сервисах – список лучших конструкторов опросов.
• Нет готовых всплывающих окон. Их либо придётся реализовать своими руками (в документации предоставляется пример), либо на базе профильных конструкторов (список сервисов смотрите в рейтинге конструкторов поп-апов).

Ценовая политика (стоимость подписок)

Тариф «Базовый» – от 4 до 5 у.е. в месяц (460-575 руб./месяц). До 5 форм/калькуляторов, до 3 страниц в каждом, до 3 папок в аккаунте, 300 email-уведомлений в месяц + 300 Telegram-уведомлений. Недоступны бронирование, логические ветвления и чат с техподдержкой.

Тариф «Стандарт» – от 9,6 до 12 у.е. в месяц (1104-1380 руб./месяц). До 15 форм/калькуляторов, до 10 страниц в каждом, до 10 папок в аккаунте, 1000 email- и 10 SMS-уведомлений в месяц, 1000 Telegram-уведомлений. Недоступен только чат с техподдержкой.

Тариф «Стандарт» – от 22,4 до 28 у.е. в месяц (2576-3220 руб./месяц). Любое количество форм/калькуляторов, страниц в каждом и папок в аккаунте, 3000 email- и 30 SMS-уведомлений в месяц, 3000 Telegram-уведомлений.

Пакеты уведомлений можно докупить отдельно.

Триал – 14 дней на условиях тарифа «Базовый».

Покупка навечно:

• «Базовый» – 120 у.е. (13800 руб.)
• «Стандарт» – 250 у.е. (28750 руб.)
• «Базовый» – 460 у.е. (52900 руб.)

Заключение

Итак, сделать онлайн-калькулятор можно разными способами, но только облачные конструкторы обеспечивают минимальный порог входа и максимальный комфорт настройки. И если на западном рынке есть несколько топовых сервисов, то в Рунете один явный лидер – uCalc. И дело не в количестве регистраций, а в доступном функционале и гибкости.

Выше мы привели предметную пошаговую инструкцию, как можно сделать свой онлайн-калькулятор и разместить его на страницах своего сайта – всё на примере конструктора uCalc.