Как сделать калькулятор: плагин для WordPress

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

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

Но чтобы сделать самому такой калькулятор, нужно значительно вложиться. Это окупиться нескоро, потому многие отказываются от такой затеи. А ведь можно было использовать специальный плагин! Существует масса дополнений, которые позволяют добавлять live-расчет чего угодно на сайт. В данной статье рассмотрим самые популярные модули для калькулятора и их особенности:

1. Mortgage Calculator Sidebar Widget

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

2. Mortgage Loan Calculator

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

• сумма долга;
• процентная ставка;
• срок ипотеки.

3. Financial Toolbox

Это «двойной» плагин для WordPress, который не только позволит проводить расчеты онлайн, но и добавит на сайт дополнительный поток информации. Модуль предназначен для бизнес-порталов о финансах, биржевых рынках и инвестициях. Дополнение разделено на две части: бегущую строку с последними новостями из мира финансов, а также калькулятор для обсчета кредитов разного типа (не только ипотеки). Не совсем подходит для Рунета, так как новости транслирует на английском, но тем не менее, плагин полезный.

4. Net Worth Calculator

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

5. Debt Reduction Calculator

Еще один долговой калькулятор. Только он более «умный», чем его предыдущие аналоги. Этот плагин WordPress дает возможность узнать не только сумму оставшегося долга, но и способы быстрого решения проблемы. С ним посетитель сможет узнать сколько ему нужно платить, чтобы как можно скорее избавиться от тягостного кредита или займа. Для этого пользователь вбивает информацию о характеристиках кредита, задает крайние сроки — и получает готовую формулу решения его проблемы.

6. BMI Calculator Widget

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

7. Adele’s Zodiac Calculator

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

8. Runner’s Log

Мощный многофункциональный калькулятор, у которого уже есть тысячи постоянных пользователей. Разместите этот плагин у себя на сайте WordPress, и часть этих пользователей перейдет к вам, и будут заходить на ресурс ежедневно, наращивая показы. Популярность инструмента спровоцирована его широким функционалом — калькулятор Runner’s Log рассчитывает калории, беговые расстояния, время тренировок, индекс BMI, прогнозируемое изменение веса и другие полезные статистические данные.

9. Blog or Website Value Calculator

Указанный калькулятор больше понадобится вам, нежели посетителям. Blog or Website Value Calculator — это плагин для подсчета стоимости сайта WordPress. Подсчет ведется в автоматическом режиме. Размещенный виджет будете видеть вы и ваши посетители. Таким образом вы сможете продемонстрировать всем свой рост, и показать успехи, каких достигли. Вебмастера, которые пользуются данным дополнением, уверяют, что он приносит недюжинную мотивацию!

10. Math Calculator

Когда речь зашла о калькуляторе, наверное, все, кто это читает, подумал о классическом приборе для подсчета математических данных. Плагин Math Calculator как раз этим и занимается. Только теперь пользователям не понадобится заходить в меню «Пуск» или брать телефон, чтобы провести расчеты — они смогут выполнить их прямо у вас на сайте WordPress. Это удобно, и если правильно воспользоваться такой возможностью, можно значительно повысить эргономичность вашего интернет-ресурса.

11. TimeZoneCalculator

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

12. Overweight Calculator

Еще один весовой калькулятор. Данный плагин WordPress также рассчитывает индекс массы тела. Главное его отличие в том, что помимо индекса BMI он указывает рекомендуемый вес для человека, а также килограммы, от которых нужно избавиться.

13. Love Calculator

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

14. Countdown Timer

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

15. GeneralStats

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

• сколько всего пользователей;
• категорий;
• записей;
• комментариев;
• страниц;
• ссылок;
• меток;
• слов и т. д.

Еще один подобный плагин для WordPress — Post Stats. Он также высчитывает количество слов, записей и т. д., только еще отображает минимальные и максимальные их значения.

16. Price Calc

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

Выводы

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

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

wordpresslib.ru

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

