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

Калькуляторы и формы
для сайтов, мессенджеров и соцсетей

Сделайте их сами без навыков программирования, потратив 0 рублей и 10 минут времени.

Быстро

Десятки шаблонов для разных сфер бизнеса и готовые блоки для самостоятельной сборки.

Удобно

Ползунок, список, галочки, сбор контактов и прием оплат — все под рукой в визуальном редакторе.

Эффективно

Повышайте SEO-показатели сайта, получайте готовые заявки на почту и телефон, отправляйте сообщения клиентам.

Выгодно

Не нужно обращаться к разработчикам, чтобы настроить, установить или обновить форму.

Практично

Используйте на сайте, в приложении VK, любом мессенджере, соцсети и почте — виджет на 5 случаев жизни.

Что это даст бизнесу

Рост SEO-показателей

Экономьте бюджет за счет работы с низкочастотными запросами, улучшайте поведенческие показатели, поднимайтесь в поисковой выдаче.

Довольные клиенты

Моментальный расчет стоимости доступен в любое время дня и ночи. Результаты и ваши контакты можно сохранять себе на почту и телефон.

Преимущество перед конкурентами

Реагируйте на обращения быстрее, получая готовые заявки. Перестаньте тратить время на пустые вопросы и тех, кто все равно не купит.

Примеры калькуляторов

Наши функциональные калькуляторы в действии

Наш сервис позволяет легко и быстро

Изменить дизайн

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

Обработать заказы

Калькулятор или форма защищены от копирования с вашего сайта

Персональные данные ваших клиентов под защитой

Мобильная версия калькулятора или формы в подарок

Подойдет любому сайту

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

Инструкции по установке калькулятора на популярные
конструкторы и CMS вы найдете после регистрации.

Удобно собирать. Удобно управлять. Удобно заказывать

Предприниматель, собирает и ремонтирует технику на заказ

Руководитель отдела продвижения агентства Index.art

О нас пишут

Теперь добавить калькулятор для расчета стоимости товаров или услуг – дело нескольких минут!
Создать калькулятор любой сложности без знания программирования можно при помощи визуального редактирования, настроив необходимые поля в соответствии с потребностями вашего бизнеса и целевой аудитории сайта!

Закажите готовый калькулятор по вашим требованиям

Мы найдем вам исполнителя и проконтролируем качество и срок. Вы не заплатите, пока не примете работу — на время выполнения
2 500 рублей просто заморозится вашим банком на вашем же счету.
Заказывая калькулятор, вы получаете месяц премиума в подарок.

Источник

Онлайн-калькулятор на сайт: выбор готового виджета

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

Где применить онлайн-калькулятор?

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

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

Moclients.com

Сервис состоит из 6 виджетов для сайта. Среди них есть онлайн-калькулятор. На самом деле это не калькулятор — просто форма сбора заявок с шагами. В нем не производятся никакие расчеты. Клиенты проходит шаг-1, шаг-2, шаг-3 и получают предложение отправить результат на их почту.

Работает? — Да. Очень рекомендую протестировать данный сервис в сравнении с нижеприведенными калькуляторами. В моей практике был случай, когда на сайте по ремонту квартир, онлайн-калькуляция с реальными ценами сильно «уронила» объем получаемых заявок. Любой из виджетов в этой статье считает грубее человека. Такие расчеты могут отпугнуть потенциального клиента + нет возможности сгладить цену другими факторами при первом телефонном контакте. Так называемый contact wall — «оставь контакты и получи», работает практически всегда.

Вернемся к Моклиентс. В вашем распоряжении есть бесплатная версия любого виджета на любое количество сайтов, но при этом c ограничением в 10 заявок/месяц. Платная версия любого калькулятора для 1 сайта стоит 490 рублей /месяц + 2 недели бесплатного использования.

Можно настроить цели и передавать события в Яндекс Метрику и Google Analytics.

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

uCalc.pro

Сервис от легендарного конструктора сайтов Ucoz. У этого калькулятора есть три важных преимущества.

Слово «бесплатно» — одно из самых используемых на посадочной странице. Бесплатный тариф ограничен 100 E-mail уведомлениями, отсутствием возможности редактировать код калькулятора, присутствием копирайта и т.д.

Calccreator.com

Сalccreator.com – это настоящий drug-n-drop конструктор калькуляторов. Вам придется собирать виджет по кнопочкам, флажочкам и другим элементам. С 0, никаких шаблонов здесь нет. Потребуется выдержка и талант. Плюсом этого калькулятора для сайта можно назвать полную гибкость. Можно собирать варианты с любыми формами, слайдерами, выпадающими списками и т.д. При большом желании можно получить целый интернет-магазин. Дизайн прихрамывает на обе ноги.

