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

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

Плагин WPCalc рассчитает стоимость работы или услуги

Использую в WordPress плагин WPCalc давно, потому что настройка расчета стоимости сводиться к созданию формулы и внешнего вида. Устанавливаем и активируем из административной панели поиском по плагинам.

WPcalc в поиске

Появится новый раздел в меню WPCalc заходим в него, нажимаем Add New.

Добавление поля

Появится строчка с надписью Add new fields, она добавляет элемент в пример вычисления формулы, которую будем писать дальше. Сделаем калькулятор для подсчета наливных полов, выведем четыре поля:

  • Длина
  • Ширина
  • Прайс за 1 квадратный метр
  • Возможность выбора опции снятие старой заливки

Логика такая: находим площадь, умножаем на стоимость работы за 1 кв м, и прибавляем цену за снятие старого материала (исходя из площади). Первой зададим длину.

Задаем параметр расчета
  1. Раздел Title задает заголовок, можно не показывать и снять выделение чекбокса
  2. Item type – тип показывает как будет показана функция, нужно чтобы пользователь вводил цифры, значит выставляем input
  3. Field width – сколько места занимает строчка ввода по горизонтали, выставлю 6/12 чтобы рядом прописать еще раздел ширины
  4. Validation – выставляем number, все что не имеет числового значения расценивается ошибкой
  5. Placeholder – заполнитель текстовой области, написал «введите длину
  6. Value – значение по умолчанию, записал 0
  7. По аналогии создаем еще один fields ширины, должно получится так.
дублируем ширину

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

Дополнительная услуга

Обозначил Item type как Checkbox, с помощью галочки. Размер 12/12, value 1000, то есть тысяча рублей будет браться за очистку 1 квадратного метра пола. Selecte оставил не отмеченным, чтобы услуга по выравниванию по умолчанию не прибавлялась.

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

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

В тайтле написал результат, выводить не стал. В поле item type выставил Result. В разделе formula пишем принцип вычисления. У каждого окна есть название в данном случае Field 4. Цифра показывает номер объекта, оно не повторяется в рамках одного калькулятора. 1 — длина, 2 — ширина, 3 — стоимость за очистку.

Записываем элемент в формулу через нижнее подчеркивание, например field_1.

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

В разделе делаем окончательный расчет оператором {result}, перед ним написал текст. Нажимаем на сохранить, копируем шорткод калькулятора для вставки на сайт WordPress.

Копируем шорткод

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

Вставляем shortcode в запись

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

Проверка работы калькулятора

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

Оформление

Платный вариант плагина

В платном варианте есть несколько дополнительных функций:

  • Неограниченное количество форм
  • Больше стилей
  • Интеграция с Mailchimp и Getresponse
  • Отправка писем с результатом расчета пользователю и админу
  • Добавить адрес электронной почты в базу данных
  • Добавить форму после публикации контента
  • Виджет с формой
  • Копирование и экспорт списка контактов в .xls, .csv

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

Поддержка и помощь разработчиков

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

Чтобы рассчитать стоимость доставки и расстояние придется использовать WooCommerce (советую прочитать как подключить Robokassa) и дополнения от систем доставки таких как DPD или СДЕК, других вариантов к сожалению нет.

Видео инструкция

Чтобы процесс создания понять лучше, записал свое видео.

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

Русские разработчики позаботились о пользователях как платных, так и бесплатных тарифов. На неофициальном сайте есть все расчеты с формулами, какие отрасли затронуты:

  • Кредитные сделки
  • Процентные операции
  • Ландшафтное направление
  • Наука
  • Красота
  • Питание
  • Конвертеры
  • Строительство

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

Сборник формул

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

Примеры других калькуляторов

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

  1. WPCC – не обновлялся 6 лет, имеет простую панель, не совместим с новыми версиями PHP
  2. Responsive Mortgage Calculator – калькулятор разрабатывался для недвижимости особенно ипотечные сделки
  3. Calculated Fields Form – предоставляет необходимые возможности доступные только в платной версии. Огромный плагин WordPress, разобраться сложно, для простых задач используйте мой вариант

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

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

UCalc настраиваемый под любые цели

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

UCalc

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

Calccreator

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

Calccreator

Можно за один месяц создать максимум калькуляторов и ставить на сайты клиентов. Скрипты проверены с WordPress, совместимость подтверждаю.

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

Пожалуйста, оцените материал:

Давно занимаюсь и разрабатываю сайты на Wordpress. Считаю что лучшего решения для ведения бизнеса не найти, поэтому считаю долгом делиться информацией с остальными.
Получай полезные материалы удобным способом!
Комментарии:
  1. Добрый день. Подскажите можно ли использовать логические функции в расчетах в Плагине WPCalc. Плагин понравился, очень удобный и простой в настройке. Мне надо чтобы переменная принимала то или иное значение в зависимости от расчета после введенных данных.

    1. Приветствую, вот этого не знаю, посмотрите информацию по плагину на его странице в репозитории ru.wordpress.org/plugins/wpcalc. Там есть ссылки и на официальный сайт, у них там много интересных решений.

  2. странно, но wpcalc не выдает результат все по инструкции… а результат не пишет

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

  3. Спасибо за материал! А как можно получить готовые калькуляторы на русском языке отсюда? wpcalc.com/ves-i-rost-rebenka-do-5-let

  4. Этот плагин WPCalc с багами. Через некоторое время после его использования исчезает вкладка Add new. И все. Вы ничего уже не можете создавать.

  5. Добрый день!

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

  6. я хотел бы разместить у себя на сайте калькулятор, во-первых, чуть посложнее, чем вы описали (создание портфеля акций), во-вторых, чтобы им пользовались на платной основе. Все это в Excel я уже сделал сам и давно пользуюсь. Можно ли у вас заказать такую работу. Вместо ТЗ могу сбросить вам работающий калькулятор в Excel. Там есть формулы и все, что может пригодиться.
    Наверняка, я бы сам разобрался со всем этим, но времени жалко.
    если интересно, ответьте, и обсудим детали.

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

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