Возможности конструктора:
* Поле : Текстовое поле для описания
* Поле : SELECT выпадающий список
* Поле : Checkbox множественный выбор
* Поле : Radio одиночный выбор
* Поле : Input Text для ввода данных
* Поле : Input Hidden скрытое поля
* Поле : $_SESSION работы с сессиями
* Поле : jQuery копируем данные
* Поле : Slider UI удобный слайдер
* Поле : Conditions условие работы полей с возможностью задать оператор : == , <, < =,> ,> =, between
* Поле : Conditions Hidden — скрытое условие для получения значения в зависимости от результата
* Поле : Арифметическая функция : Квадратный корень ; Возвести в степень ; Округлить
* Поле : Результат полей : результат между полями
* Поле : Произвольное поле записи : Custom Fields из записи или страницы

Отправка результатов на E-Mail:
* Настройка: Включить / выключить форму отправки
* Настройка: Тема письма
* Настройка: Указать на какой e-mail
* Настройка: Валидация полей
* Настройка: Оформление содержимого письма

Результаты расчета:
* Настройка: Можно добавить более 1 результата после расчета
* Настройка: Позволяет добавить арифметическое выражение для каждого из результата
* Настройка: Округление
* Настройка: Оформление

Другие настройки:
* Количество калькуляторов не ограничено
* Экспорт и импорт формулы
* Выбор дизайна калькулятора
* Хук ‘wpcc_result_filter’ на результате

Интерфейс админ панели

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

Принцип работы калькулятора:
поле1 + sqrt((поле 3 * (поле 2 + поле 4)))

Дословно:
(id1 (знак после поля)) квадратный корень из ((знак перед полем id3 знак после поля) (знак перед полем id2 знак после поля) (id4 знаки после поля))

Как установить плагин:
1. Скачать плагин — http://wordpress.org/plugins/wp-creator-calculator/
2. Закачать в папку плагинов вашего сайта wp-content/plugins/
3. Активировать плагин
4. Слева в меню административной панели выберите пункт WPCC
5. Создавайте и настраивайте свой калькулятор.

zetrider.ru

Принцип работы калькулятора:

поле1 + sqrt((поле 3 * (поле 2 + поле 4)))
Дословно:
(id1 (знак после поля)) квадратный корень из ((знак перед полем id3 знак после поля) (знак перед полем id2 знак после поля) (id4 знаки после поля))

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

Так же у всех калькуляторов есть следующие индивидуальные настройки:

Общие настройки:

• Название кнопки — по умолчанию Расчитать. Вы можете указать например: Получит результат
• Текст перед суммой — по умолчанию: Результат. Отображается перед результатом расчета.
• Текст после суммы — по умолчанию: Руб. Наример можно указать $.
• Action формы — куда перенаправить пользователя после расчета. (Работает только в случаи отключенного JavaScript)
• Округлять результат — можно выбрать фунацию при помощи которой будет обработана сумма результата. Для вас доступны: Round (от 0 до 4 знаков после запятой), Ceil и Floor.
• Дизайн калькулятора: Вы можете выбрать одну из четырех готовых тем на любой вкус, либо внести правки в существующую.

Настройки писем:

• Включить отправку писем — если требуется отправлять письма после расчета, выберите Да
• Тема — Тема письма, которое отправляется на E-Mail. После темы автоматически добавляется Имя пользователя. Например: Расчет калькулятора от пользователя Вася Пупкин.
• На какой E-Mail отправлять — укажите email. По умолчанию email администратора.
• Текст в начале письма — Текст перед таблицей с результатами расчета
• Текст перед формой — Отображается перед формой отправки письма пользователем.
• Сообщение об успешной отправке — Отображается, когда сообщение успешно отправлено.

p.s. Поля не проходят валидацию. Отправляется то, что указал или не указал пользователь.

Загрузка скриптов плагина:

С версии 3.5 для полноценной работы плагина подключаются библиотеки: (jquery-ui-core, jquery-ui-slider, wpcc.js и пр.). Чтобы не захламлять вашу страницу, вы можете указать ID страниц, на которых размещен шорткод плагина, тогда скрипты будут подгружаться только там. Если вы используете виджет плагина, то укажите 0 (ноль) для загрузки скриптов на всех страницах сайта. Эти настройки одинаковы для всех создаваемых калькуляторов.

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

Текстовой блок:

Отображает заголовок и текст указанный в его параметрах.