Можно скачать получившийся код или вставить его на сайт через iframe. Этот сервис отлично подойдет разработчикам или веб-мастерам, которые хотят создавать для своих клиентов сложные конструкторы и передавать исходный код.

Есть 5 бесплатных проектов. Дальше 1 месяц будет стоить 795 руб, 3 месяца — 1390, 6 месяцев – 1810 руб.

BitCalc

Конструктор BitCalc, представляет сайт Bitronica.com. Рекордсмен по сложности. Начиная с покупки, заканчивая настройкой.

Дизайна как такового нет. Но наиболее удобным признаётся выбор любого калькулятора прямо из имеющегося набора шаблонов, пока без привязки к конкретному сайту. Пользователь просто выбирает шаблон, указывает его параметры и «опускает в корзину». Таким образом, появляется возможность собрать целый пакет, который можно будет потом распределить по сайтам.

Любой созданный калькулятор имеет бесплатный начальный период использования – 14 дней. В дальнейшем устанавливается стоимость в 240 руб за месяц на один сайт. Протестировать виджет до принятия окончательного решения можно и бесплатно.

Есть дополнительные виджеты – форма заказа, всплывающее окно акции, подписка на рассылку, каталог продукции.

Web-forms.ru

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

В течение 14 дней любой виджет можно использовать бесплатно, далее аренда в месяц одного виджета на одном сайте – 659 рублей. Приобретение при неограниченном сроке использования и постоянной технической поддержке — 2999 руб.

Вывод

Я бы рекомендовал поочередно попробовать на своем сайте виджеты калькуляторов от Moclients и uCalc. Первый, собирающий заявки, второй, производящий реальные расчеты. Обязательно проработать дизайн, шаги, настроить интеграцию с Яндекс Метрикой/Google Analytics для отслеживания эффективности. Если вы планируете разрабатывать калькуляторы своими руками, для клиентов под заказ, и вам важно получить исходный код — Calccreator.

Источник

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

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

Зачем нужен онлайн-калькулятор?

Онлайн-калькулятор на сайте решает как минимум три задачи:

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

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

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

В общем, инструмент действительно полезный, но есть один вопрос — как создать такой виджет? Раньше это было проблемой, для решения которой требовалось привлечение разработчиков. Теперь же есть конструктор uCalc, который позволяет собирать калькуляторы за несколько часов.

Возможности uCalc

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

Конструктор uCalc предлагает два режима работы: редактирование шаблона и создание формы с нуля. Первый способ проще, поэтому рекомендуем начинать именно с него. В ходе редактирования шаблона вы поймёте, какие возможности предлагает визуальный редактор и как ими пользоваться. После такого обучения собрать калькулятор с нуля будет несложно. Хотя такой необходимости может и не появиться — всё-таки шаблоны предлагают широкое применение. Чтобы убедиться в этом, достаточно посмотреть на список их категорий и наполнение библиотеки.

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

Функциональность сервиса меняется в зависимости от того, на каком тарифе вы работаете. Бесплатный режим позволяет создать до 3 проектов со 100 уведомлениями по электронной почту и интеграцией CRM-системы (только компании и задачи, без сделок и контактов). Если вы хотите получить больше возможностей, то переходите на один из платных тарифов:

Стоимость тарифов указана из расчёта помесячной оплаты. Чем продолжительнее оплаченный период, тем выше скидка. Например, покупка тарифа на год обойдётся на 20% дешевле. Платные пакеты услуг предлагают также дополнительные возможности:

Для тестирования возможностей uCalc доступен 14-дневный пробный период. Но платить вам никто не заставляет. В принципе, для начала будет достаточно той функциональности, которую предоставляет бесплатный тариф — калькуляторы на нём работают так же хорошо, как и на платных пакетах услуг. Если же вы поймёте, что виджет приносит пользу (и прибыль), но некоторых возможностей не хватает, то в любой момент можно переключиться на платный доступ.

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

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

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

Чтобы создать первый проект, нажмите на плюс. Выберите режим работы: самостоятельная сборка и нуля или использование шаблона. Для старта рекомендуем остановиться на втором варианте. Шаблоны разделены по категориям. Прежде чем выбирать конкретный вариант, изучите его через предпросмотр: нажимайте на кнопки, отмечайте разные опции и проверяйте, как меняется цена.

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

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

