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


Обозначение слова калькулятор корнями выходит от латинского «calculo», в переводе «считаю». Еще есть латинское обозначение «calculus», которое переводится, как «камешки». Отсюда и пошло использования этих выражений в подсчитывании. Несколько лет назад мы пользовались переносными электронными расчетными машинками-калькуляторами для выполнения неких математических расчетов. Прошло немало времени, прежде чем нынешнее поколение подошло к возможностям в виртуальном мире создавать расчетные и вычислительные системы для разных применений.

Что представляет собой онлайн-калькулятор

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

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

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

О применении и особенностях калькулятора для сайта

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

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


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

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

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

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

Существуют и сложные процессы программирования калькулятора, где требуется дополнительные сервисные установки.


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

Использование FormDesigner

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


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

Для создания калькулятора в конструкторе FormDesigner не требуется специальных знаний или установки дополнительных программ, просто нужно выбрать понравившийся шаблон, выполнить набор заданных данных, получив код, скопировать и установить готовый калькулятор в сайт. Можно проводить редактирование или вносить изменения в режиме реального времени, все данные хранятся в специальном блоке сервиса FormDesigner.ru. То есть если в будущем понадобится внести какие-то изменения в код калькулятора, достаточно будет зайти на сайт и в онлайн-режиме внести необходимые правки. Для подключения к системе нужно войти в личный кабинет и выполнять заданную настройку калькулятора следуя инструкции по настройке.

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

formdesigner.ru

Обзор бесплатного онлайн конструктора веб-форм и калькуляторов для сайта — FormDesigner

Приветствую читателей блога Вебсовет! Сегодня у меня в обзоре услуги мегаполезного сервиса — онлайн конструктора веб-форм и калькуляторов для сайта FormDesigner.


Создай любую веб-форму всего за 3 минуты!

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

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

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

Почему стоит выбрать конструктор веб-форм FormDesigner

  1. 28 типов элементов веб-форм. Функционал конструктора позволяет создавать веб-формы любой сложности: от стандартной подписки на email-рассылку до полноценных многостраничных анкет.
  2. 8 тем оформления. Вы можете настроить уникальный дизайн для страницы, формы, заголовков, элементов и кнопок.

  3. Drag & drop интерфейс. Добавляйте поля для ввода имени и контактных данных, чекбоксы, выпадающие списки и кнопки для загрузки файлов, просто выбирая нужные элементы в меню и перетаскивая их в рабочую область с помощью мыши.
  4. Многостраничные веб-формы. В случае, когда в веб-форме используется большое количество элементов, целесообразно разделить их на несколько страниц. Создаются они в один клик.
  5. Веб-формы с возможностью загрузки файлов. Вы можете создавать веб-формы с функцией загрузки текстовых и графических файлов, изображений, видео, музыки.
  6. Свой собственный поддомен для форм. Вы сможете разместить готовую форму на своем поддомене, и она не будет содержать никаких ссылок на FormDesigner.
  7. E-mail и SMS уведомления. FormDesigner умеет отправлять уведомления не только по электронной почте, но и по SMS. Даже если вы в данный момент находитесь далеко от компьютера, вы моментально узнаете о новых ответах.
  8. Интеграция с CRM системами. Собирайте стандартизированную базу клиентов и автоматизируйте процесс работы с ними.
  9. Интеграция с сервисами E-mail рассылок. Интегрируйте свои веб-формы с сервисами e-mail рассылок и увеличивайте базу своих клиентов.
  10. Безопасность. Для предотвращения несанкционированного доступа и защиты ваших данных FormDesigner использует несколько методов защиты: доступ по паролю, 2 вида капчи, HTTPS-шифрование.

  11. Логические правила и ветвления. В разделе «Логика» вы можете добавлять и редактировать правила, которые определяют, что произойдёт, если пользователь введёт определённую информацию или совершит какое-то действие.
  12. Отчеты и графики. В разделе «Статистика» для вас собраны простые и удобные инструменты для формирования базы клиентов и отслеживания их активности. FormDesigner автоматически подтягивает все данные из ваших веб-форм и создаёт подробные отчёты по каждой из них.
  13. Калькулятор и онлайн платежи. Вы можете значительно расширить функционал своего сайта, добавив онлайн-калькулятор и форму приема онлайн-платежей, созданную при помощи конструктора FormDesigner.
  14. Многоязычность. Конструктор поддерживает многоязычность, поэтому вы можете настроить перевод для всех сообщений в форме.

Интеграция веб-форм от FormDesigner с другими сервисами

Интеграция веб-форм от FormDesigner с другими сервисами