• Заголовок — отображается над полем.
• Текст — можно указать любой произвольные текст, который не участвует в формуле расчета. Поле поддерживает html теги. Отступы добавляются автоматически (nl2br).
  Все результаты расчетов калькулятора записываются сессию, в связи с этим можно указать следующие коды, которые выведут нужный результат из $_SESSION.
  [session id=«номеркалькулятора»]указать номер поля калькулятора или указать sum для отображения результата[/session]
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.

Select:

Отображает выпадающий список с возможность выбора 1 параметра.

• Заголовок — отображается над полем.
• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Список — Данное поле позволяет создавать варианты в выпадающем списке. В прошлых версиях списки составлялись по следующему шаблону:
  [цена]: название поля;
  [цена2]: название поля2;
  с версии 3.5 шаблон списков стал проще:
  цена: название поля
  цена2: название поля2
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.

Checkbox:

Позволяет произвести множественный выбор из списка.

• Аналогично полю SELECT кроме параметров:
• Действие с данными — Арифметический знак, который означает действие между выбранными чекбоксами.
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда ни один checkbox не был выбран.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые выбрал пользователь в отправляемом письме.

Radio:

Позволяет произвести одиночный выбор из списка.

• Аналогично полю SELECT.

Input Text:

Отображает поле для ввода параметров пользователем.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда посетитель ничего не ввел в поле.
• Цена — Нужно указать цифру, которая будет связана с действием, указанным в параметре поля и произведено с введенными пользователем данными.
• Действие с данными — Арифметический знак, который означает действие с введенными данными посетителем и ценой поля.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые ввел пользователь в отправляемом письме.

Input Hidden:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Цена — Нужно указать цифру, которая будет участвовать при расчете.

$_SESSION:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда данные из сессии пусты.
• ID калькулятора — Указываем ID калькулятора, из которого необходимо получить данные
• ID поля или sum — Указываем ID поля или пишем sum, чтобы получить результат

jQuery поле:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая будет применена при расчете в случае, когда данные поля пусты.
• ID поля — Указываем ID поля из которого нужно скопировать данные. Работает для: Input text, Select, Radio, Checkbox, Slider

Арифметическая функция:

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

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Какую функцию используем — Есть возможность выбрать две функции:
  1. Извлечь квадратный корень — позволяет извлечь квадратный корень из поля или группы полей. Для корректной работы обязательно следует обернуть поле в скобки. Например:
  Мы хотим извлечь квадратный корень из поля 15, значит формула должна выглядеть следующим образом:
  [12](15) — квадратные скобки лишь визуально обозначают, что это поле арифметическая функция.
  Если мы хотим извлечь квадратный корень из группы полей, их так же следует обернуть квадратными скобками:
  [12](15+57-11)
  2. Возвести в степень — позволяет возвести в степень поле или группу полей. Для корректной работы поле должно быть охвачено скобкам! В конце скобки указываем степень, в которую нужно возвести поле. Например, возведем поле 10 в степень 2:
  [12](10, 2) — где 2 это степень.
  Мы должны указать в «Знак до» или «Знак после» поля, которое мы возводим в степень следующие параметры:, 2)

Slider:

Поле, которое позволяет отобразить слайдер (ползунок).

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию — Нужно указать цифру, которая отобразит ползунок в указанном отрезке между Минимальным и Максимальны значением.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Минимальное значение — Нужно указать цифру, которая будет являться минимальным значением ползунка.
• Максимальное значение — Нужно указать цифру, которая будет являться максимальным значением ползунка.
• Шаг — Нужно указать цифру, с каким шагом будет «скользить» ползунок.
• Положение — в каком положении будет отображен ползунок. Вертикально или Горизонтально.
• Это поле участвует в формуле расчета — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.

Условие IF VAL Field == Val User:

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

• Какое поле сравниваем — Укажите ID поля, значение которого мы будем сравнивать для выполнения условия. Работает для: Input Text, Select, Checkbox, Radio, Slider.
• Какое значение должно быть у поля — Укажите значение, которое будет сравниваться в условии. Например 100
• Какие поля отображаем — Укажите ID полей через запятую, которые нужно отобразить и включить в формулу расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Да, добавить display: none»
• Какие поля скрываем — Укажите ID полей через запятую, которые нужно скрыть и исключить в формуле расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Нет»

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

