Калькулятор для сайта – быстро и без программиста

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

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

Поэтому установка калькулятора на сайт с услугами крайне рекомендуется. Но здесь всё упирается в работу программиста или использование плагина. Однако всё не так страшно, и можно сделать это самостоятельно, очень просто и для любого сайта, на любом движке или даже вообще без него.

Для этого есть специальные конструкторы, и один из них я рассмотрю. На его основе у меня стоит калькулятор на странице «Услуги», можете посмотреть образец. А как его создать, рассмотрим дальше.

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

Этот сервис даёт возможность создать собственный калькулятор из полей разного типа и задать формулы расчёта. Всё очень просто и выглядит очень даже неплохо. Там есть разные платные тарифы и бесплатный, с некоторыми ограничениями, для простого сайта совершенно не важными – нет возможности прикручивать статистику, отправлять СМС и ограничена отправка писем – 100 штук в месяц. Ну и можно создать только 3 проекта —  калькулятора. Также в бесплатной версии под калькулятором будет небольшой баннер с названием сервиса.

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

Регистрация

Регистрация на сервисе очень простая, даже рассказывать не о чем. Заходите на сайт, жмете «Зарегистрироваться» в правом верхнем углу, вводите имя, почту и пароль и всё. Или заходите через аккаунт соц. сети.

Окно регистрации на сервисе uCalc

На почту, как обычно, придёт письмо со ссылкой для подтверждения. Переходите по ней и подтверждаете свой e-mail.

Окно проекта — калькулятора

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

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

Рабочее окно uCalc

Сверху есть кнопки «Дизайн/Формула». Вы находитесь в режиме дизайна, а формулу мы рассмотрим позже, когда что-нибудь добавим.

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

Вверху слева есть стрелка с названием проекта – его здесь можно переписать на своё, а по стрелке перейти в менеджер проектов. Здесь на бесплатном тарифе можно создать 3 калькулятора и перейти к редактированию любого из них.

Менеджер проектов uCalc

Как видите, пока всё выглядит очень просто. Да и дальше всё будет не сложнее детской игры.

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

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

Всего в редакторе есть такие варианты блоков:

  • Список – здесь можно задать разные варианты чего-нибудь, что можно будет выбрать из раскрывающегося списка. Здесь я впишу разные виды текстов. Указывается и стоимость для каждого варианта.
  • Ползунок – полоска, по которой можно передвигать указатель. Удобно для выбора количества. Я его поставлю для выбора количества символов в статье.
  • Галочка – позволяет создать несколько пунктов, которые можно выбирать по желанию. У меня это будут дополнительные опции – их можно выбирать или нет.
  • Флажок – то же самое, что и галочка, только выбрать можно всего один пункт. Это еще называется радиокнопкой. Поставлю для выбора срочности заказа.
  • Поле – сюда можно что-нибудь написать, например, почту, телефон, сообщение, имя. В настройках этого элемента выбираются разные варианты назначения. Поставлю парочку – для ввода почты и для сообщения.
  • Текст – это просто текстовая область. Её можно вставить, например, для размещения какой-нибудь поясняющей информации.
  • Картинка – для красоты оформления.
  • Кнопка – имеет разные варианты действий в настройках. Поставлю для отправки письма с результатом расчёта – заказчик сразу выберет в калькуляторе, что ему надо, и отправит мне готовый заказ.
  • HTML-код – сюда можно вписать свой код, если есть нужда в этом.

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

Когда вы ставите элемент на место и наводите на него мышку, у него появляется меню, где есть разные кнопочки. Пользуйтесь ими для настройки. Например, у списка есть кнопка для ввода пунктов. Значок с шестеренкой позволяет отключить или включить описания под заголовком, и кое-что еще, в зависимости от элемента.

Элемент "Список" и его настройки
Элемент «Список» и его настройки.

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

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

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

Формула калькулятора для сайта

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

Режим формулы

Обратите внимание — для галочек и флажков цена вводится в двух вариантах –включено и выключено. Например — включено 100, а выключено 0. Выберет человек этот пункт, к общей сумме прибавится 100, выключит – прибавится 0, то есть ничего.

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

У меня считается так:

Формула расчета для калькулятора

Количество символов * стоимость + дополнительные пункты. Вот так у меня получилось:

B*10-10 — это вычисление дополнительных ключевых слов. Если выбрано значение 1, то получится 1*10-10 = 0 и к цене ничего не прибавится. Выбор больше 1 будет каждый раз прибавлять по 10 к результату. Обычная арифметика, разберетесь быстро.

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

Расширенные возможности

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

Отправка сообщения

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

Добавление формы для отправки сообщений

Для первого поля выбираю тип «Большое текстовое». Для второго тип «E-mail адрес» и делаю обязательным – если посетитель его не заполнит, я не смогу ему ответить, так как письмо придет с сервиса uCalc!

Более интересны настройки кнопки – именно она отвечает за отправку письма. Выбираем кнопочку с пальцем для назначения действия и «Оповещение владельца».

Настройка отправки сообщений

На следующем экране включаем переключатель «Оповещать» и выбираем «Эл. почта получателя» — сюда надо вписать свою почту, чтобы получать заявки на неё. Она там по умолчанию подставлена – вы же её указывали при регистрации, но можете вписать другую.

Почта получателя

Здесь же найдите пункт «Шаблон уведомления Email» — здесь можно привести вид письма в нормальный вид. Я сделал вот так:

Шаблон письма

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

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

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

Когда вы нажимаете кнопку «Сохранить», появляется окно с кодом, который просто нужно добавить в нужное место на сайте. В WordPress это можно сделать на любой странице, если перевести редактор в режим «Текст». На любом другом сайте код вставляется прямо в код html страницы или как вставка html-кода.

Код калькулятора

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

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

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

И еще, когда вы вставили код калькулятора на сайт, а потом что-то поменяли или передвинули в макете, код менять на новый не надо – на сайте всё отобразится в измененном виде. Сам код не меняется, он только вставляет калькулятор на сайт, а как вы его там исправляете, это другое дело.

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

Сервис uCalc

Метки

2 комментария

  1. Отличная статья! Написано простым и понятным языком. Знакомые тоже недавно посоветовали этот конструктор, говорят что сейчас в тренде и все его используют. Вот решил тоже попробовать его) Удобно что даже плагин для WordPress есть ru.wordpress.org/plugins/ucalc/ А то я бы совсем не разобрался, как его вставлять.

    1. Спасибо за отзыв, Денис. Да, есть плагин, я про него упомянул. Но и без него всё просто — скопировать код и вставить в нужное место на странице. Но это дело любительское, с плагином удобнее, когда калькуляторов несколько.

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

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

Close