Как сделать калькулятор или форму для сайта: обзор 4 специальных конструкторов

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

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

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

Содержание

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

А именно:

— простое поле ввода; тег <input> в HTML

— раскрывающийся список, тег <select> в HTML

— переключатель; тег <input type=»radio»> в HTML

— переключатель; тег <input type=»checkbox»> в HTML

— кнопка;

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

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

Реализация:

HTML:<div> <input value="10" type="number" id="chislo"> — сюда вводим число; <br /> <br /> <!— id="chislo" — уникальный идентификатор, по нему мы будем обращаться, чтобы выцепить данные из поля —> <select id="spisok"> <!— id="spisok" — уникальный идентификатор, по нему мы будем обращаться, чтобы выцепить данные из полей выбора —> <option value="1">1</option> <option value="2" selected>2</option> <!— аттрибут selected отвечает за пункт, выбранный по умолчанию —> <option value="3">3</option> <!— value = значения, которые соответствуют пунктам списка. —> <option value="4">4</option> </select> — умножим на это число; <br /> <br /> <input type="radio" value="10" name="n2" checked> 10 <br /> <!— обратите внимание, что у всех type="radio" должен быть одинаковый аттрибут name="n2", это позволяет объединить их в группу.

Знакомый нам аттрибут value также содержит в себе значение, соответствующее данному пункту —> <input type="radio" value="20" name="n2"> 20 — прибавим одно из этих чисел<br /> <input type="radio" value="30" name="n2"> 30 <br /> <br /> <input value="2" class="checkbox" type="checkbox" checked> 2 <br /> <input value="5" class="checkbox" type="checkbox"> 5 — разделим на эти числа <br /> <input value="10" class="checkbox" type="checkbox"> 10 <br /> <br /> <!— и снова в value пишем значение, соответствующее данному пункту —> <button onclick="Start();">Рассчитать!</button> <br/> <br /> <!— задаем выполнение функции Start при клике на кнопку —> <div style="font-weight:bold" id="result"></div> <!— контейнер для вывода результатов —> </div>