Шорткод имеет следующий вид:

[wpcc id="1"]

где 1 — это ID вашего калькулятора

Если вам требуется вставить калькулятор в php файл темы, используйте следующий код:

<?php echo do_shortcode('[wpcc id="1"]'); ?>

Что означает «Текстовая формула ID полей»

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

Что означает «Строка»

После расчета калькулятора в административной панели можно увидеть поле «Строка», которая отображает данные из полей, их знаки «до» и «после».
Эта строка выполняется перед отображением суммы.

Что такое "$_SESSION[‘wpcc_Х’]"

После расчета калькулятора в административной панели можно увидеть массив данных из сессии. В массиве ключ является ID поля, а значение — результатом поля. Ключ sum содержит в себе результат расчета.
Так же в массиве присутствуют названия указанных или выбранных данных пользователем в калькуляторе.

Что такое «ksort(array())»

После расчета калькулятора в административной панели можно увидеть отсортированный массив расчета данных с их знаками «до» и «после». Позволяет вам полностью увидеть картину формулы. Ключ массива НЕ является ID поля. Это порядковый номер в массиве.

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

В калькулятора на момент написания статьи создано 4 простых темы.
Файлы тем расположены в папке плагина /wp-creator/calculator/theme/название выбранной вами темы для калькулятора
В каждой папке есть файл style.css который отвечает за оформление калькулятора.

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

Бывают случаи, когда рассчитывать в калькуляторе ничего не требуется, но нужно получить данные от пользователи.
Например: Вы хотите реализовать форму, в которой будет предложен выбор марки автомобиля. Посетителю при выборе определенной марки авто при помощи поля «Условие» отображаются следующие опции по конфигурации технических характеристик. После всех действий вам на почту приходят данные которые выбрал пользователь.
Для реализации подобной задачи, у всех полей выставляем «Нет» в параметре: «Это поле участвует в формуле расчета».
При помощи CSS вы можете скрыть поле результата расчета, чтобы посетитель не видел не нужную ему информацию в которой будет отображено 0 руб. Стиль отвечающие за блок с результатом расчета: .wpcc_result либо wpcc_result_X где X — это ID вашего калькулятора.

Как экспортировать формулу

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

Как Импортировать формулу

Вы можете импортировать ранее сериализованный массив из другого калькулятора при помощи кнопки «Импорт формулы». В импортируемых данных содержатся все созданные поля и индивидуальные настройки калькулятора. Если вы импортируете данные с другого сайта (или переданные от друга), не забудьте поменять e-mail в настройках калькулятора на который будут отправляться письма.

Как установить плагин:
1. Скачать плагин — http://wordpress.org/plugins/wp-creator-calculator/
2. Закачать в папку плагинов вашего сайта wp-content/plugins/
3. Активировать плагин
4. Слева в меню административной панели выберите пункт WPCC
5. Создавайте и настраивайте свой калькулятор.

p.s. Ищу добровольного переводчика для плагина и инструкции на английский язык.

UPD: Версия 3.5.2

• Добавлен параметр для условия «Оператор условия»: ==, >, <, >=, <=
• Добавлен параметр фильтр для поля «Input text»: только цифры и точка
• Исправлена ошибка изменения названия калькулятора
• Добавлено новое поле «Результат полей». Позволяет выбрать поля и применить к ним арифметическое действие

UPD: видео: www.youtube.com/watch?v=eMHBxILCa9s

habr.com

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

Универсальное решение для всех: маркетологов, предпринимателей, фрилансеров, дизайнеров, владельцев сайтов и сообществ, блогеров и фанатов конверсии. Оно простое, заметное и эффективное. Просто посмотрите.

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

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

Формы и калькуляторы позволяют легко конвертировать посетителей сайта на платформе WordPress в платящих клиентов. Вы сможете быстро предложить нужную информацию о своем товаре или услуге и мотивировать клиентов заходить на сайт чаще. Принимать платежи можно прямо из калькулятора и формы на PayPal, Яндекс Деньги или Яндекс Кассу.

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

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