Подробнее стоит остановиться на интеграции веб-форм от FormDesigner со сторонними онлайн сервисами.

В первую очередь это, конечно же, сервисы e-mail и sms рассылок. Вы сможете легко интегрировать свои веб-формы с различными сервисами e-mail рассылок и увеличивать базу своих клиентов. На сегодняшний день это такие популярные сервисы как UniSender, MailChimp, GetResponse, SendPulse и др.


Вы можете спросить: в чем принципиальное различие веб-форм от самих этих сервисов и веб-форм от FormDesigner?

Отвечаю: подключив любой из этих модулей к своей веб-форме, вы получаете двойной профит. Пользователь, заполнивший форму, попадает не только в подписной лист выбранной службы почтовой рассылки, но и в систему статистики FormDesigner.

Вторая мегаполезная фишка — интеграция с CRM системами.

(CRM-система, от англ. Customer Relationship Management) — программное обеспечение, которое автоматизирует взаимодействие с клиентами, что повышает уровень продаж, оптимизирует маркетинг и улучшает обслуживание клиентов. Система сохраняет информацию о клиентах, историю взаимоотношений с ними, улучшает бизнес-процессы и последующий анализ результатов.

Вы можете легко интегрировать ваши веб-формы от FormDesigner в такие CRM сервисы, как amoCRM, Мегаплан, Битрикс24, FreshOffice и др.

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

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


Интеграция веб-форм FormDesigner в CRM сервисы

Далее вы сможете легко создавать сделку, перейдя во вкладку «Сделка». Здесь вы выбираете этап сделки (воронку продаж), задаете название сделки и бюджет. Можно добавить теги и примечание. Если вам нужны дополнительные параметры сделки, то вы можете добавить любое значение.

Как видите, возможностей для ведения эффективного бизнеса масса.

Ну и какой электронный бизнес может сегодня обойтись без онлайн систем приема платежей? У FormDesigner с этим также полный порядок.

Вы легко можете привязать к своей веб-форме модуль «Платежный терминал» и принимать платежи через такие платежные системы как: Робокасса, Интеркасса, WebMoney, LiqPay, PayPal и Яндекс.Касса.

Подробнее об интеграции FormDesigner с различными сервисами вы можете почитать здесь.

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

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

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


К примеру, захотел человек купить кондиционер, а не знает, с чего начинать. Понятно, что какой попало кондиционер он покупать не станет и захочет определиться с размерами, мощностью и пр.

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

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

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

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

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

Кроме того, в онлайн-калькуляторе создана функция возможности округления чисел, ограничения максимального и минимального значения, а также логические условия.

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

Тарифные планы конструктора веб-форм и калькуляторов для сайта — FormDesigner

Как я уже отметил в начале обзора, вы можете воспользоваться услугами онлайн сервиса по созданию веб-форм и калькуляторов для сайта FormDesigner абсолютно бесплатно. При этом вы сможете создать 3 веб-формы с максимальным количеством элементов формы — 10.

На бесплатном тарифе Free есть также ограничение на получение заполненных веб-форм в течение месяца. Здесь вы сможете получать до 100 заполненных форм.

Если вам нужно больше, то можете воспользоваться одним из трех платных тарифов: Basic, Gold и Platinum.

Тарифные планы конструктора веб-форм и калькуляторов для сайта — FormDesigner

Цены достаточно демократичные, от $5.45 до $10.99 в месяц. Кроме того, на платных тарифах вы также получаете в свое распоряжение выделенное место на диске. Оно необходимо для размещения и хранения файлов, загруженных через ваши формы.

При оплате от 3 месяцев и выше действуют скидки. Чем больший период вы оплачиваете, тем большую скидку получаете. Например, оплата за 3 месяца сразу дает скидку в 5%, а за год — 20%.

Также для всех платных тарифов действует бесплатный тестовый период 7 дней.

Выводы

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

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

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

Надеюсь, я вас заинтересовал. Удачи!

www.websovet.com

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

Создать калькулятор бесплатно

Проект находится в бета-режиме, это означает, что в процессе работы с конструктором могут возникать некоторые ошибки. Потому мы будем крайне признательны за вашу наблюдательность и фидбэк. Обо всех неполадках можно смело сообщать на нашем форуме. Самым активным тестировщикам – приятные бонусы в рамках сайтов uCoz или uKit! 🙂

Как это работает?

Всё предельно просто: у вас есть несколько областей – для работы с дизайном калькулятора и с формулами, в соответствии с которыми производятся необходимые расчеты.