Кроме настроек элементов есть общие параметры отображения калькулятора. Они представлены в трёх вкладках, которые располагаются над редактируемой формой:

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

Самый важный этап настройки калькулятора — добавление формы расчёта. Посмотрим на примере заказа такси, как это работает.

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

Последний этап — добавление виджета на сайт. После нажатия кнопки «Сохранить» вы получите код калькулятора. Его нужно скопировать и вставить на ту странице, где пользователи должны выполнять расчёты. Если вы не знаете, как размещать код на сайте, воспользуйтесь инструкциями в базе знаний uCalc, в которых описан порядок встраивания виджета на разных конструкторах и CMS.

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

Источник

Как сделать калькулятор или форму для сайта: обзор 4 специальных конструкторов

Время чтения: 25 минут Нет времени читать? Нет времени?

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

Сколько стоит сделать калькулятор? Студия может запросить у вас и 25 тысяч рублей:

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

Проекты из России и стран СНГ

Общее сравнение

Тестирование проходило в два этапа.

Елена Потолицына, маркетолог в агентстве «Бьюти-Маркетинг»

Владимир Таранец, фрилансер, делает сайты-визитки за 3-5 тысяч рублей

Мария Бикбулатова, предприниматель, владелица нескольких проектов в индустрии гостеприимства

Ключевые клиенты:
салоны красоты, медицинские центры и — реже, но тем не менее — строительные организации

Задача: собрать калькулятор расчета монтажа видеонаблюдения для сайта охранного предприятия

Задача: оформить калькулятор на основе шаблона для любого проекта, потратив как можно меньше времени и сил

Елена, Владимир и Мария наряду со мной опробуют отечественные конструкторы калькуляторов и поделятся впечатлениями.

1. uCalc.pro

Бесплатная версия: бессрочная, можно на время протестировать платные функции: отправку sms клиентам, прием оплаты, статистику, добавление иллюстраций к элементам калькулятора.

УТП: прием оплаты через «Яндекс.Кассу», работа в соцсетях и мессенджерах по спецссылке.

Минус: проект не дает редактировать код калькулятора.

Планы проекта по развитию: выпуск модулей для платформ WordPress, uKit (запущено во время тестов) и uCoz — чтобы калькулятор устанавливался туда автоматически, без копирования кода с сервиса. К осени заявлены первые интеграции с CRM.

Работа с калькулятором

После регистрации вы попадете на страницу, где будут храниться ваши калькуляторы. Здесь вам предложат сделать калькулятор с нуля или на основе готового шаблона. Я выберу самостоятельную сборку.

Подписи над блоками тоже можно скрыть: мне они не нужны. Просто подпишу сами галочки.

Над каждым блоком можно добавить картинку: нахожу первые попавшиеся готовые иконки в поисковике. Думаю, если использовать свои фото или любые большие и не квадратные картинки, их лучше будет предварительно обработать в условном Paint или Photoshop.

После добавления картинок лучше выровнять элементы относительно друг друга по вертикали.

Можно добавить текстовые поля с пояснениями для клиента (“Текст”) и поля сбора контактов: в настройках поля можно выбрать, какие данные мы собираем (почта, телефон, время и т.п.), будет ли поле обязательным, а также задать свои подписи-подсказки для заполнения.

В настройках кнопки также можно настроить прием оплаты, указав данные “Яндекс.Кассы”, или задать текст email или SMS-сообщения для клиента (например, высылать ему промо-код после заполнения формы).

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

Дальше проверяем отображение и работу на разных устройствах в режиме “Превью”. Теперь остается лишь получить код для сайта.

Отзывы

Мнение представителя веб-студии, Елена: «Сначала было непонятно, почему одни параметры надо идти настраивать во вкладку «Формула», а другие, почти такие же – в «Дизайн» (речь о настройке ползунка). Но потом привыкаешь. Из плюсов – есть возможность выводить несколько вариантов окончательного расчета: например, цена со скидкой и без. У других конструкторов калькуляторов такого не замечено.

В целом, все красиво, удобно, хотя не хватает опции автоматической загрузки из прайс-листа — в идеале, как это делает Mailchimp».

Мнение фрилансера, Владимир: «В целом, удобный и красивый интерфейс и современный вид элементов. Работа заняла около 15 минут».

2. CalcCreator

Бесплатная версия: бессрочная, с ограничением на использование платных бизнесовых (добавление файла и т.д.) и дизайн-функций.