Среди более чем +30 высококачественных шаблонов форм и калькуляторов различных форматов вы обязательно найдете то решение, которое даст наилучший результат. Делайте калькуляторы, лид-формы, формы обратной связи, формы подписки и голосования, а также тестирование и всплывающие формы.
Простая настройка тем оформления и цветовых схем упростит использование калькулятора или формы под любую задачу, в соответствии с дизайном вашего сайта на WordPress. Теперь вы готовы к любой ситуации с помощью калькулятора услуг, доставки, формы брони, отзыва, регистрации на мероприятие, новогодней акции — без специальных знаний и затрат на поддержку.

Нужен чистый код для полной свободы дизайна? Вам точно понравится простой визуальный редактор, с помощью которого всего за пару минут можно собрать калькулятор или форму. Нужно лишь добавить своего уникального стиля… И готово!

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

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

Скачать плагин

unetway.com

Как создать калькулятор при помощи WP Calc Finance?

Алгоритм установки, в принципе, не сложен:

1. Первым делом, конечно же, покупаем лицензию на официальном сайте.
2. Подключение выполняется через меню «Плагины» — «Добавить новый», где кликаете на кнопку «Загрузить» и выбираете необходимый файл на компьютере.
3. Через несколько секунд в интерфейсе админ-панели появится соответствующий новый раздел. Переходим в пункт «Лицензия», где вводим ваш ключ.
4. Далее желательно зайти в «Настройки» дабы указать язык и валюту расчетов.
5. По завершении процедуры можете глянуть пункт «ЧАВО» с некоторой информацией о модуле.

Чтобы создать новый калькулятор потребуется:

1. Перейти в пункт меню «Калькуляторы» и кликнуть «Добавить». Вся основная работа выполняется этом разделе, который содержит созданные ранее объекты (+шорткоды), кнопки редактирования/копирования а также добавления нового элемента.

2. Из выпадающего списка выбрать тип создаваемого объекта, например, «Депозитный».

3. Затем приступаете к определению разных опций и заданию параметров дизайна через соответствующие настройки:

Здесь в обязательном порядке потребуется указать название формы и валюту расчета. Далее можно: вводить заголовок, выбирать цвета шрифта, фона, рамки, отметить наличие графика/экспорта, управлять полями и т.п. По завершению работы нажимаете «Сохранить». Вот небольшое видео по работе с плагином:

Итого. Как видите, в установке и создании калькулятора с помощью WP Calc Finance нет ничего сложного. Для него предусмотрено 2 типа лицензии: 25 долларов за 3 сайта или 50 — за 10 инсталов. Сумма, в принципе, не особо большая, особенно, если у вас несколько проектов, где надо внедрить подобные функции расчета. Вы, во-первых, получаете целый набор из 12ти разных форм, во-вторых, сможете запросить некоторые правки/доработки у разработчиков. Это сэкономит вам кучу времени или денег, если решите обратиться к фрилансерам при решении аналогичной задачи.

Если вы уже купили WP Calc Finance, отпишитесь о впечатлениях. Возможно, знаете интересные альтернативы по данной тематике?

tods-blog.com.ua

Для чего нужен калькулятор на сайте?

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

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

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

250/3000=x/100, где x – искомый нами средний расход в литрах

Итак, x = 250*100/3000 = 8,3 л

Т.е. в основе вычисления X будет лежать следующая формула:

X = Расход топлива за путь * 100 / Километраж

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

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

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

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

Плагины WordPress для создания калькулятора для сайта

Вордпресс-плагины для установки калькуляторов также распределены по направлениям. К примеру, среди денежных можно выделить: Loan calculator Pro (ипотека), FC's Auto Loan Calculator (автокредит), Debt Reduction Calculator (депозит), CC Savings Calculator (калькулятор сбережений), Responsive Mortgage Calculator (адаптивный кредитный кальулятор). А вот несколько устаревшие калькуляторы здоровья: BMI BMR Calculator (калькулятор веса), Fitness Tracker (расчет нагрузок, калорий).

Но на сегодняшний день существуют универсальные плагины WordPress для создания калькуляторов. Они позволяют самостоятельно формировать нужный тип и внешний вид данного элемента на сайте.