Чтобы исключить потерю информации, автоматическое сохранение происходит каждые 10 секунд. Информация также сохраняется, если внезапно закрыть вкладку с конструктором.

Доступен быстрый предпросмотр получившегося результата и настройка оплаты услуги пользователем прямо через калькулятор (на данный момент только через Яндекс.Кассу).

Что дальше?

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

2. Статистика и аналитика. Безусловно, в настоящее время буквально каждый клик на сайте (или сама мысль о клике) должны быть посчитаны и учтены. В скором времени мы предоставим администраторам такую возможность!

3. Темы и цветовые схемы. Почти готово, добавим уже в ближайшем обновлении!

4. Интеграция. В наших планах, конечно же, с самого начала заложена интеграция инструмента uCalc сперва в систему uKit, а затем и в uCoz. По вопросам сотрудничества с другими CMS мы также открыты для предложений.

Перейти к созданию калькулятора

blog.ucoz.ru

Где можно использовать калькулятор?

  • На сайте. Калькулятор или форма повысят привлекательность сайта и позволят клиентам произвести расчет товара или услуги.
  • В социальных сетях. Если у вас нет сайта, но есть страница или группа в соц.сетях, то можно создать приложение с калькулятором.
  • В мессенджерах. Поделиться ссылкой на калькулятор в личной переписке очень просто.

Для кого сервис?

uCalc для предпринимателей, которые хотят:

  • увеличить количество заявок и продаж
  • экономить время и не переплачивать
  • повысить уровень обслуживания клиентов
  • получать готовые заявки на email и sms
  • принимать оплаты прямо через калькулятор
  • позволить клиенту быстрый расчет товара/услуги

В каких CMS работает?

Калькуляторы и формы будут работать абсолютно на любой CMS и облачной платформе, где можно вставить HTML-код.

Преимущества

Визуальный конструктор — добавление виджета и любого элемента происходит технологией drag-and-drop.

 

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

 

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

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

 

Результаты вычислений — выдача нескольких результатов расчета, например, цены со скидкой и без расчет, а также использования расчет любой валюты или единицу измерения: вес, размер, объем.

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

 

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

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

 

Цветовые схемы и темы оформления — позволяют быстро настроить дизайн калькулятора под свой вкус.

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

 

Прием заявок через калькулятор — вы можете принимать готовые заявки от своих клиентов на email и телефон и отправлять им результаты расчетов на email и sms

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

 

Инструменты аналитики — в калькуляторах и формах можно подключить статистику Яндекс.Метрика и Google Analytic, а также добавить к кнопкам цели.

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

 

Прием оплат через калькулятор — через калькулятор можно не только принимать заявки на email и sms, но и получать оплаты через Яндекс Кассу, Яндекс Деньги и PayPal. 

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

Какие виджеты используются

В uCalc используется большое количество виджетов:

  • выпадающий список
  • ползунок
  • галочки
  • флажки
  • кнопки
  • поля
  • картинки
  • текст
  • вставка HTML кода

 

Готовые шаблоны

В сервисе есть большое количество готовых шаблонов калькуляторов и форм для разных сфер бизнеса:

  • Автосервис
  • Строительство и ремонт
  • Служба доставки
  • Ресторан или кафе
  • Бытовая техника
  • Мебель и интерьер
  • Недвижимость
  • Экономика и финансы
  • Клининговые услуги
  • Красота и здоровье
  • Спорт и фитнес
  • Организация мероприятий

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

Примеры создания калькуляторов

В конструкторе калькуляторов uCalc можно создать абсолютно любой калькулятор или форму, например: 

 

Калькулятор расчета ипотеки

 

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

Калькулятор расчета строительства дома

 

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

Калькулятор расчета ОСАГО

 

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

Установка калькулятора на сайт

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

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

 

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

Все еще собираетесь создать калькулятор или форму и не знаете как? 

Создать калькулятор

unetway.com

uCalk — простое решение для бизнеса

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

Заказ пиццы на онлайн калькуляторе 

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

На каких интернет-ресурсах можно использовать калькуляторы и формы от uCalk

Калькуляторы и формы легко интегрируются в сайт и совместимы с WordPress, uCoz, CMS, uKit и прочие платформы. Данное решение легко реализовать на таких ресурсах в сети интернет:

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

Какие бизнес-процессы оптимизирует конструктор форм для сайта

Благодаря uCalk любой предприниматель может сам создать калькулятор для сайта или форму для связи и интегрировать данные функции на своём интернет-ресурсе может повысить эффективность таких бизнес-процессов:

  • Повысить число заявок от клиентов и соответственно увеличить уровень продаж;
  • Улучшить качество обслуживания клиента;
  • Существенно уменьшить время на заказ от клиента и его обработку заказчиком;
  • Получать заявку можно на электронный почтовый ящик или мобильный телефон;
  • Сэкономить время и деньги.