JavaScript:<script> function Start(){ var chislo = document.getElementById('chislo').value; //выцепляем значение value первого вводимого поля var spisok = document.getElementById('spisok').value; //выцепляем значение value множителя из списка var radios = document.getElementsByName('n2'); //определяем какой из пунктов выбран и запоминаем его value в переменную radio for (var i = 0; i < radios.length; i++) { if (radios[i].type == "radio" && radios[i].checked) { var radio = parseInt ( radios[i].value ); } } var checkboxes = document.getElementsByClassName('checkbox'); //определяем какие из "галочек" выбраны и запоминаем их value в массив checkbox checkbox = []; // задаем пустой массив checkbox for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) { checkbox[checkbox.length] = checkboxes[i].value; //дописываем к массиву checkbox значение value, если оно выбрано } } var result = chislo * spisok + radio; //элемент первого поля умножаем на значение из списка и прибавляем значение из следующего списка.

Промежуточный результат сохраняем в result for ( var i = 0; i< checkbox.length; i++ ){ //последовательно в цикле делим промежуточный результат result на каждый из элементов массива checkbox (значения value отмеченных галочками пунктов) result = result / checkbox[i]; //и снова пишем в переменную result } document.getElementById('result').innerHTML = 'Результат: ' + result; //выводим получившееся значение в div с id="result" } </script>Скачать исходный код

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

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

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

Как же быть? uCalc — бесплатный конструктор калькуляторов и форм для сайтов, социальных сетей и мессенджеров.

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

Попробовать создать калькулятор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать калькулятор или форму для сайта: обзор 4 специальных конструкторов

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

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

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

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

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

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

Профессиональный калькулятор под ключ

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

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

Заказать калькулятор под ключ

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

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

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

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

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

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

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

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

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

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

Уважаемый пользователь! Реклама помогает поддерживать и развивать наш проект. Просьба отключить блокировку рекламы.

Подробней

Автор

Илья

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

Калькулятор расчета стоимости натяжных потолков на jQuery

28 декабря 2017, 20:27    Alex Javascript & jQuery0    1028 +1

В этой статье мы сделаем простой калькулятор на jQuery. Дело в том, что часто сталкиваясь с нетривиальными задачами в веб-разработке, Вас могут попросить сделать калькулятор на сайт. К сожалению, сделать это при помощи чистого html и css не представляется возможным, как бы этого сильно не хотелось, и поэтому используются скрипты.

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

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

Рассчет стоимости потолка

Примерная стоимость: 0 руб.

Готовая HTML разметка

Рассчет стоимости потолка

Примерная стоимость: 0 руб.

Оформление калькулятора

.price{ padding: 20px 20px 0px 20px; min-height: 200px; border-radius: 5px; max-width: 660px; border: 5px solid #fff200; background:#f9f9f9; } .calc_title{ font-size: 28px; color: #ee1d25; margin: 0 0 20px; } .result{ padding: 20px 0 0; margin: 20px 0; font-size: 24px; border-top: 1px solid #e0e0e0; } span.total{ color: #ed1d25; } .calculator input[type=»text»], select { padding: 5px 10px; border: 1px solid #ccc; margin-right: 10px; margin-bottom: 10px; }

Готовый скрипт калькулятора расчета стоимости натяжных потолков

(function ($) { $(function () { calculate(); jQuery(‘#calculator input’).keyup(function() { this.value = this.value.replace(/[^0-9\.,]/g, »); this.value = this.value.replace(/[,]/, ‘.’); }); jQuery(‘#calculator input, #calculator select’).change(function() { calculate(); }); jQuery(‘#calculator input’).keyup(function() { calculate(); }); function calculate() { $(‘.calculator’).each(function(key, val){ calcInputs = {}; $(this).find(‘input, select’).each(function(key, val){ name = $(this).attr(‘name’); val = $(this).val(); if (!$.isNumeric(val)) { switch (name) { case ‘area’: val = 1; break; case ‘corners’: val = 4; break; case ‘lamp’: val = »; break; case ‘tube’: val = »; break; case ‘chandelier-hook’: val = »; break; default: break; } $(this).val(val); } calcInputs[name] = val; }); total = 0; switch (calcInputs.texture) { case ‘mat’: total += calcInputs.area * 113; break; case ‘glossy’: total += calcInputs.area * 180; break; case ‘satin’: total += calcInputs.area * 180; break; case ‘fabric’: total += calcInputs.area * 900; break; default: break; } // каждый угол total += calcInputs.corners * 40; // установка люстры if (calcInputs[’chandelier-hook’] >= 1) { total += calcInputs[’chandelier-hook’] * 500; } // установка встраемого светильника if (calcInputs.lamp >= 1) { total += calcInputs.lamp * 350; } // обход трубы if (calcInputs.tube >= 1) { total += calcInputs.tube * 300; } install = calcInputs.area * 170; total += install; total += ‘ руб.’; jQuery(this).find(‘span.total’).html(total); }); } }); })(jQuery); ;


Похожие статьи:

Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?
Скролинг страницы вверх и вниз по клику на кнопку
Parallax эффект для одиночного элемента с библиотекой RELLAX
Плавная прокрутка страницы после нажатия на якорную ссылку
jQuery анимация для сайта — эффекты появления DIV блоков

CalcCreator.com — конструктор калькуляторов онлайн.

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

Совет 1: Как сделать калькулятор

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

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

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

Как сделать калькулятор для сайта без программиста. Часть 1: конструктор калькуляторов

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

С его помощью вы сможете вводить данные, при этом используя интерфейсные визуальные кнопки либо непосредственно клавиатуру. Кроме этого предоставленный калькулятор онлайн позволить осуществить расчеты сложных выражений, к примеру: (21-45)/(1.5*2)*(8+2*2)=-96. Ну а если вам не достаточно функций, которые описаны ниже, то вам поможет инженерный калькулятор.

Функция Порядок выполнения
Нахождение обратного числа Ввести число, для которого нужно найти обратное, нажать кнопку 1/x
Извлечение квадратного корня (корня 2-й степени) Ввести число, из которого нужно извлечь квадратный корень, нажать кнопку √x
Извлечение кубического корня (корня 3-й степени) Ввести число, из которого нужно извлечь кубический корень, нажать кнопку 3√x
Извлечение корня заданной степени Ввести число, из которого нужно извлечь корень заданной степени, нажать кнопку y√x, ввести значение степени извлекаемого корня
Вычисление десятичного логарифма (логарифма по основанию 10) Нажать кнопку log, ввести число, для которого нужно вычислить логарифм по основанию 10
Операции с числом e Если необходимо произвести математическую операцию с числом e или с использованием этой константы, то вместо введения значения этого числа нужно просто нажать кнопку e
Возведение числа 10 в степень Нажать кнопку 10x, ввести значение степени, в которую нужно возвести число 10
Возведение в квадрат (2-ю степень) Ввести число, которое нужно возвести в квадрат, нажать кнопку x2
Возведение в куб (3-ю степень) Ввести число, которое нужно возвести в куб, нажать кнопку x3
Возведение в заданную степень Ввести число, которое нужно возвести в заданную степень, нажать кнопку xy, ввести значение степени
Операции с процентами Для вычисления, чему равно определённое количество процентов от числа, нужно ввести это число, нажать кнопку x (т.е.

умножить), ввести количество процентов и нажать %.
Чтобы прибавить к числу (или вычесть) определённое количество процентов от него, нужно ввести это число, нажать кнопку + (или, соответственно, –), затем ввести количество процентов и нажать %

Операции с мнимой единицей (число i) Для использования в вычислениях мнимой единицы (числа i), необходимо нажать кнопку i

Обновлено: 08.04.2018

 

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

Закрыть меню