Делаем более-менее универсальный калькулятор услуг для сайта / Блог компании uKit Group / Хабр

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

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

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

В сети я нашел несколько путей как подключить JS скрипты к записям:

Шорткод. Данный способ основан на редактировании файла темы functions.php.

Здесь вам придется между вставить специальный код:

function myJavascript1(){
$str='';
return $str;
}
add_shortcode( 'myJavascript1', 'myJavascript1');

где вместо КОД вставляем свой скрипт, а для вызова шорткода на странице используем .

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

Правка header.php. Один из наихудших методов, основанный на добавлении специального кода перед закрывающим тегом head> с номером страницы, в которой надо отобразить скрипт.

Конструкция iframe. Один из простейших способов, где надо создать новый файл и закинуть в него скрипт.

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

iframe src="https://seoslim.ru/wp-content/calculators/calcul-1.html" width="585" height="300" frameborder="0" scrolling="no">iframe>

ссылка — адрес где расположен файл с готовым калькулятором;
параметры width и height — задают размеры формы;
параметр frameborder — присваивает толщину границы фрейма;
параметр scrolling — задает или убирает полосу прокрутки.

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

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

Но можно пойти и другим путем, об этом далее.

1. Очень быстро и просто: создать в конструкторе

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

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

Плюсы: совместимость с любой CMS или конструктором сайтов, допускающим вставку пользователем HTML на страницу.

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

В большинстве своем конструкторы работают так: есть бессрочная бесплатная версия и есть премиум-возможности, доступные на платной основе. Цена премиума для российских проектов лежит в диапазоне $5-10 в месяц

Цена вопроса: это самый приятный момент — порог входа составляет 0 рублей. В большинстве своем конструкторы работают так: есть бессрочная бесплатная версия и есть премиум-возможности, доступные на платной основе. Цена премиума для российских проектов лежит в диапазоне $5-10 в месяц.

Тип 4. Калькулятор все-в-одном

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

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

Он показывает вашу экспертность: с ним вы можете давать рекомендации автоматически.

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

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

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

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

Тип 2. Псевдо-калькулятор — для сбора данных

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

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

Как видите, сервис также подходит для создания форм заказа, отзывов, обратной связи и так далее. Чтобы превратить калькулятор в обычную форму, достаточно удалить значок формулы (на картинке слева) во вкладке “Формула” в редакторе uCalc.

Удаление формулы

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

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

Прайс-листы, формы обратной связи, обратного звонка, даже 3D-конструкторы — конкуренты кто во что горазд. Мы добавили калькулятор — но с парой полей, которых нет у конкурентов — пункты “штробление” и “дата ремонта”. Другие фирмы уточняют это при звонке, чтобы понять, браться ли за заказ и сколько просить. Пока конкуренты только собираются с мыслями, мы в телефонном разговоре сразу можем предложить даты, когда бригада свободна, и допродать какие-то услуги.

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

Вот живой пример: «Я собрал все пожелания клиентов и всё, что могу сделать, в одной форме (форма занимала пять экранов прокрутки на большом ноутбуке — прим.). И ничего не получил, сайт приносил мало заявок. На сайте одного из конкурентов видел калькулятор, который требует для ввода всего лишь базовых данных, остальное они обговаривают по телефону».

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

Простая и короткая форма

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

Промокод

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

Промокод

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

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

Отыскать действительно стоящий сервис было не так-то просто. Знакомьтесь, .

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

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

Пример простого калькулятора для сайта на PHP + JS

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

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

Форма счетчика будет создана с помощью тегов

Для реализации ввода значений используем теги

form>
 Введите число 1 input type="text" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;">br>br>
 Введите число 2 input type="text" onkeyup="this.value=this.value.replace(/()/g,'');">br>br>br>
 input type="button" value="Рассчитать">
 input type="reset" value="Сброс">br>br>
 Результат input type="text">
form>

Функция Onchange — убирает значения при добавлении их в форму.

Функция Onkeyup — убирает значения при добавлении их в форму кроме цифр.

Далее добавляем переменные в форму для тегов input, например, первое значение это латинская «x», второе вводимое значение в поле это латинская «y», а выходное значение это «summa».

form>
 Введите число 1 input type="text" name="x" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;">br>br>
 Введите число 2 input type="text" name="y" onkeyup="this.value=this.value.replace(/()/g,'');">br>br>br>
 input type="button" value="Рассчитать">
 input type="reset" value="Сброс">br>br>
 Результат input type="text" name="summa"> form>

Теперь чтобы форма заработала надо ее наделить разумом, то есть создать скрипт с помощью Java, который и будет вести расчеты.

script lang="JavaScript">
function calculators(form) {
x = eval(form.a.value); //Присваиваем x значение из первого поля
y = eval(form.b.value); //Присваиваем y значение из второго поля
z = x+y; //Складываем значения x и y
form.total.value = z; //Выдаем результат
}

Словом calculators можно изменить на любое, так как им мы даем только название функции.

А для x, y, z задаем переменные, которые были созданные ранее.

Далее переходим обратно к форме и для тега input задаем функцию, отвечающую за расчет значений.

input type="button" value="Рассчитать" />

Для этого добавляем в инпут команду onclick =»calculators (this.form)» которая и запустить алгоритма калькулятора.