Заказ готового калькулятора или формы

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

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

Преимущества калькуляторов и форм uCalk

Сервис uCalk обладает рядом преимуществ для пользователя. Среди них:

  • Сервис абсолютно бесплатный. Можно создать калькуляторы и формы не потратив ни одной копейки;
  • Визуализация. Все добавляемые элементы и виджеты не требуют специальных знаний и создаются исключительно в визуальном режиме;
  • С помощью сервиса есть возможность создать калькулятор, который будет просчитывать формулы различной сложности и выдавать конечный результат в том виде, который пожелает задать разработчик, например: цена с учётом скидки или без неё, валюта, вес, объём, длина или любой другой показатель.
  • Наличие различных цветовых схем и тем оформления позволят оперативно создать свой неповторимый дизайн;
  • Возможность интегрировать аналитические функции Яндекс и Гугл в любую форму или калькулятор;
  • Огромное количество готовых шаблонов под любой вид бизнеса и предпринимательской деятельности позволит очень быстро внедрить уже проверенное эффективное решение на свой сайт.
  • С помощью форм можно не только принимать обратную связь и заявки на почту или телефон, но и получать оплату на банковскую карту или электронные платёжные системы (Яндекс.Деньги, PayPal, Qiwi и другие);
  • Наличие большого количества различных виджетов (флажки, выпадающие списки, ползунки, картинки, галочки и прочие) будут позволять быстро принимать заявки и сделают сайт более привлекательным.

Создай эффективный сайт вместе с uCalk

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

babosik.ru

Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.

Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет. Вот и возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.

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

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

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

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

Пишем свою адаптивность

Лайфхак: как упростить формулы до азбуки

Чистим код с GULP (а не тем, о чем вы могли подумать)

Есть ли жизнь после жизни?

Начиная проект, мы обсуждали довольно хардкорные идеи, но в итоге пришли к drag-n-drop интерфейсу сборки, плюс админке, в которой человек может хранить и настраивать свои калькуляторы.

В начале было пустое поле. Регистрируясь на сервисе впервые, человек действительно видит пустую страницу с единственной кнопкой добавления нового проекта-калькулятора.

В будущем на этой странице будут появляться снимки-ссылки на калькуляторы пользователя, вот как тут:

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

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

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

Сам интерфейс создания калькулятора устроен похоже с ЛК — есть большое пустое поле, на которое можно добавлять элементы из боковой панели. Для старта мы выбрали 8 элементов. Пять отвечают непосредственно за калькулятор — это ползунок, выпадающий список, галочка, текстовое поле (для сбора почт, адресов и т.д.) и переключатель. Еще три — за привлекательность (картинка) и опцию заказа — текстовый блок и кнопка. Самым востребованным элементом из всех оказался ползунок.

Конструктор калькулятора для сайта
Сначала для создания ползунка мы выбрали расширения jQuery Scrollbar, но штука странно себя вела на мобильных. Поэтому мы взяли и модифицировали расширение JQuery-Range-Slider. Остальные элементы написали и стилизовали сами

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

Этот момент стал одним из самых хлопотных при отладке. Но зато сейчас запись процессов, происходящих на странице, когда человек перетаскивает элемент в калькулятор (это самый ресурсозатратный момент), выглядит так:

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

Мы максимально порезали обработчики, оставив только необходимый минимум. С оптимизацией на клиентской части нам здорово помог инструмент Timeline из Google Chrome Developer Tools.

Исходно все элементы хранятся в объекте FIELDS — у каждого есть типовой HTML-шаблон и список опций. После перетаскивания элемента в рабочую область, нужные опции прилетают с сервера и подставляются в шаблон — например, на кнопку навешены отправка информации о заказе владельцу и клиенту: по почте через наш сервер, либо по смс — пока через API SmsSimple, но мы ищем другой сервис (и будем рады рекомендациям).

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

Чтобы подставлять опции, к прототипу строки мы написали свой метод Signe. Работает он так:

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

При этом мы стараемся защититься от вставки исполняемых кодов в шаблон: прежде всего на стороне сервера удаляются теги <скрипт>, а основная защита построена на экранировании спецсимволов + эскейп тегов.

Drag’n’drop по-своему. Идея «бери больше — кидай дальше», на наш взгляд, это самый удобный способ сборки чего бы то ни было для обычного пользователя. Ну хотя бы потому, что красиво.

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

