2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Содержание

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

Доступное и гибкое решение для расчета и приема заявок

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

Кому подойдет

Бизнесу

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

Фрилансерам

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

Веб-студиям

Богатый набор инструментов для создания калькулятора различной сложности

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

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

Добавьте на сайт

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

Получайте заявки

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

Анализируйте результат

Тестирование конверсии, анализ форм, контроль причин уходов — все это доступно благодаря подключаемым сервисам Google Analytics и Яндекс.Метрика.

Наши преимущества

Выгодно

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

Быстро и удобно

Калькуляторы любой сложности с учетом вашего бизнеса и целевой аудитории

Бесплатная помощь

Не знаете как реализовать? Наша поддержка проконсультирует вас

Делаем калькулятор под ключ

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

10 минут для настройки

Настройка калькулятора займет от 10 минут. А если сложно понять, какой калькулятор нужен, мы поможем!

Принимайте предоплату на кошельки

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

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

Создай любой калькулятор всего за 10 минут!

Нам доверяет множество клиентов

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

Варвара Светлова

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

Кирилл Куварин

Друзья! Я фрилансер и ваш продукт это именно то, что я так давно искал, теперь на разработку проектов моим клиентам я могу тратить на 2-3 дня мучаясь с написанием кода, а разработать его за 2-3 часа и он будет идеален.

Олег Днепров

Давно искали такое решение для нашего сайта, но ни одно из найденных нам не подходило по разным причинам, но ваш конструктор это просто что-то, теперь мы можем разместить на сайте все наши услуги, где наш клиент сможет их расчитать и сразу сделать заказ!

Лера Зайцева

Закажите готовый
калькулятор под ключ

Нет времени разбираться самостоятельно?

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

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

Калькулятор для сайта на WordPress: основы создания, установка и готовые решения

Привет дорогие читатели seoslim.ru! Все мы знаем, что для продвижения сайтов в ТОП недостаточно уже одного уникального и полезного контента.

Содержание:

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

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

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

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

Поэтому надо понимать, что рерайт статьи, который в сервисах проверки уникальности показывает 100% еще не означает ее полезность для посетителей.

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

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

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

Читать еще:  Какой маникюр сделать зимой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для этого добавляем в инпут команду которая и запустить алгоритма калькулятора.

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

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

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

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

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

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

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

function myJavascript1() < $str=' '; return $str; >add_shortcode( ‘myJavascript1’, ‘myJavascript1’);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать еще:  Какие фрукты стоит попробовать в Доминикане

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

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

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

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

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

На сегодня любой желающий может воспользоваться и другими калькуляторами:

Boile’r — справочник, который подскажет сколько варить тот или иной продукт.

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

HaWoB — калькулятор роста и веса малыша (выводит форму расчета веса и роста малыша согласно ВОЗ).

HaWoC — калькулятор роста и веса ребенка (выводит форму расчета веса и роста ребенка согласно ВОЗ).

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

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

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

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

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

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

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

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

  • заказать такси;
  • рассчитать стоимость доставки;
  • узнать необходимый объём строительных материалов;
  • посчитать проценты по кредиту и т.д.

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

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

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

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

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

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

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

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

  • «Базовый» ($4 в месяц) — до 5 проектов, +300 уведомлений через e-mail и возможность докупить SMS-уведомления.
  • «Стандарт» ($10 в месяц) — до 15 проектов, +1000 уведомлений через e-mail, +10 SMS-уведомлений и возможность их докупить.
  • «Про» ($24 в месяц) — неограниченное количество проектов, +3000 уведомлений через e-mail, +30 SMS-уведомлений и возможность их докупить

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

  • Интеграция CRM-систем со сделками и контактами.
  • Сбор статистических данных с возможностью указывать цели.
  • Приём оплаты через калькулятор.
  • Использование картинок и ссылок.
  • Отключение рекламы.
  • Клонирование проектов.
  • Встраивание в калькулятор HTML-кода.
  • Возможность прикрепления файлов в виджете.
  • Живой чат со службой поддержки (только на тарифе «Про»).
Читать еще:  Какой математический факт вас поражает больше всего

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

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

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

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

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

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

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

  • Отправка уведомления администратору сайта.
  • Переход по ссылке.
  • Переход к оплате.
  • Отправка данных в CRM.

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

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

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

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

  1. В форме есть поля, обязательные для заполнения: телефон, место подачи автомобиля и конечная точка маршрута. Без них создать заказ нельзя.
  2. При заказе такси человек выбирает тариф и дополнительные услуги. От этого зависит итоговая стоимость. Соответственно, формула должна выглядеть примерно так: цена = A+B+C, где A — базовая стоимость поездки, B — надбавка за выбор тарифа и C — стоимость дополнительных услуг. При этом если тариф может быть только один, то дополнительных услуг — много. И все они прибавляются к цене, когда человек их выбирает.
  3. При добавлении полей в калькулятор им автоматически присваиваются буквы. Вам остаётся только зайти на вкладку «Формула», ввести значения для каждой опции и сформировать формулу, используя базовые математические операции.

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

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

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

Источники:

http://stepform.io/ru/calculator
http://seoslim.ru/vedenie-bloga/kak-sdelat-kalkulyator-na-sajte-html-php-javascript-plugins.html
http://site-builders.ru/kak-sozdat-kalkuljator-dlja-sajta

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector
×
×
×
×