Один из них мы уже рассматривали раннее – плагин WP Creator Calculator. Однако последнее его обновление было три года назад.

Следующий плагин имеет свежие обновления — WpCalc. Он позволяет совершать расчеты с любым количеством вводных. Здесь есть масса функций, с помощью которых можно создать калькулятор для большого количества потребностей. На официальном сайте создателей WpCalc есть множество готовых примеров: от конвертеров валют до преобразования Атомов в Моли. Однако, чтобы скачать готовое решение потребуется зарегистрироваться, а регистрация стоит 10 долларов. Без оплаты придется сделать свой калькулятор на WordPress-сайт самостоятельно. Скачать сам плагин можно бесплатно. Вот пример одного из калькуляторов сделанных с помощью WpCalc:

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

Inquiry Calc – калькулятор, который подойдет для установки на Landing Page. Он позволяет посетителю выбирать опции пошагово, а после – выдавать результат просчета. После получения стоимости, пользователь может отправить запрос на обработку админу сайта.

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

Кроме приведенных выше бесплатных плагинов, есть также платные варианты с расширенными функциями: Cost Calculator, ez Form Calculator. Их стоимость колеблется в районе 20 долларов. Часто они используются с Woocommerce темами.

Конструкторы для сборки калькулятора

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

UCalc

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

Кроме того, с помощью UCalc можно делать калькуляторы и для социальных сетей.

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

Попробуем создать простой бесплатный калькулятор для своего блога на Вордпресс с помощью UCalc.

Проходим регистрацию. Для этого нужно ввести Имя, Email и пароль. В следующем окне нам предложат выбрать между двумя опциями: Использовать шаблон или Собрать самостоятельно. Мы выберем готовый шаблон.

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

Из раздела «Экономика и финансы» кликаем на расчет CTR.

Здесь можно внести изменения во внешний вид, добавить дополнительные элементы из левой колонки путем перетаскивания объектов (список, ползунок, флажок и т.д.).

Чтобы изменить формулу расчета, нужно кликнуть на значок «Формула» в левом верхнем углу. Перейти от «Дизайна» к «Формуле».

После внесения правок, нажимаем «Предпросмотр» и если все устраивает «Сохранить».

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

Для того, чтобы вставить код на своем WordPress-блоге, вам потребуется установить плагин от uCalc:

После установки и активации плагина, необходимо его привязать к предварительно созданному вами аккаунту в системе uCalc. Если установка и активация прошла успешно, то в визуальном редакторе появится вот такая кнопка:

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

Если вы создаете калькулятор в сервисе самостоятельно, без использования шаблонов, можно посмотреть подсказки по построению формул, свойствам виджетов и прочим функциям uCalc в разделе «База знаний». Там же вы найдете инструкции по добавлению калькулятора на сайты на других CMS, типа Joomla, Drupal и т.д.

Также в сервисе можно заказать создание готового индивидуального калькулятора для ваших целей.

pro-wordpress.ru

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

1. Calculated Fields Form

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

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

2. CT Mortgage Calculator

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

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

3. Responsive Mortgage Calculator

Responsive Mortgage Calculator — еще один простой в использовании калькулятор ипотеки для сайтов недвижимости. Он поставляется с виджетами боковой панели и шорткодами, которые вы можете использовать внутри своих статей, страниц и под своими списками.

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

4. Measurement Price Calculator

Если вы используете интернет-магазин WooCommerce, который имеет элементы, доступные в гибких размерах измерений, то это плагин, который вам понадобится. Он позволяет вам добавлять цены на товары на основе результатов измерений, выбранных клиентом.

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

5. WooCommerce Product Options and Price Calculation Formulas – Uni CPO

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

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

6. Цена WooCommerce на основе страны

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

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

7. Калькулятор TimeZone

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

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

8. Калькулятор даты

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

Штрих-код также работает с плагинами контактной формы, такими как Contact Form 7.

9. Калькулятор погашения и заявка на получение кредита

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

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

10. Калькулятор BMI

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

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

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

wpnova.ru

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

После активации данного плагина у вас в левом меню появится пункт «WPCC»,

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

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

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