Конструктор калькулятора для сайта
Cетка невидимых пользователю точек

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

Что это дает? Пользователь сразу может выбрать между таким:

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

И вот таким вариантом расположения элемента:

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

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

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

Конструктор калькулятора для сайта
Для создания самих визуальных эффектов при сборке калькулятора мы использовали jQuery UI и Animate.css

Абстрагируемся от системы мер и весов. Поскольку решение хотелось сделать универсальным и простым, мы отказались от дополнительных полей, в которых при создании калькулятора человек бы выбирал метры, граммы или рубли. Условные обозначения можно вписать — но чисто для удобства и ориентира. Для всех текстовых элементов мы использовали движок Medium Editor – очень удобный и простой текстовый редактор.

Чтобы доказать, что конструктор подходит для чего угодно, мы наделали разных примеров. А один из примеров наделал шума среди первых тестеров:

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

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

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

Конструктор калькулятора для сайта
За тему с ёлочками спасибо Владимиру Гынгазову, автору канала “Adobe Muse по-русски”

Сама реализация загрузки картинок сделана через FileSystem API&File API — весь процесс отлично описан в этой статье.

«А поиграться с…?» Логично дать пользователю возможность подстроить цвета текстов, кнопок, фона и т.д. под цвета сайта. Для вызова и создания цветовой палитры мы использовали виджет Spectrum.

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

Хранение данных и автосохранение. Данные о клиентской части калькулятора хранятся в формате JSON. Вы можете увидеть их структуру, просто написав в консоли SAVER.json на сервисе.

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

Автосохранение происходит при каждом действии, если в калькуляторе есть активность. Изменения параллельно сохраняются и в DOM, причем каждый раз мы проверяем:

  • Есть ли в JSON все данные из DOM.
  • Есть ли в DOM все данные из JSON.

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

Превью. Чтобы не затрачивать ресурсы браузера клиента, мы решили не анимировать интерфейс предпросмотра с помощью jQuery — поскольку с анимацией отлично справляется и CSS3: достаточно поменять класс в корне интерфейса, и у области просмотра изменится ширина и наружное оформление, стилизованное под смартфон и планшет.

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

Само создание адаптивной версии калькулятора стало отдельной песней.

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

Т.к. структура калькулятора хранится в JSON, у нас есть родительский массив со строками, а в каждой строке — массив ячеек. Помимо этого, в ячейке есть массив суб-строк (и суб-ячеек), чтобы внутри было не одно поле, а несколько. Структура ячеек показана ниже:

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

У калькулятора есть родительский блок со стилем display: table, внутри у него есть table-row и table-cell, соответственно. Сам калькулятор отрисовывается на сайте во фрейме. Внутри фрейма размещены стили для адаптации — и когда фрейм становится достаточно узким, калькулятор без изменения HTML-сетки перебрасывает поля на новые строки. Сделано это с помощью изменения стиля display: если на широком калькуляторе это table-cell, то на узком становится block, и наше поле оказывается на новой строке.

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

Исходно-десктопный вид калькулятора зависит от ширины контейнера, в котором он находится, а калькулятор стремится показать в одной строке как можно больше полей. При сужении экрана функция, которая перестраивает сетку, проходит по всем строкам калькулятора, и если в строке есть «лишние» ячейки, ниже создается новая строка.

  • Если сам сайт с калькулятором адаптирован под мобильные устройства, контейнер с калькулятором будет занимать всю ширину устройства без масштабирования.
  • Если же сайт не адаптирован под мобильные устройства, калькулятор будет отображаться в меньшем масштабе — а его вид повторять вид для ПК.

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

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

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

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

Переменные начинаются с буквы “A”. Если полей больше, чем букв в латинском алфавите, к имени переменной добавится еще одна буква: “AA” и так далее. Каждая буква связана с числовым id конкретного поля в калькуляторе. Найти готовое решение для преобразования числа в латинские буквы и комбинации букв нам не удалось. Поэтому мы написали следующий метод:

DAT.varName(9) // I
DAT.varName(39) // AM
DAT.varName(9650215) // UCALC

Будем рады, если он вам пригодится (с вопросами можно стучаться к condor-bird).

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

То есть, пора было отрезать ломоть калькулятор от сервиса. Встал выбор между двумя путями:

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

Но быстрый путь был отвергнут — потому что он замедлял загрузку: мы получили бы 1959 килобайт, 269 из которых заняли бы все CSS-ки, используемые в сервисе. А ведь одно из главных требований к виджету на сайте — чтобы он грузился быстро.

