Беглый анализ открытых данных показывает, что ежедневно в среднем 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 килобайт — в зависимости от числа полей. Для каждого типа поля есть две версии: короткая и вдвое короче — для стороннего сайта.
А что насчет скорости исполнения скрипта, спросите вы?
Это огромный калькулятор расходов на свадьбу, созданный реальным пользователем. Было так.
Тот же проект. Стало так
Как видно на картинке ниже, самым тяжеловесным остается текстовое поле — его мы будем оптимизировать дальше, отдавая на сайт только опцию, которую выбрал пользователь (в настройках поля есть выбор между телефоном, почтой, текстом, числовым значением и т.д.). В остальном для каждого калькулятора мы подключаем только используемые модули.
После загрузки на стороннем сайте калькулятор больше не обращается к нашему серверу: все формулы и прочее необходимое зашиты в загруженный на сайте код.
В идеальном случае пользователь собрал калькулятор, получил код для встраивания на сайт — и наступило счастье.
Но установка на сайт не всегда значит, что человек больше не будет трогать готовый калькулятор. Самый очевидный случай, когда требуется внести изменения, — это рост или снижение цены на услугу.
Поэтому для каждого встроенного калькулятора мы делаем две версии:
- Опубликованную — ту, что непосредственно встроена на сайт.
- Редактируемую — ту, которую можно открыть и начать править в личном кабинете.
Именно для этого в системе присутствует большая зеленая кнопка «Сохранить» — пока вы её не тронули, мы не переносим на сайт изменения, сделанные в версии для редактирования, а просто запоминаем их через автосохранение.
habr.com
Инструменты для создания калькулятора
В просторах интернета можно найти бесконечно множество разнообразных реализаций одного и того же вида калькулятора, с использованием разных языков и плагинов. Наша с вами задача состоит создать простой ипотечный калькулятор при помощи средств и языков, которые вы уже знаете. К ним относятся html, css и их встроенный инструментарий.
Ипотечный калькулятор связан с расчетом погашения кредита, взятого на покупку жилья. Поэтому в программе должны быть предусмотрены текстовые поля ввода и кнопки для отправки и очистки введенной информации. Также признаком хорошего тона считается замена простого текстового поля с вводом данных вручную на выпадающий список, если нужные пункты заранее известны.
Главными тегами для написания калькулятора являются <input> и <form>.
Элемент <input> используется для создания различных важных объектов, позволяющих осуществлять ввод, редактирование и обработку данных.
При помощи данного тега на странице вашего веб-сервиса можно создать:
- простое текстовое поле (text)
- элементы для выбора нескольких параметров одновременно (checkbox)
- поле для ввода пароля (password)
- специальное скрытое поле (hidden)
- элементы для выбора одного из нескольких предложенных вариантов, которые называются переключателями (radio)
- специальную кнопку для передачи данных, введенных в диалоговом окне (submit)
- для очистки всей формы (reset)
- пользовательские кнопки (button)
- поле для передачи документов (file)
- графические кнопки (image)
С появлением платформы html5 данный тег пополнился множеством дополнительных встроенных типов полей, при указании которых производится автоматическая проверка корректности написанных данных.
Хочу обратить внимание на один атрибут, который позже я задействую в программе. Это required. Указание данного параметра запрещает оставлять поле незаполненным, предотвращая тем самым возникающие в будущем ошибки.
Тег <form> — очень важный инструмент, без которого не может обойтись ни один уважающий себя интернет-сервис.
Формы нужны для связи клиентского приложения (в данном случае калькулятора) с сервером. Так, <form> используют для организации страниц регистрации или входа, отправки сообщений, мультимедиа, комментариев и другой информации, которую нужно каким-то образом обработать.
Также я использовал еще парочку тегов для организации раскрывающегося списка. Это такие единицы языка разметки, как <select> и <option>.
<select> задает каркас для списка с раскрывающимися пунктами меню, а <option> создает один пункт открывающегося списка.
Второй элемент обязательно прописывается внутри тега <select>. Начальное значение задается при помощи встроенного атрибута autofocus.
Пришло время запрограммировать ипотечный калькулятор
Выше я подробно описал каждый тег и атрибут, который использовал при программной реализации калькулятора, так что теперь весь код вам будет понятен. Как всегда небольшой совет от меня: при возможности обязательно опробуйте данный пример практически, а лучше постарайтесь повторить код самостоятельно. Это ускорит ваш процесс обучения.
На этой ноте я закончу. Не забывайте вступать в сообщество подписчиков данного блога и делиться ссылкой с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов
romanchueshov.ru
Стилизуем все классы у калькулятора.
Добавим рамку у калькулятора border: 3px solid #b641b0 и отступы по бокам padding: 20px 20px.
Цена будет #price большими буквами и font-weight: bold.
У изображений card-pic img отключим видимость display: none, но изначально будет видна первая #card1 картинка визитки черно-белая односторонняя display: inline-block.
Отступ сверху будет как у калькулятора padding-top: 20px.
Класс form-control будет на всю ширину width: 100% и с рамкой синего цвета.
Код в main.sass.
Скрипт для калькулятора в common.js.
Вначале проверим изменялись ли значения select у элемента с классом calc $(.calc).change (function ().
Если одно из полей меняется применяем функцию.
Присваиваем переменной тираж $card значение select#card и вытаскиваем это значение функцией val ().
Также находим значение для типа бумаги $paper = $(select#paper).val ().
Какую цветность визитки выбрал покупатель, определим $color = $(select#color).val ().
Функция изменения картинки относительно выбора цветности.
Определим, какую цветность выбрал пользователь, чтобы подставить соответствующую картинку, для этого используем логическую функцию if.
Для каждого option у цветности создадим дата атрибуты data=1,2,3,4,5 в index.html.
В скрипте добавим переменную $color1, которая будет брать селект с идентификатором select#color, с выбранным option:selected на данный момент.
И у этого option достаем определенный атрибут командой attr (data).
Теперь проверим, если if переменная $color1 равна 1, то скрываем все картинки функцией $(.pic img).hide (), а первое изображение покажем $(#card1).show (slow).
Делаем по аналогии для других пяти изображений и проверяем в браузере.
Напишем формулу расчета стоимости визитки.
- Стандартный формат визитки 9 на 5 сантиметров. Таких визиток на целый лист формата А3 поместится 30 штук $viz = 30, поэтому итоговый тираж будем делить на 30 $fin = $card / $viz.
- Теперь итоговый тираж умножим на цену за бумагу $price = $fin * $tb. Добавим атрибут к option у бумаги tb=9,18,21 в index.html это цена в зависимости от типа бумаги. Теперь в скрипте зададим переменную, которая вытащит атрибут attr (tb) из выбранного типа бумаги select#paper option:selected.
- Третий параметр, который влияет на цену это цветность, зададим атрибуты дата цены у option селекта с именем color. clpr=5,10,10,20,15 цена каждой цветности в index.html. В common.js переменная $clpr равна выбранной option, в select с идентификатором color и вытаскиваем атрибут attr (clpr).
Общая формула будет умножение атрибутов цены всех выбранных option $price = $fin * $tb * $clpr.
Для вывода стоимости тиража $(span#price).text ($price).
Код в common.js.
sdelatlending.ru
Процедура создания калькулятора
Особенно насущной данная задача становится в случае необходимости постоянно проводить однотипные вычисления и расчеты, связанные с определенным видом деятельности. В целом все калькуляторы в Excel можно разделить на две группы: универсальные (используются для общих математических вычислений) и узкопрофильные. Последняя группа делится на множество видов: инженерные, финансовые, кредитные инвестиционные и т.д. Именно от функциональных возможностей калькулятора, в первую очередь, зависит выбор алгоритма его создания.
Способ 1: использование макросов
Прежде всего, рассмотрим алгоритмы создания пользовательских калькуляторов. Начнем с создания простейшего универсального калькулятора. Данный инструмент будет выполнять элементарные арифметические действия: сложение, умножение вычитание, деление и т. д. Он реализован с помощью макроса. Поэтому прежде, чем приступить к процедуре создания, нужно удостовериться, что у вас включены макросы и панель разработчика. Если это не так, то обязательно следует активировать работу макросов.
- После того, как указанные выше предварительные настройки выполнены, перемещаемся во вкладку «Разработчик». Жмем на иконку «Visual Basic», которая размещена на ленте в блоке инструментов «Код».
- Запускается окно редактора VBA. Если центральная область у вас отобразилась серым цветом, а не белым, то это означает, что поле введения кода отсутствует. Для включения его отображения переходим в пункт меню «View» и жмем по надписи «Code» в появившемся списке. Можно вместо этих манипуляций нажать функциональную клавишу F7. В любом случае поле для ввода кода появится.
- Тут в центральной области нам нужно записать сам код макроса. Он имеет следующий вид:
Sub Calculator()
Dim strExpr As String
' Введение данных для расчета
strExpr = InputBox("Введите данные")
' Вычисление результата
MsgBox strExpr & " = " & Application.Evaluate(strExpr)
End Sub
Вместо словосочетания «Введите данные» вы можете записать любое другое более приемлемое для вас. Именно оно будет располагаться над полем введения выражения.
После того, как код введен, файл нужно перезаписать. При этом его следует сохранить в формате с поддержкой макросов. Жмем на иконку в виде дискеты на панели инструментов редактора VBA.
- Запускается окно сохранения документа. Переходим в ту директорию на жестком диске или съемном носителе, где хотим его сохранить. В поле «Имя файла» присваиваем документу любое желаемое наименование или оставляем то, которое присвоено ему по умолчанию. В обязательном порядке в поле «Тип файла» из всех доступных форматов выбираем наименование «Книга Excel с поддержкой макросов (*.xlsm)». После данного шага клацаем по кнопке «Сохранить» в нижней части окна.
- После этого можно закрывать окно редактора макросов, просто нажав на стандартный значок закрытия в виде красного квадрата с белым крестиком в его правом верхнем углу.
- Чтобы запустить вычислительный инструмент при помощи макроса, находясь во вкладке «Разработчик», клацаем по значку «Макросы» на ленте в блоке инструментов «Код».
- После этого запускается окно макросов. Выбираем наименование того макроса, который мы только что создавали, выделяем его и жмем на кнопку «Выполнить».
- После выполнения данного действия запускается калькулятор, созданный на основе макроса.
- Для того, чтобы произвести в нем вычисление, записываем в поле необходимое действие. Удобнее всего использовать для этих целей числовой блок клавиатуры, который расположен справа. После того, как выражение введено, жмем на кнопку «OK».
- Затем на экране появляется небольшое окошко, которое содержит в себе ответ решения заданного выражения. Для его закрытия жмем на кнопку «OK».
- Но согласитесь, что довольно неудобно каждый раз, когда потребуется произвести вычислительные действия, переходить в окно макросов. Давайте упростим реализацию запуска окна вычислений. Для этого, находясь во вкладке «Разработчик», щелкаем по уже знакомой нам иконке «Макросы».
- Затем в окне макросов выбираем наименование нужного объекта. Щелкаем по кнопке «Параметры…».
- После этого запускается окошко ещё меньше предыдущего. В нем мы можем задать сочетание горячих клавиш, при нажатии на которые будет запускаться калькулятор. Важно, чтобы данное сочетание не использовалось для вызова других процессов. Поэтому первые символы алфавита использовать не рекомендуется. Первую клавишу сочетания задает сама программа Эксель. Это клавиша Ctrl. Следующую клавишу задает пользователь. Пусть это будет клавиша V (хотя вы можете выбрать и другую). Если данная клавиша уже используется программой, то будет автоматически добавлена ещё одна клавиша в комбинацию – Shift. Вписываем выбранный символ в поле «Сочетание клавиш» и жмем на кнопку «OK».
- Затем закрываем окно макросов, нажав на стандартный значок его закрытия в верхнем правом углу.
Теперь при наборе выбранной комбинации горячих клавиш (в нашем случае Ctrl+Shift+V) будет запускаться окно калькулятора. Согласитесь, это намного быстрее и проще, чем каждый раз вызывать его через окно макросов.
Урок: Как создать макрос в Экселе
Способ 2: применение функций
Теперь давайте рассмотрим вариант создания узкопрофильного калькулятора. Он будет предназначен для выполнения конкретных, специфических задач и размещен непосредственно на листе Excel. Для создания этого инструмента будут применяться встроенные функции Эксель.
Для примера создадим инструмент конвертации величин массы. В процессе его создания нами будет использована функция ПРЕОБР. Данный оператор относится к инженерному блоку встроенных функций Эксель. Его задачей является преобразование величин одной меры измерения в другую. Синтаксис данной функции следующий:
=ПРЕОБР(число;исх_ед_изм;кон_ед_изм)
«Число» — это аргумент, имеющий вид числового значения той величины, которую надо конвертировать в другую меру измерения.
«Исходная единица измерения» — аргумент, который определяет единицу измерения величины, подлежащую конвертации. Он задается специальным кодом, который соответствует определенной единице измерения.
«Конечная единица измерения» — аргумент, определяющий единицу измерения той величины, в которую преобразуется исходное число. Он также задается с помощью специальных кодов.
Нам следует подробнее остановиться на этих кодах, так как они нам понадобятся в дальнейшем при создании калькулятора. Конкретно нам понадобятся коды единиц измерения массы. Вот их перечень:
- g – грамм;
- kg – килограмм;
- mg – миллиграмм;
- lbm – английский фунт;
- ozm – унция;
- sg – слэг;
- u – атомная единица.
Нужно также сказать, что все аргументы данной функции можно задавать, как значениями, так и ссылками на ячейки, где они размещены.
- Прежде всего, делаем заготовку. У нашего вычислительного инструмента будет четыре поля:
- Конвертируемая величина;
- Исходная единица измерения;
- Результат конвертации;
- Конечная единица измерения.
Устанавливаем заголовки, под которыми будут размещаться данные поля, и выделяем их форматированием (заливкой и границами) для более наглядной визуализации.
В поля «Конвертируемая величина», «Исходная граница измерения» и «Конечная граница измерения» нами будут вводиться данные, а в поле «Результат конвертации» — выводиться конечный результат.
- Сделаем так, чтобы в поле «Конвертируемая величина» пользователь мог вводить только допустимые значения, а именно числа больше нуля. Выделяем ячейку, в которую будет вноситься преобразуемая величина. Переходим во вкладку «Данные» и в блоке инструментов «Работа с данными» кликаем по значку «Проверка данных».
- Запускается окошко инструмента «Проверка данных». Прежде всего, выполним настройки во вкладке «Параметры». В поле «Тип данных» из списка выбираем параметр «Действительное». В поле «Значение» также из списка останавливаем выбор на параметре «Больше». В поле «Минимум» устанавливаем значение «0». Таким образом, в данную ячейку можно будет вводить только действительные числа (включая дробные), которые больше нуля.
- После этого перемещаемся во вкладку того же окна «Сообщение для ввода». Тут можно дать пояснение, что именно нужно вводить пользователю. Он его увидит при выделении ячейки ввода величины. В поле «Сообщение» напишем следующее: «Введите величину массы, которую следует преобразовать».
- Затем перемещаемся во вкладку «Сообщение об ошибке». В поле «Сообщение» нам следует написать ту рекомендацию, которую увидит пользователь, если введет некорректные данные. Напишем следующее: «Вводимое значение должно быть положительным числом». После этого, чтобы завершить работу в окне проверки вводимых значений и сохранить введенные нами настройки, жмем на кнопку «OK».
- Как видим, при выделении ячейки появляется подсказка для ввода.
- Попробуем ввести туда некорректное значение, например, текст или отрицательное число. Как видим, появляется сообщение об ошибке и ввод блокируется. Жмем на кнопку «Отмена».
- А вот корректная величина вводится без проблем.
- Теперь переходим к полю «Исходная единица измерения». Тут мы сделаем так, что пользователь будет выбирать значение из списка, состоящего из тех семи величин массы, перечень которых был приведен выше при описании аргументов функции ПРЕОБР. Ввести другие значения не получится.
Выделяем ячейку, которая находится под наименованием «Исходная единица измерения». Снова клацаем по иконке «Проверка данных».
- В открывшемся окне проверки данных переходим во вкладку «Параметры». В поле «Тип данных» устанавливаем параметр «Список». В поле «Источник» через точку с запятой (;) перечисляем коды наименований величин массы для функции ПРЕОБР, о которых шел разговор выше. Далее жмем на кнопку «OK».
- Как видим, теперь, если выделить поле «Исходная единица измерения», то справа от него возникает пиктограмма в виде треугольника. При клике по ней открывается список с наименованиями единиц измерения массы.
- Абсолютно аналогичную процедуру в окне «Проверка данных» проводим и с ячейкой с наименованием «Конечная единица измерения». В ней тоже получается точно такой же список единиц измерения.
- После этого переходим к ячейке «Результат конвертации». Именно в ней будет содержаться функция ПРЕОБР и выводить результат вычисления. Выделяем данный элемент листа и жмем на пиктограмму «Вставить функцию».
- Запускается Мастер функций. Переходим в нем в категорию «Инженерные» и выделяем там наименование «ПРЕОБР». Затем клацаем по кнопке «OK».
- Происходит открытие окна аргументов оператора ПРЕОБР. В поле «Число» следует ввести координаты ячейки под наименованием «Конвертируемая величина». Для этого ставим в курсор в поле и кликаем левой кнопкой мыши по этой ячейке. Её адрес тут же отображается в поле. Таким же образом вводим координаты в поля «Исходная единица измерения» и «Конечная единица измерения». Только на этот раз кликаем по ячейкам с такими же названиями, как у этих полей.
После того, как все данные введены, жмем на кнопку «OK».
- Как только мы выполнили последнее действие, в окошке ячейки «Результат конвертации» тут же отобразился результат преобразования величины, согласно ранее введенным данным.
- Давайте изменим данные в ячейках «Конвертируемая величина», «Исходная единица измерения» и «Конечная единица измерения». Как видим, функция при изменении параметров автоматически пересчитывает результат. Это говорит о том, что наш калькулятор полностью функционирует.
- Но мы не сделали одну важную вещь. Ячейки для ввода данных у нас защищены от введения некорректных значений, а вот элемент для вывода данных никак не защищен. А ведь в него вообще нельзя ничего вводить, иначе формула вычисления будет просто удалена и калькулятор придет в нерабочее состояние. По ошибке в эту ячейку можете ввести данные и вы сами, не говоря уже о сторонних пользователях. В этом случае придется заново записывать всю формулу. Нужно заблокировать любой ввод данных сюда.
Проблема состоит в том, что блокировка устанавливается на лист в целом. Но если мы заблокируем лист, то не сможем вводить данные в поля ввода. Поэтому нам нужно будет в свойствах формата ячеек снять возможность блокировки со всех элементов листа, потом вернуть эту возможность только ячейке для вывода результата и уже после этого заблокировать лист.
Кликаем левой кнопкой мыши по элементу на пересечении горизонтальной и вертикальной панели координат. При этом выделяется весь лист. Затем кликаем правой кнопкой мыши по выделению. Открывается контекстное меню, в котором выбираем позицию «Формат ячеек…».
- Запускается окно форматирования. Переходим в нем во вкладку «Защита» и снимаем галочку с параметра «Защищаемая ячейка». Затем клацаем по кнопке «OK».
- После этого выделяем только ячейку для вывода результата и кликаем по ней правой кнопкой мыши. В контекстном меню клацаем по пункту «Формат ячеек».
- Снова в окне форматирования переходим во вкладку «Защита», но на этот раз, наоборот, устанавливаем галочку около параметра «Защищаемая ячейка». Затем щелкаем по кнопке «OK».
- После этого перемещаемся во вкладку «Рецензирование» и жмем на иконку «Защитить лист», которая расположена в блоке инструментов «Изменения».
- Открывается окно установки защиты листа. В поле «Пароль для отключения защиты листа» вводим пароль, с помощью которого при необходимости в будущем можно будет снять защиту. Остальные настройки можно оставить без изменений. Жмем на кнопку «OK».
- Затем открывается ещё одно небольшое окошко, в котором следует повторить ввод пароля. Делаем это и жмем на кнопку «OK».
- После этого при попытке внесения любых изменений в ячейку вывода результата действия будут блокироваться, о чем сообщается в появляющемся диалоговом окне.
Таким образом, мы создали полноценный калькулятор для конвертации величины массы в различные единицы измерения.
Кроме того, в отдельной статье рассказывается о создании ещё одного вида узкопрофильного калькулятора в Экселе для расчета платежей по кредитам.
Урок: Расчет аннуитетного платежа в Экселе
Способ 3: включение встроенного калькулятора Excel
Кроме того, в Экселе имеется собственный встроенный универсальный калькулятор. Правда, по умолчанию кнопка его запуска отсутствует на ленте или на панели быстрого доступа. Рассмотрим, как активировать её.
- После запуска программы Excel перемещаемся во вкладку «Файл».
- Далее в открывшемся окне переходим в раздел «Параметры».
- После запуска окошка параметров Excel перемещаемся в подраздел «Панель быстрого доступа».
- Перед нами открывается окно, правая часть которого разделена на две области. В правой ее части расположены инструменты, которые уже добавлены на панель быстрого доступа. В левой представлен весь набор инструментов, который доступен в Excel, включая отсутствующие на ленте.
Над левой областью в поле «Выбрать команды» из перечня выбираем пункт «Команды не на ленте». После этого в списке инструментов левой области ищем наименование «Калькулятор». Найти будет просто, так как все названия расположены в алфавитном порядке. Затем производим выделения данного наименования.
Над правой областью находится поле «Настройка панели быстрого доступа». Оно имеет два параметра:
- Для всех документов;
- Для данной книги.
По умолчанию происходит настройка для всех документов. Этот параметр рекомендуется оставить без изменений, если нет предпосылок для обратного.
После того, как все настройки совершены и наименование «Калькулятор» выделено, жмем на кнопку «Добавить», которая расположена между правой и левой областью.
- После того, как наименование «Калькулятор» отобразилось в правой области окна, жмем на кнопку «OK» внизу.
- После этого окно параметров Excel будет закрыто. Чтобы запустить калькулятор, нужно кликнуть на одноименный значок, который теперь располагается на панели быстрого доступа.
- После этого инструмент «Калькулятор» будет запущен. Функционирует он, как обычный физический аналог, только на кнопки нужно нажимать курсором мышки, её левой кнопкой.
Как видим, в Экселе существует очень много вариантов создания калькуляторов для различных нужд. Особенно эта возможность полезна при проведении узкопрофильных вычислений. Ну, а для обычных потребностей можно воспользоваться и встроенным инструментом программы.
lumpics.ru
Конструкторы калькуляторов — зачем они нужны и как появились
Сколько стоит сделать калькулятор? Студия может запросить у вас и 25 тысяч рублей:
За эти деньги решение должно включать провязку с CRM и другими системами автоматизации бизнеса. Более умеренная и распространенная цена в 5-10 тысяч может обернуться сюрпризом — от отсутствия админки (т.е. любое изменение цены или дизайна превратится в песню) до условий вроде “аренда калькулятора на год”.
Фрилансер на бирже “все по 500 рублей” запросит те самые 500 рублей за простой скрипт. Но обычно цена, за которую поработает частный специалист, начинается от 2-3 тысяч рублей. Плюс время на ожидание. И это неплохо — каждому по потребностям и возможностям.
Но штука в том, что успех Facebook, “Вконтакте”, Instagram, Avito и других массовых проектов вынес в интернет новую волну предпринимателей, которые в состоянии освоить простые системы сами, привыкли пробовать бесплатно, получать первый результат моментально, а если и платить — то потом и по-минимуму.
Спрос родил предложение: по всему миру стали появляться сервисы, предлагающие максимально упростить и удешевить создание калькулятора или формы для сайта. Отсмотрев с десяток сервисов на русском и английском языках, мы выбрали четверку, которую можно использовать для создания калькуляторов и форм для своих сайтов.
Их плюс: универсальность — не имеет значения, какую CMS вы используете, а также минимум затрат на поддержку и изменение формы в будущем.
Ахиллесова пята: такие сервисы не обросли большим количеством интеграций, которые вам предложат студии. То есть, конструкторы скорее подойдут предпринимателям и маркетологам с ограниченным бюджетом и отсутствием знаний JQuery, JS, HTML5 и CSS3 — а может, и не только им одним.
Проекты из России и стран СНГ
Общее сравнение
В 2016-м в Рунете запустились три онлайн-конструктора, которые предлагают вам создать калькулятор, перетаскивая блоки, а затем встроить виджет на сайт в виде готового кусочка кода. Первым делом мы решили опробовать их — тем более, была возможность уточнять детали у разработчиков. К сожалению, в процессе изучения один из сервисов — CalcExpert, стал разваливаться на глазах, и мы исключили его из итоговой версии обзора.
Тестирование проходило в два этапа.
Этап первый. Мы оценивали сервисы по требованиям, которые предъявляются к современным инструментам — наличие мобильной (адаптивной) версии для сайта, шифрование данных из форм заказа, готовые шаблоны, база знаний, дизайн и бизнес-возможности. Вот результат:
Для правильного отображения на мобильных команда CalcCreator рекомендует обращаться к ней — чтобы настроить код вашего калькулятора в ручном режиме. Вместо стандартного FAQ вам предложат обратиться в VK-сообщество CalcCreator или назначить скайп-колл разработчику проекта.
Этап второй. Затем мы отобрали потенциальных пользователей таких сервисов — небольшую студию, фрилансера и предпринимателя. Почему? Студия и фрилансер, работающие с бюджетными заказами, едва ли смогут вынести самописный калькулятор в отдельную услугу и много заработать на его поддержке. Предприниматель — человек, у которого просто может не быть времени на освоение технологий или лишних ресурсов на один-единственный виджет. Знакомьтесь:
| |
|
|
|
Елена Потолицына, маркетолог в агентстве «Бьюти-Маркетинг» |
Владимир Таранец, фрилансер, делает сайты-визитки за 3-5 тысяч рублей |
Мария Бикбулатова, предприниматель, владелица нескольких проектов в индустрии гостеприимства |
|
Ключевые клиенты: |
Ключевые клиенты: |
Ключевые клиенты: |
|
Задача: создать калькулятор для сайта аренды спецтехники (автокраны, экскаваторы и т.д.) — просто в виде теста |
Задача: собрать калькулятор расчета монтажа видеонаблюдения для сайта охранного предприятия |
Задача: оформить калькулятор на основе шаблона для любого проекта, потратив как можно меньше времени и сил |
Елена, Владимир и Мария наряду со мной опробуют отечественные конструкторы калькуляторов и поделятся впечатлениями.
1. uCalc.pro
Бесплатная версия: бессрочная, можно на время протестировать платные функции: отправку sms клиентам, прием оплаты, статистику, добавление иллюстраций к элементам калькулятора.
Платная: появится весной 2017-го, будет стоить $5 в месяц за 1 калькулятор, использующий платные опции — если перестать платить, калькулятор продолжит работать, но без “фишечек”. Калькуляторы, не использующие функции вроде отправки sms, тарифицироваться не будут.
УТП: прием оплаты через «Яндекс.Кассу», работа в соцсетях и мессенджерах по спецссылке.
Минус: проект не дает редактировать код калькулятора.
Планы проекта по развитию: выпуск модулей для платформ WordPress, uKit (запущено во время тестов) и uCoz — чтобы калькулятор устанавливался туда автоматически, без копирования кода с сервиса. К осени заявлены первые интеграции с CRM.
Работа с калькулятором
Для начала вам нужно зарегистрироваться на сайте через соцcеть или почту — лучше через почту: это пригодится, если захотите получать уведомления о новых заказах.
После регистрации вы попадете на страницу, где будут храниться ваши калькуляторы. Здесь вам предложат сделать калькулятор с нуля или на основе готового шаблона. Я выберу самостоятельную сборку.
Редактор калькулятора немного похож на Google Forms — две вкладки, между которыми можно переключаться в свободном режиме. Во вкладке «Дизайн» слева расположены готовые блоки — ползунок, выпадающий список, галочки, флажок (выбор 1 из нескольких параметров), поля для сбора данных клиентов и дополнительные фишечки. Их надо расставить на свободном поле.
Так как по жизни имею дело с сайтами, сделаем калькулятор предварительного заказа веб-страницы для бизнеса — его же будем делать во всех других сервисах.
Сначала накидаем структуру — расположим нужные элементы, перетаскивая их. Потом займемся оформлением. При установке элемента uCalc сам задает цифровые диапазоны: менять их нужно во вкладке “Формула”. К ней мы перейдем позднее.
У блоков есть настройки — они появляются при наведении на блок: размер и положение надписей, редактирование списка, отступы и т.д.Например, мне нужна только одна галочка — вторую просто удалим в настройке.
Подписи над блоками тоже можно скрыть: мне они не нужны. Просто подпишу сами галочки.
Над каждым блоком можно добавить картинку: нахожу первые попавшиеся готовые иконки в поисковике. Думаю, если использовать свои фото или любые большие и не квадратные картинки, их лучше будет предварительно обработать в условном Paint или Photoshop.
После добавления картинок лучше выровнять элементы относительно друг друга по вертикали.
Можно добавить текстовые поля с пояснениями для клиента (“Текст”) и поля сбора контактов: в настройках поля можно выбрать, какие данные мы собираем (почта, телефон, время и т.п.), будет ли поле обязательным, а также задать свои подписи-подсказки для заполнения.
Вишенка на торте: добавление кнопки заявки. Мы можем не только поменять ее цвет или размер — в настройках кнопки можно задать отправку готовой заявки на мой почтовый ящик. Исходно адрес почты берется из данных, указанных при регистрации, но email можно поменять — или добавить несколько адресов.
В настройках кнопки также можно настроить прием оплаты, указав данные “Яндекс.Кассы”, или задать текст email или SMS-сообщения для клиента (например, высылать ему промо-код после заполнения формы).
Основа калькулятора готова. Теперь “поиграемся со шрифтами”. Над калькулятором есть три иконки: смена фона, смена обрамления у элементов (10 вариантов) и выбор из 4 шрифтов. Выбор цветов для фона ничем не ограничен — поэтому лучше знать код цвета фона со своего сайта.
Внешний вид готов. Осталось настроить логику. Значения цен и принцип работы калькулятора задаются во вкладке «Формула» — переходим в нее. Справа появляются подписанные латинскими буквами блоки, слева можно указать, какие блоки учитывать при расчете — и при желании вбить скидки (умножение на %) за комбинацию услуг.
Формул может быть несколько: в этом случае в подвале калькулятора будут выводиться несколько результатов разом. Если же вы делаете форму заказа, отзыва и результат расчета не нужен, достаточно удалить формулу слева — тогда калькулятор заработает чисто на сбор контактов.
После заполнения формулы, калькулятор можно тестировать в самом редакторе.
Дальше проверяем отображение и работу на разных устройствах в режиме “Превью”. Теперь остается лишь получить код для сайта.
При нажатии на кнопку “Сохранить”, во всплывающем окне можно получить код для вставки на сайт. Полученный код нельзя будет редактировать самому, но и нельзя украсть с моего сайта: точнее, вы ничего от этого не получите — заявки все равно будут поступать на мою почту 😉
Отзывы
Мнение представителя веб-студии, Елена: «Сначала было непонятно, почему одни параметры надо идти настраивать во вкладку «Формула», а другие, почти такие же – в «Дизайн» (речь о настройке ползунка). Но потом привыкаешь. Из плюсов – есть возможность выводить несколько вариантов окончательного расчета: например, цена со скидкой и без. У других конструкторов калькуляторов такого не замечено.
В целом, все красиво, удобно, хотя не хватает опции автоматической загрузки из прайс-листа — в идеале, как это делает Mailchimp».
Мнение фрилансера, Владимир: «В целом, удобный и красивый интерфейс и современный вид элементов. Работа заняла около 15 минут».
Мнение предпринимателя, Мария: «После ознакомления не сразу нашла, как вернуться к выбору шаблонов — было бы удобней, чтобы ссылка на шаблоны была видна всегда. Те блоки, которые я добавляла в шаблон сама, отображались с другим цветом текста — это нужно править вручную; а лучше, чтобы было одинаково сразу. Но в итоге разобралась, добавила ссылку для оплаты через кнопку заказа — прием платежей через «Яндекс.Кассу».
Конструктор понравился, собирать довольно просто, дизайн смотрится приятно. Еще было бы хорошо прямо поверх картинки в калькуляторе писать текст: потому что подходящей картинки с текстом под рукой может не быть, а с освоением фотошопа могут быть проблемы, — например, у меня так».
2. CalcCreator
Бесплатная версия: бессрочная, с ограничением на использование платных бизнесовых (добавление файла и т.д.) и дизайн-функций.
Платная: работает по принципу подписки на 1 аккаунт, независимо от числа созданных калькуляторов. Месячная подписка стоит — 795 рублей, при оплате на три месяца можно получить скидку 10%, при оплате на полгода — 20%. Если вы перестанете оплачивать тариф, калькуляторы продолжат работать без платных опций.
УТП: возможность прикреплять файлы и редактировать логику калькулятора, используя свой код. Также вы можете переехать с сервиса, забрав с собой код калькулятора.
Минус: за частью настроек надо обращаться к команде проекта — например, это касается установки кода «Метрики» для отслеживания целей.
Планы по развитию: «Планы расширения функциональности есть, в шутку мы называем это планами по захвату мира», — ответила команда и порекомендовала следить за их сообществом в соцсетях.
Работа с калькулятором
CalcCreator — единственный в обзоре проект, который не просит регистрацию при входе: кликнув на ссылку “Создать” в меню сайта, вы сразу попадаете в редактор.
Интерфейс напоминает AutoCAD или Photoshop. Левое меню содержит элементы калькулятора. Первым делом задаем границы рабочего поля (серая область по центру) и начинаем кидать в него элементы.
При добавлении элементов появляется правое меню — оно отвечает за настройки дизайна: то есть, наполнение правого меню будет меняться в зависимости выбранного поля. В развернутом виде меню огромно — часть настроек будут скрыты в выпадающих списках.
Попробуем добавить картинку. Сервис не дает перетаскивать элементы, чтобы поставить их рядом, — но отчасти это можно выправить в настройках правого меню в пункте “Расположение”.
Добавим место для текстового описание. На примере этого поля посмотрим, как работают настройки ширины.
Чтобы поменять размеры элемента, задаем нужные значения в пунктах “Ширина” и “Высота” в правом меню — значения лучше оставить в %. В этом же меню есть настройки фона, шрифтов и отступов (в пикселях) — отступами можно двигать элементы влево-вправо и отбивать друг от друга по вертикали.
В том же правом меню можно менять названия элементов — для этого находим пункт “Текст”.
То, что элементы выглядят серо, слегка смущает — все как-то сливается. В других конструкторах мы видели более дружелюбный WYSIWYG сразу. Начинаем искать — и прокрутив правое меню, находим варианты готовых дизайнов.
Тут нас ждет облом… Дизайн-шаблоны элементов доступны только на тарифе. В бесплатной версии остается играться со шрифтами и цветом фона. Либо править CSS вручную.
Продолжим работу так. Добавляем кнопку: поменять надпись на ней можно в пункте “Данные” в правом меню.
Затем центрируем кнопку отступами. И, наконец, добавим еще одно важное поле — сбор имейлов. Берем из левого меню, в правом задаем название (“Текст”) и подсказку (“Данные”). Поле брошено временно — при желании его можно перетащить выше, зажав иконку руки рядом с элементом, а затем выровнять отступами.
Но мы провели в системе 20 минут — в других сервисах на этом этапе у нас уже были готовые калькуляторы. Хочется посмотреть, как все будет выглядеть. Жмем “Просмотреть”. При выборе мобильной версии калькулятор вылезает за пределы экрана — причем неочевидно, почему так…
В общем, несмотря на огромный потенциал по функционалу, создается впечатление, что проект ориентирован либо на “хардкорную” аудиторию, либо на подписку на готовые шаблоны, которые особо не будут править.
Посмотрим, что скажут наши тестеры.
Отзывы
Мнение представителя веб-студии, Елена: «С первого взгляда интерфейс похож на Axure [программа для прототипирования сайтов и приложений, прим.] – но как оказалось, кроме перетаскивания элементов из левого меню на рабочую поверхность между системами нет ничего общего. Возник вопрос, а как это настраивать? Справа открывается куча настроек, но это все дизайн. А как же данные? Только через несколько минут до меня дошло, что ввод данных находится в самом низу этого меню, где-то за первым экраном моего монитора. Сделав несколько попыток настроить калькулятор, я сдалась и пошла искать в библиотеку у них же на сайте – вдруг найдется что-то для меня подходящее?
Нашла шаблон, стала переделывать шаблон под себя — периодически при попытке что-то настроить у меня выскакивало желтое окно с напоминанием, что данная функция доступна только в платной версии. Но в итоге я получила приемлемый результат. В целом, интерфейс CalcCreator сложен для непрограммистского ума. А вот для продвинутых веб-мастеров, наверное, такое количество настроек будет удобно».
Мнение фрилансера, Владимир: «Есть даже возможность прикрутить к форме файл, которая, правда, доступна только после оплаты — отлично. Само число настроек радует, но без подготовки сложно разобраться, что, куда и где.
Сам интерфейс показался недружелюбным, поэтому я быстро бросил попытку создать что-то с нуля, а пользоваться шаблонами мне было запрещено по условиям тестирования».
Мнение предпринимателя, Мария: «Я выбрала шаблон, но не поняла, как редактировать его. Хотя понятно, что в целом конструктор интересный, много возможностей.
В итоге я протестировала готовую форму на сайте: понравилось, что после ввода информации сразу появляется подпись-информер для клиента, что “данные получены и с вами свяжутся”. Но база электронных адресов от клиентов собирается только на платном аккаунте — я не готова платить за это».
Промежуточный результат тестирования
По итогам тестирования Владимир и Мария установили получившиеся калькуляторы на сайты. Елена пробовала сервисы, чтобы в целом понять, стоит ли предлагать их заказчикам, которые не используют CRM — пока заказов на сайты с калькуляторами не было, но она использует два калькулятора от uCalc на собственной площадке: по ее словам, статьи с калькуляторами привлекают на 45-50% больше трафика.
Проекты с Запада
По просьбе редакции “Текстерры”, дальше мы оценили зарубежные сервисы. На Западе такие конструкторы появились раньше, их аудитория — больше и разнообразней, а значит, в них должно быть больше возможностей. И это так: интеграции с CRM и сервисами рассылок вы найдете именно здесь.
Помимо этих плюсов, есть у зарубежных проектов и минус: интерфейс на чужом языке, англоговорящая техподдержка — и интеграции с зарубежными же сервисами: PayPal и Stripe вместо “Я.Кассы” и так далее. Не факт, что у разработчиков дойдут руки российских сервисов — исключением мог бы стать Calculoid, который делается в Чехии, но эти ребята решили вопрос по-другому, дав пользователям API.
Из-за языкового барьера наши тестировщики в сравнении не участвовали.
3. Formsite
Бесплатная версия: ограничена 10 заявками, отправленными через калькулятор. Сам период, через который сгорит лимит, не установлен.
Платная: включает линейку тарифов с ежемесячной оплатой, которые разнятся по числу заявок, которые можно принять: 500 заявок за $15, 1000 — за $25 и так далее. Самый дорогой тариф — $100 в месяц и 10 000 заявок. Помимо роста количества заявок, от тарифа к тарифу растет место, выделенное вам для хранения результатов и картинок.
УТП: самый большой выбор элементов и дизайнов, самый большой набор готовых интеграций среди всех сервисов в обзоре.
Минус: даже в платной версии встроенную в ваш калькулятор рекламу сервиса можно отключить только на тарифе за $25 в месяц и выше.
Работа с калькулятором:
При регистрации на сайте советую выбрать опцию ‘Pro trial’ — сможете попробовать все возможности, а если что — перейти на бесплатную версию через две недели. Карточку при регистрации привязывать не надо — деньги не спишутся.
Первое, что нужно после регистрации — нажать на зеленую кнопку Create New Form (“Создать форму”).
Дальше, как и в uCalc, можно выбрать между сборкой с нуля и редактированием готового шаблона. Обязательное заполнить поле слева, а после выбора — нажать на зеленую кнопку справа.
Обилие элементов слева поражает: в каждом выпадающем списке таится по десятку вариантов. Что неудивительно: история Formsite началась еще в 1999 (!) году — у разработчиков было время написать столько виджетов.
С левым меню и будем работать в первую очередь. Верхнее меню отвечает за работу с калькулятором после сборки.
Т.к. число доступных элементов огромно — почти пять десятков, советую найти время, чтобы познакомиться с ними: перетащить в свободное поле, оценить вид и принцип работы. Многие из элементов — это не отдельные поля, а целые готовые формы: например, есть форма почтового заказа с готовыми полями для индекса, адреса и т.д.
Жалко, но вот ползунка в этом многообразии нет. Я выбрал виджет “набор картинок” — это несколько картинок с галочками под ними.
После перетаскивания элемента автоматически откроется окно с его настройками. Настройки элементов одинаковы: первая вкладка отвечает за основные вещи — тексты и их расположение.
Вбив фразу в верхнее поле и нажав “Enable text editor”, можно поменять шрифт и размер текста — как в «Ворде».
Чуть ниже можно вставить ссылки на картинки из интернета и подписать их.
Еще чуть ниже находятся настройки: обязательным ли будет поле (Required), показ подписей (Show Labels), а также настройка отображения — картинки можно ставить в ряд (Grid) или друг под другом. Заполнив все и нажав зеленую кнопку “Сохранить”, можно полюбоваться результатом.
Жмем на “карандашик” под элементом и возвращаемся в настройки — остались еще три вкладки. Вторая вкладка настроек элемента опциональна — это выбор предустановленного поля (нажатая галочка, пункт в выпадающем списке и т.п.) при открытии калькулятора. Третье пригодится, только если число услуг и товаров ограничено — там можно задать максимальное число заказов, после которых поле скроется. Перейдем к четвертое поле — и зададим цены.
Задаем значения и нажимаем “Сохранить”.
Следующее поле, которое мне нужно добавить — сбор имени. Под некоторые задачи в Formsite есть готовые поля — например, готовое поле для сбора почты. Его попробуем чуть позже, а для сбора ФИО используем поле “Короткого ответа” (Short Text Answer) из левого.
Помимо заголовка, здесь мы зададим Placeholder — подсказку внутри поля.
В той же вкладке ниже можно задать автопроверку заполнения. Т.к. нам нужно только имя — выберем Text Only. Это же поле можно превратить в сборщик телефона и т.д. поменяв настройку и заголовок.
Теперь проверим готовый блок Email Address, перетащив его в область сбоку от поля для имени. Как и uCalc, Formsite позволяет ставить блоки рядом.
Сами по себе настройки сборщика почты не отличаются от стандартного текстового поля. Основа готова — пора настраивать выдачу результата. Перетащим для этого готовый блок Calculate из левого меню.
Все стандартно — задаем заголовок. При желании, в блоке Format можно задать округление. Но сейчас нам важнее настроить Equation — в него надо вписать название нужного поля и, если необходимо, дополнить математическими знаками.
Чтобы взять id поля, нажимаем на Add Equation — берем в новом окошке текст из строки Code, возвращаемся — и вставляем в строку Equation.
Наверняка вы спрашивали себя: “А где же кнопка?”
Она подставляется к вашему калькуляторы автоматически — чтобы задать ее цвета и вид, в левом меню жмем вкладку Style и выбираем в подменю Themes из готовых вариантов.
Еще один пункт дизайн-меню — раздел Customize, где можно поменять цвет фона, добавить на фон готовую или свою картинку, настроить размеры самой формы и так далее.
Третий пункт подменю — Advanced — откроет код калькулятора и настройки CSS. Без подготовки туда лучше не ходить 😉
Калькулятор готов. Перейдем к верхнему меню. Выбираем раздел Form Settings, в нем находим Notifications — и указываем почту, на которую хотим получать заявки.
В этом же разделе можно настроить прием оплаты от клиентов через Stripe и PayPal (пункт левого меню Payments) и привязать сервис рассылок MailChimp и CRM Salesforce — в пункте Integrations.
Наконец, последний шаг — во вкладке Share в верхнем меню можно получить ссылку для соцсети или код для сайта.
4. Calculoid
Бесплатная версия: не ограничена по времени, если страница с калькулятором будет иметь до 500 просмотров в месяц — вы также не сможете собирать заявки и принимать оплату (поля можно добавить при сборке, но работать они не будут).
Платная версия: включает три тарифа. Первый стоит $9 в месяц — рассчитан на 2000 показов формы посетителям вашего сайта и не дает подключить прием оплаты. Далее тарифы растут по принципу: на 10 долларов дороже и в пять раз больше разрешенных просмотров в месяц.
УТП: проект позволяет отправлять данные заказов в любую CRM или иную систему автоматизации бизнеса по API.
Минус: техническая поддержка оплачивается отдельно по тарифу $45 в час.
Работа с калькулятором:
После регистрации на сайте мы оказываемся на странице с шаблонами — сюда попадают любые неоплаченные калькуляторы, либо те формы, чьи владельцы захотели “попиарить” их сами. Как итог, пользовательских шаблонов много — если не хотим в них копаться, жмем кнопку New Calculator справа.
На следующей странице достаточно заполнить верхнюю строчку (название калькулятора) и нажать Save: остальные поля нужны для поиска по общей базе шаблонов, их можно оставить нетронутыми.
Редактор калькулятора выглядит не совсем обычно — меню управления находится снизу в свернутом виде. Чтобы выбрать элемент, жмем на Add Field: меню разворачивается и показывает набор готовых “деталек”.
По факту, работать с таким меню неудобно: придется каждый раз сворачивать его, смотреть на рабочее поле, затем снова разворачивать — и так до бесконечности.
Еще одно отличие Calculoid от конструкторов, представленных выше: чтобы добавить элемент в рабочее поле, его не надо перетаскивать — точнее, это просто невозможно сделать. Так что кликаем по детали, и она оказывается в рабочем поле.
Если мы хотим поставить несколько элементов рядом, для начала их надо “ужать”, просто потянув за границу каждого.
Когда размеры элементов позволяют уместить их в одну строку, они автоматически переползают друг другу под бок. Двигать поля также можно, зажав желтый крестик в углу любого элемента.
Для сбора имен, телефонов и т.д. можно использовать поле Textarea. Для сбора почты — поле Send Results, которое автоматически “поставляется” с кнопкой.
Собрав костяк формы, переходим к ее редактированию: если нажать на “карандашик” у любого элемента, откроется общее меню со списком полей и их настройками.
В настройке каждого элемента есть несколько вкладок. Basic — отвечает в основном за тексты. Строка Name — наш заголовок, строка Hint — дополнительная подпись. Заполним их.
В соседней вкладке задаются цифры — в нашем случае, диапазон работы ползунка и длина его “шага”.
Вкладка Appearance — это настройки дизайна: размеров шрифта, цвета фона элемента и цвет текста. Если слишком увеличить кегль, текст выйдет за рамки поля — тогда надо закрыть меню и растянуть элемент.
Продолжаем переименовывать поля, меняя Name и Hint в настройках каждого элемента.
Затем задаем цены: для полей, которые войдут в формулу, задаем Option Value во вкладке Option у нужного элемента.
Остальные поля настраиваются по аналогии. Единственный момент, который стоит отдельного упоминания — текст на кнопке меняется в настройках дизайна.
Остается добавить расчет. Для этого выбираем элемент Formula и в его настройках находим одноименную вкладку: в ней видны все наши поля — кликаем на нужные и при необходимости подставляем математические знаки.
Когда калькулятор готов, выбираем в нижнем меню вкладку Configure Calc. Здесь можно выбрать одну из 4 цветовых схем — они пригодятся, если вы не правили цвета ранее или хотите заполнить белые прожилки между блоками. Также в этом пункте меню нужно нажать Yes — и вы сможете получить получить код для установки на сайт в пункте Embed.
P.S.
Эффективность калькуляторов на сайте доказана в одном случае — они точно могут поднять SEO-трафик и поведенческие факторы, если среди ключевиков для вашей темы в “Вордстате” попадаются запросы “рассчитать” и “калькулятор”.
А вот будет ли сайт с калькулятором конвертировать клиентов лучше, чем “обычный сайт” — вопрос, который каждому предстоит решить самостоятельно. Ведь все зависит от множества факторов: вашего предложения и ценообразования, сложности формы, дизайна и так далее. Конструктор в этом случае — отличный вариант “на попробовать”: вы сможете быстро вносить изменения в форму и экспериментировать.
Просто выберите какой-то из проектов из обзора — по интерфейсу, условиям использования, возможностям или другому критерию — и начните.
P.P.S.
Безусловно, вы можете найти другие конструкторы форм и калькуляторов в сети — тема активно развивается, новые игроки появляются и умирают. В случае c самостоятельным поиском всегда обращайте внимание на отзывы и обзоры на независимых площадках вроде “Текстерры”, а также факторы из наших табличек-сравнений: мобильную версию, защиту данных и так далее — ведь вы будете нести перед посетителями и клиентами ответственность за то, что “поселили” на своем сайте.
kak-sdelat-kalkulyator-ili-formu-dlya-sayta-obzor-4-spetsialnykh-konstruktorov
texterra.ru