Вся панель настроек разбита на 4 вкладки, это:

1. 1.Конструктор
2. 2.Экспорт формулы
3. 3.Импорт формулы
4. 4.Настройки

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

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

Итак, рассмотрим вкладку «Конструктор».

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

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

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

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

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

Добавляем скрытое поле. Выбираем, в разворачивающемся списке, тип поля «Input hidden», и нажимаем кнопку «Добавить».

Далее, в разделе «Добавленные поля» у нас появляется выбранное поле. Для того, чтобы задать для него какие-то настройки необходимо нажать на значек +

Здесь мы можем:

1. 1.Ввести заголовок.
2. 2.Выбрать цвет для формы.
3. 3.Так как данное поле у нас будет самым первым в форме, то в графе «Знак до» мы ничего не ставим.
4. 4.«Знак после» — тоже, пока что не указываем.
5. 5.Далее, указываем базовую стоимость в поле «Цена».
6. 6.В поле «Данные», оставляем как есть, «Полученные данные».
7. 7.Далее, можно задать возможность учитывать это поле в расчетах или не учитывать. В нашем случае, мы его будем учитывать.

После задания параметров нажимаем на кнопку «Сохранить параметры полей».

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

Использование поля Select

Первый параметр, который мы зададим — объем жесткого диска. Для объема жесткого диска мы будем использовать тип поля «Select», т. е. это будет раскрывающийся список.

Выбираем тип поля «Select», нажимаем «Добавить». Для того, чтобы задать его настройки:

1. 1.Нажимаем на значек +
2. 2.Далее, вводим заголовок.
3. 3.В поле «Знак до» ставим +, т. е. у нас значение этого поля будет складываться со значением предыдущего поля.
4. 4.«Знак после» — пока что не трогаем.
5. 5.После чего добавляем список значений, который будет у нас высвечиваться в раскрывающемся списке.
6. 6.Первый вариант для выбора, который я добавлю, будет объем жесткого диска 500 Гб. В поле текст, пишу 500Гб
7. 7.В поле значение мне нужно задать стоимость данного жесткого диска, которое будет прибавляться к базовой стоимость ноутбука. К примеру, у меня здесь будет 1000.
8. 8.Для того чтобы добавить новый вариант, я нажимаю на ссылку «Добавить строку».
9. 9.Следующий вариант — 1 TB. Его стоимость будет равна, к примеру, 1500. И дальше, аналогично, добавляем 2TB, 4TB и т. д.
10. 10.В поле данные у нас так и должно оставаться «Полученные данные».
11. 11.В «Поле участвует при расчетах», оставляем «Да».
12. 12.«Визуально скрыть поле» оставляем «Нет».
13. 13.После того как мы задали все настройки — нажимаем «Сохранить параметры полей».

Поле Radio

Следующее поле, которое нам понадобится — поле для выбора цвета ноутбука. Для этого параметра мы воспользуемся типом поля «Radio».

1. 1.Выбираем этот тип и нажимаем на кнопку «Добавить». А затем нажимаем на знак + и задаём настройки.
2. 2.Указываем заголовок
3. 3.«Знака до» — ставим +
4. 4.«Знак после» — оставляем пустым
5. 5.А дальше, нам нужно точно так же задать список значений
6. 6.Так же здесь можно выбрать изображение для каждого варианта, для этого просто щелкаем по полю со ссылкой и открывается библиотека медиафайлов, через которую мы можем выполнить загрузку изображения.
7. 7.Для добавления вариантов аналогично, нажимаем на ссылку «Добавить строку».
8. 8.Значение поля «Данные» остается по умолчанию.
9. 9.«Поле участвует при расчетах» — также, остается по умолчанию.
10. 10.Нажимаю на кнопку «Сохранить параметры полей».

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

Следующий параметр, по которому будет выполняться расчет — это объем оперативной памяти.
Добавим еще одно поле, на этот раз это будет поле «Slider».