И правильным. Тут мы пошли к GULP — чтобы обрезать все лишнее, вроде переноса строк, и собрать один минифицированный файл с максимально чистым кодом. Почему GULP? На то есть важная причина — у нас был 41 файл (и, соответственно, 41 запрос к серверу), а мы хотели уместить все в один запрос. И мы получили то, что хотели.

Конструктор калькулятора для сайта
Это наш дефолтный шаблон. Была скорость загрузки курильщика

Конструктор калькулятора для сайта
Стала скорость загрузки здорового человека

Теперь мы оставляем от 140 до 180 килобайт — в зависимости от числа полей. Для каждого типа поля есть две версии: короткая и вдвое короче — для стороннего сайта.

А что насчет скорости исполнения скрипта, спросите вы?

Конструктор калькулятора для сайта
Это огромный калькулятор расходов на свадьбу, созданный реальным пользователем. Было так.

Конструктор калькулятора для сайта
Тот же проект. Стало так

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

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

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

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

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

Поэтому для каждого встроенного калькулятора мы делаем две версии:

  1. Опубликованную — ту, что непосредственно встроена на сайт.
  2. Редактируемую — ту, которую можно открыть и начать править в личном кабинете.

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

Именно для этого в системе присутствует большая зеленая кнопка «Сохранить» — пока вы её не тронули, мы не переносим на сайт изменения, сделанные в версии для редактирования, а просто запоминаем их через автосохранение.

habr.com

Настройка дизайна калькулятора

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

Размеры и цвета кнопок и текстовых элементов можно менять, просто кликнув на них. Вскоре добавится возможность менять цвет фона и элементов калькулятора, а также выбирать шрифты.

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

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

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

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

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

Чтобы заранее проверить, как калькулятор будет выглядеть на разных экранах, достаточно переключиться во вкладку «Предпросмотр».

Настройка формулы

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

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

Подключение оповещений и оплаты

Все эти опции доступны в настройках кнопки.

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

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

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

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

Для подключения оплаты достаточно указать данные аккаунта в «Яндекс.Кассе» и выбрать, из какого поля калькулятора будет забираться сумма к оплате.

Установка калькулятора на страницу сайта

Как только калькулятор готов, нажимаем кнопку «Сохранить» — и получаем готовый код калькулятора.

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

Остается зайти в админку своего сайта и выбрать страницу, на которую нужно установить калькулятор. Переводим поле для ввода контента в режим Text, вставляем код, а затем публикуем страницу.

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

Калькулятор отобразится на сайте.

Внесение изменений в калькулятор, установленный на сайте

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


Уже пробовали конструктор uСalc? поделитесь своим опытом в комментариях!

n-wp.ru

uCalc – бесплатный конструктор калькуляторов для сайта

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

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

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

Таким образом, uCalc открывает обалденные возможности для бизнеса, особенно для малого ввиду простоты и бесплатности. Везде, где можно считать какие-то величины по фиксированным мерам и стоимости, пригодится калькулятор. Нет подходящей формы для сбора заявок или анкетирования? Такую тоже можно собрать в uCalc. Калькулятор товаров и услуг – находка, подобных сервисов довольно мало. Заказывать разработку у фрилансеров дорого. Да и не нужно. Возьмите готовое бесплатно.


 

uCalc – кому и зачем он может быть полезен?

Сайт-визитка – верный помощник для бизнеса. А что если её дополнить возможностью расчёта стоимости тех или иных продуктов в зависимости от набора поставки?

Например, вы делаете мебель либо владеете автосервисом. Почему бы не дать возможность посетителям быстро посчитать стоимость столика с резными ножками такого-то дерева или замены масла/покрышек на Toyota Camry, допустим?

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

Описание услуг и прайс – это хорошо. Но калькулятор использовать гораздо удобнее! Человек до совершения звонка уже будет знать, сколько денег нужно готовить. Его звонок/визит к вам будет целенаправленным, взвешенным. Он знает, чего ожидать, поэтому опасений меньше, а доверия немного больше.

Примеры калькуляторов для сайта от uCalc

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

В uCalc вы сами с легкостью сможете создать и разместить на сайте онлайн калькулятор для расчета стоимости:

  • вызова такси, грузоперевозок;
  • доставки товаров, бытовой техники, еды и пиццы;
  • строительства дома, дачи, аренды квартиры;
  • услуг ремонта квартиры, кровли, укладки ламината, площади пола;
  • установки пластиковых окон, натяжных потолков;
  • уборки помещения;
  • процентов по кредиту, ипотеке, валюты;
  • полиса страховки КАСКО;
  • и другие, которые сможете придумать.

