У нас Вы можете заказать разработку онлайн калькулятора для сайта. Онлайн-калькулятор представляет собой программный модуль, встраиваемый в Ваш сайт, и позволяет посетителям Вашего сайта оперативно вычислить стоимость предлагаемых на сайте услуг, продаваемых товаров и т.д. Мы разрабатываем индивидуальные онлайн калькуляторы любой тематики и сложности.
Разработанные нами онлайн калькуляторы легко устанавливаются и корректно работают на сайтах, работающих под управлением любых CMS (сокр. от «Система управления контентом»), например, таких как: Joomla, WordPress, Drupal, 1С-Битрикс, CMS-S3 («Мегагрупп») и другие. Все калькуляторы разрабатываются с учетом дизайна и структуры сайта, на который будут устанавливаться, что позволяет калькулятору органично вписаться в Ваш сайт и выглядеть как неотъемлемая часть сайта.
Примеры онлайн калькуляторов разработанных нами
Мы готовы разработать онлайн калькулятор для сайта под заказ любой сложности. Оценить уровень нашей работы Вы можете на примерах выполненных нами калькуляторов.
Посмотреть более подробный список разработанных нами онлайн калькуляторов для сайта можно в разделе Примеры наших работ
Отзывы клиентов о нашей работе
Как заказать у нас разработку онлайн калькулятора для сайта
Для того, чтобы заказать у нас разработку калькулятора для сайта свяжитесь с нами любым удобным для Вас способом:
- оставьте заказ на разработку онлайн калькулятора для сайта через форму:
- напишите нам на e-mail: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;
- позвоните нам по телефону: +375 (29) 189-83-22;
- закажите обратный звонок (укажите в заявке или письме Ваш номер телефона и удобное время звонка).
Если у Вас возникли какие-либо вопросы – напишите или позвоните нам!
Сколько стоит разработка онлайн калькулятора для сайта под заказ
Стоимость разработки онлайн калькулятора под заказ индивидуальна и зависит от сложности расчетов, дизайна калькулятора, наличия дополнительных функций и т.д. Чтобы узнать ориентировочную стоимость разработки интересующего Вас онлайн-калькулятора, оставьте заявку через форму обратной связи или напишите Нам письмо, где опишите функционал калькулятора.
Изменение цен на услуги, виды работ и товары в онлайн калькуляторе
Вы сможете самостоятельно изменять цены на услуги, виды работ, товары и т.д. в Вашем онлайн-калькуляторе. Все цены будут храниться в файле, который можно редактировать в Excel. По желанию заказчика Мы можем разработать панель администрирования для управления онлайн калькулятором. Панель администрирования представляет собой веб-интерфейс, с помощью которого владелец сайта может менять цены на услуги и товары в калькуляторе, а также добавлять новые виды товаров или услуг.
Установка онлайн калькулятора на сайт заказчика
Установку калькулятора на сайт заказчика мы выполняем бесплатно. Если по каким-либо соображениям заказчик пожелает установить калькулятор на свой сайт самостоятельно, то в этом случае к калькулятору будет приложена подробная инструкция по установке.
5 преимуществ разработки онлайн калькулятора для сайта
Обновляя сайт или заказывая «с нуля» хочется сделать что-то интересное, чтобы привлекло внимание заказчиков и, конечно же, повысило уровень продаж — онлайн-калькулятор под заказ – вот, что Вам нужно! Как калькулятор для сайта может сделать Вашу страничку реально продающей и постоянно интересной покупателям?
Предлагаем Вам ознакомится с пятью основными преимуществами разработки индивидуального онлайн-калькулятора под заказ.
1. Первое, что обеспечит разработка калькулятора — постоянный поток клиентов на сайт.
Почему это важно:
Больше потенциальных покупателей узнают о вашей компании, а каждый десятый может стать реальным клиентом. Чем больше заказчиков – больше продаж, тем выше прибыль – эта формула понятна даже современным детям.
2. Второе:
Если разработка индивидуального онлайн-калькулятора выполняется под заказ, то калькулятор на сайте — уникальный сервис. Сайт становится не просто страничкой, на которой можно глянуть интересные картинки и прочитать информацию. Его значение изменяется моментально. С онлайн-калькулятором он уже незаменимое средство, упрощающее ежедневные расчеты для посетителей. Ваша страничка для заказчиков становится как родная, а значит, при необходимости, будьте уверены, что они обратится именно к Вам и, обязательно (абсолютно бескорыстно) порекомендует друзьям и знакомым. Не стоит забывать, что теперь сайт исполняет роль мощнейшего оружия для борьбы с конкурентами. Конкуренты нервно ищут способы Вас обойти, но – безуспешно!
Такой результат принесет разработка онлайн-калькулятора!
3. Третье:
Разработка онлайн-калькулятора под заказ помогает снизить расходы на рекламу. Страничка в интернете, как рекламный инструмент, может полноценно заменить менее эффективные (чаще, и более дорогие) рекламные площади.
4. Четвертое:
Создание калькулятора упрощает работу персонала. Специалисты по продажам смогут:
- Сберечь время, которое они тратят на расчет стоимости для покупателей. Если клиента не устраивает цена, которую предоставил калькулятор на сайте, он не станет звонить и отвлекать менеджера.
- Ускорить цикл заключения сделки, ведь покупатель, просчитавший цену с помощью разработанного калькулятора, позвонив вам, с ценой уже согласился. В продажах убеждение клиента в адекватности цены – не самый легкий этап.
- Направить свои силы на изучение новых продуктов и технологий продаж. Даже таким образом создание калькулятора помогает увеличить число продаж.
5. Пятое:
Онлайн-калькулятор под заказ рассказывает (возможно, и показывает), из чего складывается цена на товар или услугу. Клиент понимает, что его не обманывают, видит, за что платит. Повышается доверие к фирме. Покупатель с удовольствием и позитивом с Вами сотрудничает. Повышается престиж компании – в Вашей компании ничего не скрывают от клиента, и он это обязательно оценит.
Важный момент – чтобы все свойства онлайн-калькулятора раскрыли себя на все 100%, калькулятор должен:
- располагаться на самом видном месте. Не нужно прятать далеко удобный сервис, каждый посетитель его должен найти без труда
- быть интуитивно понятным для любого из ваших клиентов. Стоит заметить, что Вы — специалист в своей области, а посетитель, который захочет воспользоваться калькулятором для сайта, совсем не обязательно.
И самое главное, просто необходимо связаться с нами и заказать разработку индивидуального онлайн-калькулятора под заказ!
Ведь если этого не сделать сейчас, то все вышеперечисленные выгоды от онлайн-калькулятора для сайта под заказ достанутся Вашим конкурентам!
Чтобы заказать калькулятор для своего сайта, свяжитесь с нами, используя форму обратной связи.
calc.by
Пример простого калькулятора для сайта на PHP + JS
Итак, если вы решите сами создать калькулятор, то знайте, что овладеть хотя бы базовыми знаниями языков программирования JavaScript и PHP все же придется.
Лично я с JavaScript мало знаком поэтому покажу позаимствованную структуру построения самого простого калькулятора, который может складывать два числа и выводить конечный результат по запросу.
Форма счетчика будет создана с помощью тегов
<form> … </form>
Для реализации ввода значений используем теги <input>
Функция Onchange — убирает значения при добавлении их в форму.
Функция Onkeyup — убирает значения при добавлении их в форму кроме цифр.
Далее добавляем переменные в форму для тегов input, например, первое значение это латинская «x», второе вводимое значение в поле это латинская «y», а выходное значение это «summa».
Теперь чтобы форма заработала надо ее наделить разумом, то есть создать скрипт с помощью Java, который и будет вести расчеты.
Словом calculators можно изменить на любое, так как им мы даем только название функции.
А для x, y, z задаем переменные, которые были созданные ранее.
Далее переходим обратно к форме и для тега input задаем функцию, отвечающую за расчет значений.
Для этого добавляем в инпут команду onclick =»calculators (this.form)» которая и запустить алгоритма калькулятора.
Как видите все не, так и сложно как может показать, теперь можно скачать в интернете чужие калькуляторы и редактировать их под себя, например, добавить другие значения и функции.
Как установить калькулятор на сайт
Весь принцип работы калькулятора завязан на выполнении скрипта, поэтому каким-то из способов надо добавить скрипт на страницу записи WordPress.
Сразу скажу, что если тот код что был создан выше закинуть в текстовый редактор записи, то ничего работать не будет, форма калькулятора отобразится, но вот расчет значений не произойдет.
В сети я нашел несколько путей как подключить JS скрипты к записям:
Шорткод. Данный способ основан на редактировании файла темы functions.php.
Здесь вам придется между < ?php … ? > вставить специальный код:
где вместо КОД вставляем свой скрипт, а для вызова шорткода на странице используем [ myJavascript1 ].
Функция wp_enqueue_script. С ее помощью можно подключить скрипт для конкретной страницы. Данный способ популярен, но требует больших знаний движка и его структуры.
Правка header.php. Один из наихудших методов, основанный на добавлении специального кода перед закрывающим тегом </ head> с номером страницы, в которой надо отобразить скрипт.
Конструкция iframe. Один из простейших способов, где надо создать новый файл и закинуть в него скрипт.
Далее загружаем этот файл к себе на хостинг, а в статье в том месте, где будет выводиться калькулятор размещаем код iframe, через который и будет отображаться содержимое из внешних файлов.
- ссылка — адрес где расположен файл с готовым калькулятором;
- параметры width и height — задают размеры формы;
- параметр frameborder — присваивает толщину границы фрейма;
- параметр scrolling — задает или убирает полосу прокрутки.
Лично я изначально вставлял калькулятор на блог последним способом, но этот метод стал неэффективным после появления мобильной версии сайта, так как выводимая форма не адаптирована под другие разрешения экранов.
В этом случае все равно приходится прибегать к помощи фрилансеров, я нахожу их за копейки в сервисе Kwork, чтобы они все подправили и вставили калькулятор в запись традиционным способом, а на хостинг отдельно загружается только сам скрипт.
Но можно пойти и другим путем, об этом далее.
seoslim.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
Реализация:
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>
Скачать исходный код
way-on-top.ru
Мы уже привыкли к виджетам на сайтах. Выпрыгиваюшие онлайн-консультанты и кнопки обратного звонка. Предлагаю к ознакомлению еще один интересный способ собирать заявки на сайте — онлайн-калькуляторы. Конечно, можно заказать разработку собственного калькулятора, но есть сервисы, предоставляющие готовые решения. Это отличный способ быстро внедрить и протестировать новый инструмент на сайте.
Где применить онлайн-калькулятор?
В некоторых отраслях калькуляторы на сайтах начали применяться задолго до моды на «виджетизацию». Например, в строительных услугах и продаже строй-материалов:
- Калькуляторы стоимости ремонта квартиры
- Калькулятор строительства загородного дома
- Калькулятор расчета утеплителя
- Различные расчеты пластиковых окон
Другие сферы, где очень часто можно встретить онлайн-расчеты: кредиты, страховка, продажа автомобилей, продажа билетов и туров, службы такси и грузоперевозок, клининг и так далее. Калькулятор можно внедрить практически в любую сферу бизнеса. Это добавит сайту интерактива и поможет собирать больше заявок.
Moclients.com
Сервис состоит из 6 виджетов для сайта. Среди них есть онлайн-калькулятор. На самом деле это не калькулятор — просто форма сбора заявок с шагами. В нем не производятся никакие расчеты. Клиенты проходит шаг-1, шаг-2, шаг-3 и получают предложение отправить результат на их почту.
Работает? — Да. Очень рекомендую протестировать данный сервис в сравнении с нижеприведенными калькуляторами. В моей практике был случай, когда на сайте по ремонту квартир, онлайн-калькуляция с реальными ценами сильно «уронила» объем получаемых заявок. Любой из виджетов в этой статье считает грубее человека. Такие расчеты могут отпугнуть потенциального клиента + нет возможности сгладить цену другими факторами при первом телефонном контакте. Так называемый contact wall — «оставь контакты и получи», работает практически всегда.
Вернемся к Моклиентс. В вашем распоряжении есть бесплатная версия любого виджета на любое количество сайтов, но при этом c ограничением в 10 заявок/месяц. Платная версия любого калькулятора для 1 сайта стоит 490 рублей /месяц + 2 недели бесплатного использования.
Можно настроить цели и передавать события в Яндекс Метрику и Google Analytics.
Сайт предоставляет 5 различных способов оплаты, техническая поддержка быстро консультирует через чат или почту. Я сам пользуюсь этим виджетом несколько месяцев и мой отзыв: стоит попробовать. Встречались ошибки в программной/фронт-енд части, но их довольно быстро устраняли. Интерфейс админ-панели можно назвать «сыроватым».
uCalc.pro
Сервис от легендарного конструктора сайтов Ucoz. У этого калькулятора есть три важных преимущества.
- Настоящий калькулятор. В админ-панели настраиваются формулы, клиент получает реальный расчет на сайте.
- Есть возможность редактировать код калькулятора.
- Интеграции. Есть модули для всех популярных CMS-систем. Можно передавать события в Яндекс Метрику и Google Analytics + данные из этих систем аналитики передаются в красивые дашборды на сервисе.
- Есть шаблоны калькуляторов для различных отраслей бизнеса: такси, ОСАГО, доставка пиццы, уборка помещений, праздники.
- На мой взгляд, лучший дизайн из всех сервисов в этой статье. Это касается и интерфейса админ-панели и виджетов.
- SMS/E-mail уведомления о новых заявках из калькулятора.
Слово «бесплатно» — одно из самых используемых на посадочной странице. Бесплатный тариф ограничен 100 E-mail уведомлениями, отсутствием возможности редактировать код калькулятора, присутствием копирайта и т.д.
В платном тарифе стоимость составляет $5 в месяц на один сайт. Интересно, что если вы готовы сразу заплатить $150, то эта сумма зачтётся за 5 лет, таким образом получается уже $2,5 в месяц. 7 дней дается на тестирование платной версии.
Calccreator.com
Сalccreator.com – это настоящий drug-n-drop конструктор калькуляторов. Вам придется собирать виджет по кнопочкам, флажочкам и другим элементам. С 0, никаких шаблонов здесь нет. Потребуется выдержка и талант. Плюсом этого калькулятора для сайта можно назвать полную гибкость. Можно собирать варианты с любыми формами, слайдерами, выпадающими списками и т.д. При большом желании можно получить целый интернет-магазин. Дизайн прихрамывает на обе ноги.
Можно скачать получившийся код или вставить его на сайт через iframe. Этот сервис отлично подойдет разработчикам или веб-мастерам, которые хотят создавать для своих клиентов сложные конструкторы и передавать исходный код.
Есть 5 бесплатных проектов. Дальше 1 месяц будет стоить 795 руб, 3 месяца — 1390, 6 месяцев – 1810 руб.
BitCalc
Конструктор BitCalc, представляет сайт Bitronica.com. Рекордсмен по сложности. Начиная с покупки, заканчивая настройкой.
Дизайна как такового нет. Но наиболее удобным признаётся выбор любого калькулятора прямо из имеющегося набора шаблонов, пока без привязки к конкретному сайту. Пользователь просто выбирает шаблон, указывает его параметры и «опускает в корзину». Таким образом, появляется возможность собрать целый пакет, который можно будет потом распределить по сайтам.
Любой созданный калькулятор имеет бесплатный начальный период использования – 14 дней. В дальнейшем устанавливается стоимость в 240 руб за месяц на один сайт. Протестировать виджет до принятия окончательного решения можно и бесплатно.
Есть дополнительные виджеты – форма заказа, всплывающее окно акции, подписка на рассылку, каталог продукции.
Web-forms.ru
Сервис от создателей CMS Webasyst. Данный конструктор ориентируется на реализацию форм любого назначения. Можно строить формы заказов, опросов, обратной связи.
В течение 14 дней любой виджет можно использовать бесплатно, далее аренда в месяц одного виджета на одном сайте – 659 рублей. Приобретение при неограниченном сроке использования и постоянной технической поддержке — 2999 руб.
gruzdevv.ru
Изучите основные функции HTML. Описываемый код, посредством которого можно создать калькулятор, включает множество элементов синтаксиса, которые определяют различные параметры страницы. Прочитайте статью о том, как выучить HTML, или читайте дальше, чтобы узнать, для чего предназначена каждая строка представленного здесь кода.
- html: этот элемент синтаксиса свидетельствует о языке, на котором написана программа. При написании кода могут использоваться несколько языков программирования, поэтому тег <html> указывает на язык HTML.[1]
- head: внутри этого тега задаются параметры других данных, то есть указываются так называемые метаданные. Как правило, команда <head> используется для определения параметров стилистических элементов, таких как заголовки, подзаголовки и так далее. Этот тег представляет собой своеобразный зонтик, под которым находится основная часть программы.[2]
- title: этот тег определяет название страницы, которое отобразится в веб-браузере, когда вы ее откроете.
- body bgcolor= «#»: этот атрибут задает цвет фона страницы. Число, которое вводится внутри кавычек после символа #, соответствует определенному цвету.
- text= «»: слово, которое вводится внутри кавычек, определяет цвет текста страницы.
- form name=»»: этот атрибут определяет имя формы, которая используется для создания структуры на основе того, что Javascript известно значение имени формы. В нашем примере в качестве имени формы будет использовано значение «calculator» (калькулятор), что приведет к созданию специальной структуры страницы.[3]
- input type=»»: это, пожалуй, основной атрибут, который определяет, каким элементам страницы соответствуют значения, введенные внутри кавычек. Например, такими элементами могут быть тексты, пароли, кнопки (как в нашем случае с калькулятором) и так далее.[4]
- value=»»: эта команда определяет символы, которые отобразятся на элементах, заданных атрибутом «input type=». В случае калькулятора такими символами являются цифры (1-9) и математические операции (+, -, *, /, =).[5]
- onClick=»»: этот синтаксис описывает событие, которое должно произойти при нажатии на кнопку. В случае калькулятора нужно сделать так, чтобы символ, отображенный на кнопке, понимался системой в буквальном смысле. Например, если на кнопке отображена цифра 6, в кавычках нужно ввести следующее значение: document.calculator.ans.value+=’6′.[6]
- br: этот тег инициирует разрыв строки на странице, поэтому все, что расположено после этого тега, будет отображено на следующей строке.[7]
- /form, /body, and /html: это закрывающие теги, которые завершают процессы, запущенные соответствующими открывающими тегами.[8]
ru.wikihow.com