1. 1.Выбираем тип поля и нажимаем «Добавить». Slider представляет собой ползунок, двигая который у нас будет изменяться числовое значение.
2. 2.Нажимаем на значок + для настройки параметров.
3. 3.Задаем заголовок.
4. 4.«Знак до» — ставим +.
5. 5.«Минимальное значение» — 2.
6. 6.«Максимальное значение» — 12.
7. 7.«Шаг» будет равняться 2, т. е. у меня будет объём 2 Gb, 4 Gb, 6Gb и т. д. до 12Gb.
8. 8.Далее, нужно выбрать положение, горизонтальное либо вертикальное.
9. 9.После чего, необходимо указать значение по умолчанию. Так как у нас здесь идет минимальное значения 2Гб, мы задаем значение 2. Если у вас нет какого-то значения по умолчанию то вы здесь должны поставить 0.
10. 10.Поля «Данные», «Поле участвует при расчетах» и «Визуально скрыть поле» оставляем по умолчанию.
11. 11.Нажимаем «Сохранить параметры полей».

Для расчёта стоимости оперативной памяти и дальше выбранное значение будет умножаться на стоимость 1Гб оперативной памяти.

Добавляем еще одно поле «Input hidden»:

1. 1.Выбираем тип поля, нажимаем «Добавить».
2. 2.Вписываем заголовок «Цена за 1 Гб».
3. 2.«Знак до» будет стоять *.
4. 2.«Знак после» — не ставим.
5. 2.«Цена» — 250 рулей, к примеру.
6. 2.Нажимаем «Сохранить параметры полей».

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

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

1. 1.Выбираем этот тип поля и нажимаем на кнопку «Добавить», далее нажимаем на +, чтобы задать нужные параметры. В поле checkbox мы дадим возможность выбирать дополнительные аксесуары для ноутбука.
2. 2.«Знак до» — ставим +.
3. 3.«Знак после» — ничего не ставим.
4. 4.Далее, задаем список вариантов. Здесь так же можно добавлять изображение при необходимости.
5. 5.Далее, «Значение по умолчанию», ставим 0. Как видите, настройки этого поля очень похожи на настройки поля «Radio», но в отличии от этого типа полей, здесь есть еще такое поле, как «Действие с данными».
6. 6.Все остальные поля остаются по умолчанию.
7. 7.Нажимаем на кнопку «Сохранить параметры полей».

Поле Input text

Данные, вводимые в это поле будут просто прибавляться к общей сумме.

И еще одно поле, которое я вам покажу — называется «Input text».

1. 1.Добавляем этот тип поля и нажимаем +.
2. 2.Указываем заголовок.
3. 3.«Знак до» — ставим +.
4. 4.«Цена» — к примеру, 200 рублей.
5. 5.«Действия с данными» — +.
6. 6.«Значение по умолчанию» — 0.
7. 7.Так же, здесь можно задать «Placeholder». Это, текст, который будет высвечиваться в случае, если поле не заполнено.
8. 8.Также здесь можно задать максимальное количество символов вводимых в поле, если нужно.
9. 9.Далее, в поле «Валидация» можно выбрать тип проверки, т. е. в поле можно будет вписывать к примеру, только цифры, либо любые символы.
10. 10.Последние три поля оставляем по умолчанию.
11. 11.Нажимаем на кнопку «Сохранить параметры полей».

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

В верху у нас отображается текстовая формула, которая показывает, что происходит с нашими полями. Цифрами 1,2, 3 и т.д. обозначаются идентификаторы добавленных нами полей.

Вставка калькулятора на страницу

Для того чтобы это сделать нам нужно:

1. 1.Возвращаемся в самый верх страницы и копируем шорткод.
2. 2.Создаем новую страницу с названием «Калькулятор».
3. 2.Вставляем шорткод калькулятора во вкладку «Текст».
4. 2.Нажимаем на кнопку «Опубликовать».
5. 2.Переходим на страницу и смотрим как выглядит наш калькулятор.

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

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

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

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

Я также подготовила для Вас подробную инструкцию по созданию данного калькулятора.

Помимо вычислений этот калькулятор также умеет отправлять полученные данные на e-mail, причём не только администратору, а и пользователю.
Более подробно о том, как настроить эту возможность я расскажу в одной из следующих статей.
Подписывайтесь на обновления, чтобы ничего не пропустить.

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

С уважением Юлия Гусарь

impuls-web.ru