Теперь давайте подробнее рассмотрим все возможности uCalc.


 

Функционал uCalc

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

Зарегистрироваться на сервисе можно через соцсеть или email/пароль. После входа в аккаунт вам предложат собрать калькулятор самостоятельно или использовать шаблон. Для ознакомления лучше подходит 2 вариант. Все заготовки разбиты на 12 категорий (недвижимость, бытовая техника, служба доставки, красота и здоровье и т. д.).

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

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

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

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

Панель управления состоит из набора элементов калькулятора (список, ползунок, флажок, поле, текст, картинка, кнопка) и рабочей области. Последняя функционирует в двух режимах – «Дизайн» и «Формула». В первом вы сможете выстроить структуру калькулятора и настроить его внешний вид, а во втором – задать значения стоимости для активации тех или иных опций, сложить формулу расчета.

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

Вы можете выбрать одну из 4 тем оформления калькулятора (Minimal, Material, Bootstrap, Default), цельную цветовую схему либо настроить цвет фона отдельно. В процессе настройки вы можете посмотреть на текущий результат. Дизайн калькулятора можно подогнать под любой сайт, это предельно просто делается. Калькулятор автоматически адаптируется под размер любого экрана.

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

Для создания формул можно использовать множество переменных, в том числе, выражающие различные условия – «и», «или», «если», «то». Это позволяет создавать несколько вариантов формулы, разветвления расчётов, зависящие от выбора клиента. Вы можете на своё усмотрение обозначать поля, обязательные для заполнения. Также в наличии встроенный приём платежей прямо из формы калькулятора, реализованный средствами «Яндекс.Кошелёк» (подробнее читайте здесь).

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

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

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

Иногда калькулятор получается столь длинным, что способен отпугнуть посетителей своим видом. Его высоту можно уменьшить, используя опцию пошагового расчёта – Quiz (Квиз): вид формы в виде теста, опроса, викторины, которые используются в маркетинге для получения клиентов с сайта, лендинга или социальных сетей. Вы создаёте кнопки «Далее» и «Назад» для распределения опций калькулятора на несколько экранов, которые можно пролистывать (инструкция). Это визуально снижает сложность формы и увеличивает степень лояльности клиентов к её заполнению. Для предотвращения отправки череды заявок с одного устройства в uCalc можно включить антиспам защиту.

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

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

Калькулятор интегрирован в популярные CRM Битрикс24 и amoCRM, его можно добавить в качестве бесплатного приложения. Также есть официальный плагин uCalc для WordPress. В соответствии с буквой закона вы можете подключить соглашение на обработку персональных данных (есть готовый шаблон). Кроме того, uCalc имеет несколько локализаций, среди которых английская и даже японская!

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

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

Примеры онлайн-калькуляторов для сайта

Для понимания того, как это все выглядит и работает покажем вам пару живых примеров калькуляторов:

Вы можете вводить промо-коды путём использования виджета «HTML-код»: клиент при достижении выбранной вами суммы заказа и отправке формы заказа получит промо-код, дающий право на какой-нибудь бонус – скидку, участие в акции, бонус или ещё что-нибудь полезное, заготовленное вами. Это позволяет усилить маркетинговую составляющую вашего предложения, а также индивидуально распределять скидки между покупателями, персонализировать условия совершения покупки для клиентов. Вот подробная инструкция по настройке промо-кодов в uCalc.

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

Также вы можете прикреплять в форму файлы объёмом до 5 Мб. Для этого необходимо выбрать тип содержимого «Файл» в виджете «Поле». Возможно прикрепление множества расширений файлов: таблицы, текстовые документы, презентации, архивы, изображения, медиа-файлы и другие вариации в широком ассортименте форматов (подробное описание здесь). Данная функциональность доступна только на платных тарифах (на бесплатном этого поля в интерфейсе не увидите).


 

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