script lang="JavaScript">
 function calculators(form) {
 x = eval(form.a.value);
 y = eval(form.b.value);
 z = x+y;
 form.total.value = z;
 }
 
 form>
 Введите число 1 input type="text" name="x" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;">br>br>
 Введите число 2 input type="text" name="y" onkeyup="this.value=this.value.replace(/()/g,'');">br>br>br>
 input type="button" value="Рассчитать" onclick="calculators(this.form)">
 input type="reset" value="Сброс">br>br>
 Результат input type="text" name="summa">
 form>

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

0. Ожидания vs реальность

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

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

А вот изменится ли количество заявок? Тут надо не забывать, что виджет — это инструмент.

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

2. Быстро и относительно просто: ищем модуль именно для своей CMS

Спрос на калькуляторы у владельцев сайтов возник достаточно давно, еще до появления конструкторов. И тогда он закрывался созданием модулей (плагинов) для популярных open-source CMS.

Решения пишут и выкладывают сторонние разработчики: так что рынок “стихиен” и достаточно сложно оценить общую простоту таких модулей, не скачав их и не установив на тестовую версию сайта. Где-то для работы с модулями вам потребует хорошее понимание Excel для создания формул, где-то для внесения правок надо лезть в CSS, а где-то— нет. Так что приготовьтесь потратить чуть больше времени на отсмотр «кандидатов» — или найдите, кому делегировать этот процесс.

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

Минусы: не факт, что под вашу платформу найдется что-то подходящее

Например, пользователи Drupal более «хардкорны» и часто пишут custom-модули для своих сайтов сами.

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

В общем, это очень похоже на выбор приложения в аппсторе.

Цена вопроса: аналогична ситуации с конструкторами — есть бесплатные решения, есть платные: обычно, чтобы понять, кто есть кто, жмите на все ссылки в описаниях: если по какой-то перекинуло на сайт разработчика, ищите там раздел с ценами. Цены могут сильно разниться — от $2 до $50 и выше в месяц, в зависимости от «начинки» модуля.

Преимущества для бизнеса

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

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

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

О сервисе uCalc.pro

Условия использования

Сервис был и останется бесплатным в базовой версии. В апреле появится платный тариф “$5 за калькулятор” с расширенными возможностями отправки смс и возможностью связать калькулятор с вашей “Яндекс.Метрикой” и Google Analytics.

Текущие возможности для бизнеса

прием заказов по email и sms
отправка подтверждений, промо-кодов и ссылок клиентам
“вшивание” скидок в калькулятор
прием оплаты через “Яндекс.Кассу”

Текущие возможности по дизайну

настройки цвета текстов, кнопок, фона — полноценная палитра
настройка цвета галочек и прочих элементов — 10 вариантов
смена шрифтов — 4 варианта

Тип 3. Калькулятор заказа с моментальным результатом

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

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

Он отвечает на вопрос клиента “Сколько стоит услуга в моем случае?” — и экономит время менеджера или владельца бизнеса. Те посетители сайта, кто ищет где подешевле и в итоге не согласятся с вашей ценой, “отвалятся” автоматически. Остальные сделают заказ, согласившись с ценой.

Цена на мои услуги не определена, пока клиент не выскажет пожелания. Звонки “а сколько стоит” получаем каждый день — клиенты многие дотошные, кому-то “просто поинтересоваться”, а времени на ответы уходит много. После установки калькулятора мы на 70% сократили число “пустых” заявок, где просили цену — а в количестве клиентов не потеряли. Как результат, освободили минимум 25% времени на выполнение самих заказов.

Помимо ошибок, перечисленных выше (слишком большая форма, чуждые клиенту термины и так далее) — это отсутствие подтверждения, что заявка принята. Иначе вы опять же рискуете потерять “теплую” заявку.

Подтверждение заявки стоит отправлять автоматически — схема описана в главе “Псевдо-калькулятор” на примере с промо-кодом.

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

Отдельно разберем пример, который подойдет:

если вы проводите ограниченные по времени акции
если вы готовы давать скидку за объем товаров и услуг
если ваши цены выше рынка
или если клиенты часто задают вопросы “почему столько стоит”

В калькуляторе можно указать две цены: со скидкой и без — то есть, сделать две формулы.

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

Рассмотрим базовые функции генератора калькуляторов для сайта uCalc:

1. Шаблоны — при создании проекта вы можете воспользоваться готовыми решениями, которых на текущий момент около 20 для самых востребованных категорий.

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

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

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

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

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

У сервиса uCalc множество других плюшек:

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

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

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

Готовые виджеты калькуляторов

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

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

Лично я привык работать только с проверенными проектами и поэтом для одного из своих сайтов скачал калькулятор через онлайн магазин WordPress — WP-R.ru

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

На следующей странице смотрим пример работы модуля, описание функций.

Возможности CoWaM:

Удобный поиск
Настройка дизайна
Адаптивная верстка
Мультиязычность

Если все устраивает жмем «Купить» и в специальной форме указываем домен сайта, адрес электронной почты.

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

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

Лицензию получите в ЛК после подтверждения оплаты.

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

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

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

Установка заняла считанные минуты.

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

Кстати, сообщение от Яндекса через пару дней пропало. Наверное был сбой в работе алгоритмов. ))