Платная: работает по принципу подписки на 1 аккаунт, независимо от числа созданных калькуляторов. Месячная подписка стоит — 795 рублей, при оплате на три месяца можно получить скидку 10%, при оплате на полгода — 20%. Если вы перестанете оплачивать тариф, калькуляторы продолжат работать без платных опций.

УТП: возможность прикреплять файлы и редактировать логику калькулятора, используя свой код. Также вы можете переехать с сервиса, забрав с собой код калькулятора.

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

Работа с калькулятором

Интерфейс напоминает AutoCAD или Photoshop. Левое меню содержит элементы калькулятора. Первым делом задаем границы рабочего поля (серая область по центру) и начинаем кидать в него элементы.

При добавлении элементов появляется правое меню — оно отвечает за настройки дизайна: то есть, наполнение правого меню будет меняться в зависимости выбранного поля. В развернутом виде меню огромно — часть настроек будут скрыты в выпадающих списках.

Попробуем добавить картинку. Сервис не дает перетаскивать элементы, чтобы поставить их рядом, — но отчасти это можно выправить в настройках правого меню в пункте “Расположение”.

Добавим место для текстового описание. На примере этого поля посмотрим, как работают настройки ширины.

Чтобы поменять размеры элемента, задаем нужные значения в пунктах “Ширина” и “Высота” в правом меню — значения лучше оставить в %. В этом же меню есть настройки фона, шрифтов и отступов (в пикселях) — отступами можно двигать элементы влево-вправо и отбивать друг от друга по вертикали.

Тут нас ждет облом… Дизайн-шаблоны элементов доступны только на тарифе. В бесплатной версии остается играться со шрифтами и цветом фона. Либо править CSS вручную.

Продолжим работу так. Добавляем кнопку: поменять надпись на ней можно в пункте “Данные” в правом меню.

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

Посмотрим, что скажут наши тестеры.

Отзывы

Мнение представителя веб-студии, Елена: «С первого взгляда интерфейс похож на Axure [программа для прототипирования сайтов и приложений, прим.] – но как оказалось, кроме перетаскивания элементов из левого меню на рабочую поверхность между системами нет ничего общего. Возник вопрос, а как это настраивать? Справа открывается куча настроек, но это все дизайн. А как же данные? Только через несколько минут до меня дошло, что ввод данных находится в самом низу этого меню, где-то за первым экраном моего монитора. Сделав несколько попыток настроить калькулятор, я сдалась и пошла искать в библиотеку у них же на сайте – вдруг найдется что-то для меня подходящее?

Сам интерфейс показался недружелюбным, поэтому я быстро бросил попытку создать что-то с нуля, а пользоваться шаблонами мне было запрещено по условиям тестирования».

Мнение предпринимателя, Мария: «Я выбрала шаблон, но не поняла, как редактировать его. Хотя понятно, что в целом конструктор интересный, много возможностей.

Промежуточный результат тестирования

Проекты с Запада

Из-за языкового барьера наши тестировщики в сравнении не участвовали.

3. Formsite

Бесплатная версия: ограничена 10 заявками, отправленными через калькулятор. Сам период, через который сгорит лимит, не установлен.

УТП: самый большой выбор элементов и дизайнов, самый большой набор готовых интеграций среди всех сервисов в обзоре.

Работа с калькулятором:

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

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

Задаем значения и нажимаем “Сохранить”.

Теперь проверим готовый блок Email Address, перетащив его в область сбоку от поля для имени. Как и uCalc, Formsite позволяет ставить блоки рядом.

Наверняка вы спрашивали себя: “А где же кнопка?”

4. Calculoid

УТП: проект позволяет отправлять данные заказов в любую CRM или иную систему автоматизации бизнеса по API.

Работа с калькулятором:

На следующей странице достаточно заполнить верхнюю строчку (название калькулятора) и нажать Save: остальные поля нужны для поиска по общей базе шаблонов, их можно оставить нетронутыми.

Если мы хотим поставить несколько элементов рядом, для начала их надо “ужать”, просто потянув за границу каждого.

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

Собрав костяк формы, переходим к ее редактированию: если нажать на “карандашик” у любого элемента, откроется общее меню со списком полей и их настройками.

Продолжаем переименовывать поля, меняя Name и Hint в настройках каждого элемента.

Затем задаем цены: для полей, которые войдут в формулу, задаем Option Value во вкладке Option у нужного элемента.

Источник

• ← Как сделать калькулятор схемы
• Как сделать калькулятор через паскаль →