После регистрации и/или входа в систему вы сможете создать новый проект либо продолжить достраивать уже начатый. Итак, отсюда поподробнее:

  • Выбираем шаблон. Можете начать создание калькулятора с чистого листа, но проще будет взять заготовку и подогнать её под вашу задачу. Есть формы для заказа такси, подбора мебели, аренды квартир и строительства домов, заказа клининговых и консалтинговых услуг, пиццы и ещё несколько. Если у вас типовая задача, скорее всего, что-то из списка уже подходит. Перед выбором можно предварительно посмотреть форму.
  • Редактирование шаблона. Например, выбрали калькулятор для заказа пиццы. Посмотрите перечень начинок и соусов, добавьте недостающие и уберите лишние. Для этого войдите в режим редактирования пунктов.
  • Редактирование значений полей. Откройте раздел «Формула» и проставьте вашу цену для каждой начинки и соуса. Также можете внести изменения в формулу расчёта стоимости.
  • Настройте дизайн. В хедере формы выберите цветовую схему либо цвет фона формы вручную. Также можно выбрать тему оформления, которая определит общую визуальную стилистику калькулятора.
  • Сохранение изменений и получение кода для вставки. После всех преобразований сохраните прогресс, после чего на экране появится всплывающее окошко с кодом размещения вашей формы. Можете предварительно оценить результат в режиме предпросмотра, что-то поправить, доводя до финальной версии. Код нужно скопировать и разместить на странице сайта. Инструкция для разных движков, социальных сетей и почтовых служб в комплекте есть – следуйте по шагам, и у вас точно всё получится.

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

Кстати, если нужно сделать чего-то экстраординарного (это реально может быть сложно), в uCalc можно заказать изготовление калькулятора под индивидуальный запрос. Стоит услуга 2500 рублей, выполнит специалист из Divly – эти с результатом не подводят.


 

Преимущества использования калькулятора услуг

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

  1. Вы получите целевые обращения

    • Человек, не планирующий покупку, не станет заполнять данные в калькуляторе и отправлять заявку. Это не просто звонок ради любопытства, клиенты, использующие инструмент, уверены в своём выборе и нацелены на результат сделки. Калькулятор привлекает внимание, человек изучает информацию о товаре и сразу же узнаёт итоговую цену, включая доставку и прочие нюансы. Решение получается взвешенным, обоснованным пониманием сути и стоимости сделки.
  2. Калькулятор гораздо эффективнее обычных форм

    • Устаревшей альтернативой калькуляторам являются прайс-листы и обычные электронные таблицы. Их необходимо скачивать, искать необходимое, подсчитывать стоимость покупки, а потом уже отдельно совершать заказ. Это долго и непродуктивно. Калькулятор совмещает в себе все эти функции, позволяя обрабатывать заявки, платежи, вручать бонусы, рекламировать ваши товары/услуги и ещё при этом улучшать SEO-показатели сайта. Выбор очевиден.
  3. Прозрачное ценообразование и доверие клиентов

    • Калькулятор отсекает возможные переговоры и вопросы о ценах, причём, в деталях. Клиент будет чётко понимать, за что и сколько он платит, окажет больше доверия. Это сэкономит время менеджерам, позволяя сконцентрировать внимание на работе с заказом. Калькулятор необходимо ставить в комбинации с описанием преимуществ компании, отзывами и прочей информацией – клиенты будут подготовленными. Скидки и бонусы подогреют мотивацию.
  4. Калькулятор придаст эксклюзивности вашему бизнесу

    • Клиент прочувствует эффект индивидуального подхода. Он сам сможет выбрать конфигурацию услуги/товара, поиграться с калькулятором, сравнить различные варианты и выбрать, в итоге, оптимальный для себя лично. Он получит свою прозрачно сформированную цену, рассчитанную специально для него. И всё это без непосредственного участия менеджера.
  5. Широкий охват источников трафика

    Калькулятор можно использовать не только на сайте, есть множество других вариантов:

    • по нажатию ссылки, размещённой в социальных сетях Twitter, Facebook, Linkedin и Вконтакте;
    • в популярных мессенджерах Telegram, WhatsApp, Facebook Messenger и Skype;
    • в почтовых рассылках для клиентской базы;
    • переход при клике на кнопку во всплывающем окошке;
    • рекламных кампаниях Яндекс.Директ и Google Adwords.

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

  6. Рост показателей SEO и трафика

    • Калькулятор улучшает поведенческие факторы сайты. Заполняя его, клиенты проводят больше времени на странице, процент отказов (быстрых закрытий вкладки) снижается в разы. Эффект можно усилить грамотным подбором ключевых фраз для страниц, которые содержат калькулятор услуг. Всё это ведёт к увеличению целевого трафика и росту позиций сайта в поисковых системах.

 

Выводы и рекомендации

uCalc – простейший в использовании и мега-удобный конструктор калькуляторов товаров/услуг. Это бесспорно полезный и весьма редкий в своём роде сервис, что придаёт ему дополнительной ценности. Альтернатив очень немного. Обычно такие вещи собирает «знакомый программист» или фрилансер. Теперь искать никого не нужно!

В этом коротком видео объясняются все шаги для легкого создания и установки калькулятора на сайт:

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

uguide.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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