Cost Calculator For WordPress

Cost Calculator For WordPress is a powerful and easy-to-use calculation and appointment plugin for WordPress. This unique tool allows you to easily create price estimation forms to give your client idea of the cost of your service. It comes with Calculation Form Builder, Calculations Manager, Dummy Data Importer and provides WPBakery Page Builder (Visal Composer) integration.

Full List Of Features

  • 100% Responsive And Mobile Compatible
  • Unlimited Calculators And Appointment Forms
  • WPBakery Page Builder (Visual Composer) integration
  • WordPress 5.0 Gutenberg editor integration
  • Fully Customizable Layouts And Components
  • Store Calculations In Database
  • Access Calculations Details In Admin Area
  • Receive Calculations To Email Address
  • Support For Multiple Calculation Summary Boxes in One Form
  • Support For All Currencies
  • Support For reCaptcha
  • Ability To Add 'Terms and Conditions' Checkbox
  • 6 Different Calculator Components
    • Dropdown Box
    • Slider Box
    • Input Box
    • Switch Box
    • Summary Box
    • Contact Box
  • Cost Calculator Shortcode Builder
    • Ability To Build Custom Layout
    • Unlimited Rows And Columns
    • Advanced Color And Fonts Settings
    • 5 Predefined Layout Skins Available
    • Ability To Edit Existing Shortcodes
  • Build-In Color Picker
    • Ability To Choose Main Color For Components
    • Ability To Choose A Color For Component Background
    • Ability To Choose A Color For Component Text
    • Ability To Choose A Color For Component Border
    • Ability To Choose A Color For Component Label
  • Font Configurator
    • Ability To Enter a Custom Font Name
    • Ability To Choose From a Google Font Library With Hundreds Of Fonts To Choose From
  • Template Configurator
    • Ability To Set Email Details And Email Template
    • Ability To Configure Contact Form Messages
    • Ability To Configure SMTP Connection For Sending Emails
  • Dummy Data Importer Included
  • Valid HTML5 Code
  • Crossbrowser Compatible
  • Documentation Included

Instructional Videos

Shortcodes

Cost Calculator

You can display cost calculator form by using below shortcode:

[cost_calculator id="your_calculator_id"]

This shortcode can be created configured under Cost Calculator in your WordPress admin area.


There are 6 components available which you can use to build your custom calculation form:

Dropdown Box

[cost_calculator_dropdown_box id="dropdown-box" name="dropdown-box" label="" default_value="" options_count="1" option_name0="Option 1" option_value0="10" show_choose_label="1" choose_label="Choose..." top_margin="none"]

Available shortcode parameters:

Parameter Default value Description
id dropdown-box Specifies the unique component id, which can be use later in the calculation formula (please check Summary Box section).
name dropdown-box Specifies the component name, which will be used as name html parameter for select dropdown.
label Specifies the label of the dropdown component which will be displayed before it.
options_count 1 Specifies the number of available dropdown list options to choose.
option_name(n) Specifies the name of the option available to choose from the dropdown list.
option_value(n) Specifies the value of the option available to choose from the dropdown list.
show_choose_label 1 Specifies if the first option on the list should be a default 'Choose' label option
choose_label Choose... Specifies the choose label text
top_margin none Specifies the margin top value of the component. Possible values:
none
page-margin-top
page-margin-top-section


Slider Box

[cost_calculator_slider_box id="slider-box" name="slider-box" label="" default_value="6" unit_value="1" step="1" min="0" max="10" top_margin="none" el_class=""]

Available shortcode parameters:

Parameter Default value Description
id slider-box Specifies the component id, which can be use later in the calculation formula (please check Summary Box section).
name slider-box Specifies the component name, which will be used as name html parameter for input tag.
label Specifies the label of the slider box component which will be displayed before it.
default_value 6 Specifies the default value, which will be used as start value for the slider component after page load.
unit_value 1 Specifies the unique unit value for each slider step. For example if your slider input value is 6 and the unit value is 3, then the summary value will be 18. If you would like to use this value in the calculation formula (please check Summary Box section), you need to add -value suffix to the slider component id. For example slider-box-value
step 1 Specifies the minimum step between values in slider box component.
min 0 Specifies the minimum possible value available to select from slider box component.
max 10 Specifies the maximum possible value available to select from slider box component.
top_margin none Specifies the margin top value of the component. Possible values:
none
page-margin-top
page-margin-top-section
el_class Specifies the custom css class for the component.


Input Box

[cost_calculator_input_box id="input-box" name="input-box" label="" default_value="" type="text" checked="1" checkbox_type="type-button" placeholder="" top_margin="none" el_class=""]

Available shortcode parameters:

Parameter Default value Description
id input-box Specifies the unique component id, which can be use later in the calculation formula (please check Summary Box section).
name input-box Specifies the component name, which will be used as name html parameter for input tag.
label Specifies the label of the input box component which will be displayed before it.
default_value Specifies the default value, which will be used as start value for the input box component after page load.
type text Specifies the type of the input box component. Possible types:
text
number
date
email
checkbox
hidden
submit
checked 1 Applies only when type parameter is set to checkbox. Specifies if checkbox should be checked by default on after page load.
checkbox_type type-button Applies only when type parameter is set to checkbox. Specifies the layout of the checkbox. Possible values:
type-button
default
placeholder Specifies the placeholder text for the input.
top_margin none Specifies the margin top value of the component. Possible values:
none
page-margin-top
page-margin-top-section
el_class Specifies the custom css class for the component.


Switch Box

[cost_calculator_switch_box id="switch-box" name="switch-box" label="" yes_text="Yes" no_text="No" default_value="1" checked="1" top_margin="none" el_class=""]

Available shortcode parameters:

Parameter Default value Description
id switch-box Specifies the unique component id, which can be use later in the calculation formula (please check Summary Box section).
name switch-box Specifies the component name, which will be used as name html parameter for input tag.
label Specifies the label of the input box component which will be displayed before it.
yes_text Yes Specifies the text which will be displayed when switch component is in active position.
no_text No Specifies the text which will be displayed when switch component is in inactive position.
default_value 1 Specifies the default value for the switch box component when it is in active position. When the switch box is in inactive position the value is always 0.
checked 1 Specifies if the switch box should be in active position by default after page load
top_margin none Specifies the margin top value of the component. Possible values:
none
page-margin-top
page-margin-top-section
el_class Specifies the custom css class for the component.


Summary Box

[cost_calculator_summary_box id="cost" name="total_cost" formula="" currency="$" currency_after="" currency_size="default" thousandth_separator="," decimal_separator="." description="" icon="" el_class=""]

Available shortcode parameters:

Parameter Default value Description
id cost Specifies the unique component id.
name total_cost Specifies the component name, which will be used as name html parameter for input tag with total calculation value.
formula Specifies the calculation formula. You can use there components ids, numbers, sum sign (+), subtraction sign({-}) multiplication sign(*), division sign(/), power sign(^) and brackets ().

Example formulas:
slider-box*input-box+30*switch-box
slider-box-value*(input-box+slider-box-value*dropdown-box)

Important note about subtraction sign {-}.
As hyphen character can be used in component id you will need to surround it with brackets {} when you would like to make subtraction in the formula, example:
slider-box{-}input-box+30*switch-box

You can also surround other operators with brackets {} but that is not required, example:
slider-box{-}input-box{+}30{*}switch-box

How to use power operator (^)?
If you would like to use power operator (^) you need to surround the power operation with {powerstart} and {powerend} tags, example:
slider-box+{powerstart}input-box^2{powerend}*switch-box

If you will set custom ids for your components, you need to use them also in calculation formula.

Example formula used for live Example 1 form from live preview site:
cleaning-frequency*clean-area+cleaning-frequency*cleaning-supplies+cleaning-frequency*bedrooms*20+cleaning-frequency*bathrooms*20+cleaning-frequency*livingrooms*30+cleaning-frequency*kitchen-size+cleaning-frequency*bathroom-includes+cleaning-frequency*pets+cleaning-frequency*dining-room+cleaning-frequency*play-room+cleaning-frequency*laundry+cleaning-frequency*gym+cleaning-frequency*garage+cleaning-frequency*refrigerator-clean


Example formula used for live Example 2 form from live preview site:
ir-square-feet-value*ir-walls+ir-square-feet*ir-floors+ir-doors-value+ir-windows-value+ir-cleaning
currency $ Specifies the currency sign displayed before value number for your calculation sum.
currency_after $ Specifies the currency sign displayed after value number for your calculation sum.
currency_size default Specifies the currency sign size for your calculation sum. Possible values:
default
small
thousandth_separator , Specifies the separator sign which will be used to separate groups of thousands in the calculation sum value.
decimal_separator . Specifies the separator sign which will be used to separate integer part from the fractional part of the calculation sum value.
description Specifies the text description which will be displayed after calculation sum value.
icon Specifies the icon which will be displayed next to calculation sum value. Possible values:
cc-template-calculation
cc-template-card
cc-template-wallet
el_class Specifies the custom css class for the component.


Contact Box

[cost_calculator_contact_box label="" submit_label="Submit now" name_label="YOUR NAME" name_required="1" email_label="YOUR EMAIL" email_required="1" phone_label="YOUR PHONE" phone_required="0" message_label="QUESTIONS OR COMMENTS" message_required="0" type="" labels_style="default" description="" el_class=""]

Available shortcode parameters:

Parameter Default value Description
label Specifies the label of the contact box component which will be displayed before it.
submit_label Submit now Specifies the label of the contact form submit button.
name_label YOUR NAME Specifies the label for the contact form name field.
name_required 1 Specifies if the name field should be required to fill by the user.
email_label YOUR EMAIL Specifies the label for the contact form email field.
email_required 1 Specifies if the email field should be required to fill by the user.
phone_label YOUR PHONE Specifies the label for the contact form phone field.
phone_required 0 Specifies if the phone field should be required to fill by the user.
message_label QUESTIONS OR COMMENTS Specifies the label for the contact form message field.
message_required 0 Specifies if the message field should be required to fill by the user.
type Specifies the additional form type hidden input which you can fill with custom value and receive in $_POST["type"] array index after submitting the form.
labels_style default Specifies if the labels should be displayed before contact form fields or inside them as placeholders. Possible values:
default
placeholder
description Specifies the text description which will be displayed next to contact form submit button.
el_class Specifies the custom css class for the component.


If you would like to create calculator without using form builder for some reason, then you can additionally use [vc_row] and [vc_column] components to build the form layout in your page content editor.

Row

[vc_row]content[/vc_row]

Available shortcode parameters:

Parameter Default value Description
top_margin none Specifies the margin top value of the component. Possible values:
none
page-margin-top
page-margin-top-section
el_class Specifies the custom css class for the component.


Column

[vc_column]content[/vc_column]

Available shortcode parameters:

Parameter Default value Description
width 1/1 Specifies the layout of the column. Possible values:
1/1
1/2
1/3
2/3
1/4
3/4
top_margin none Specifies the margin top value of the component. Possible values:
none
page-margin-top
page-margin-top-section
el_class Specifies the custom css class for the component.

FAQ - Frequently Asked Questions

1. How to make subtraction in the calculation formula?

As hyphen character can be used in component id you will need to surround it with brackets {} when you would like to make subtraction in the formula, example:

slider-box{-}input-box+30*switch-box

You can also surround other operators with brackets {} but that is not required, example:
slider-box{-}input-box{+}30{*}switch-box



2. How to use power operator (^)?

If you would like to use power operator (^) you need to surround the power operation with {powerstart} and {powerend} tags, example:

slider-box+{powerstart}input-box^2{powerend}*switch-box



3. I have multiple 'Summary Boxes' on the page. Is it possible to use the value of them in another 'Summary Box' formula?

Yes, it is possible. Let say that you have prepared a 'Summary Box' which will calculate the price of the materials, the example shortcode:

[cost_calculator_summary_box id="materials-cost" name="materials-cost" formula="wood+paint+windows" currency="$" currency_after="" currency_size="default" thousandth_separator="," decimal_separator="." description="" icon="" el_class=""]

Then you have added another 'Summary Box' which will calculate the labor price, example shortcode:
[cost_calculator_summary_box id="labor-cost" name="labor-cost" formula="hours*15" currency="$" currency_after="" currency_size="default" thousandth_separator="," decimal_separator="." description="" icon="" el_class=""]

Now you would like to display third 'Summary Box' with total cost. You need to add -total-value suffix to your materials-cost and labor-cost ids and use them in your third 'Summary Box' formula:
[cost_calculator_summary_box id="final-cost" name="final-cost" formula="materials-cost-total-value+labor-cost-total-value" currency="$" currency_after="" currency_size="default" thousandth_separator="," decimal_separator="." description="" icon="" el_class=""]

CSS Styles

The plugin uses the following cascade of styles (in order):

  • style.css - default styles for timetable,
  • responsive.css - styles for responsive design,
  • rtl.css - styles for RTL view mode,
  • jquery.qtip.css - default styles for tooltips (overwritten in style.css).

Credits

Icons

All icons by QuanticaLabs. Icons are an integral part of this plugin, please do not use it separately for other purposes.

Images

Images that are an integral part of this plugin, please do not use it separately for other purposes.

Premium images you can use along with this plugin without asking permission (included within demo content package):

Changelog

20 January 2023, ver. 5.0

  • New skin 'Finpeak' added.
  • Placeholders option for 'Contact Box' component added.
  • 'Currency sign' and 'Thousandth separator' options for 'Slider Box' component added.
  • 'Display negative result as 0' option for 'Summary Box' component added.
custom_colors.php
ql-cost-calculator.php
admin/admin-page.php
admin/admin-page-global-config.php
admin/contact_box.php
admin/input_box.php
admin/slider_box.php
admin/summary_box.php
admin/js/cost-calculator-admin.js
js/cost_calculator.js
js/jQuery.costCalculator.js
js/jQuery.costCalculator.min.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_dropdown_box.php
shortcodes/cost_calculator_input_box.php
shortcodes/cost_calculator_slider_box.php
shortcodes/cost_calculator_summary_box.php
style/style.css

11 August 2022, ver. 4.1

  • Fix for not visible form builder bug.
admin/admin-page.php
admin/admin-page-global-config.php

08 July 2022, ver. 4.0

  • Minor code improvements.
custom_colors.php
ql-cost-calculator.php
admin/admin-page.php
admin/admin-page-global-config.php
admin/admin-page-import-dummy-data.php
admin/js/cost-calculator-admin.js
js/cost_calculator.js
style/style.css

28 January 2022, ver. 3.9

  • Fix for shortcode loading issue in admin area.
ql-cost-calculator.php
admin/admin-page-email-config.php
shortcodes/cost_calculator_contact_box.php
style/style.css
--- new files ---
admin/js/selectmenu_fix.js

11 June 2021, ver. 3.8

  • New 'Send From' option added under email config.
  • Minor code improvements.
ql-cost-calculator.php
admin/admin-page-email-config.php
dummy_content_files/dummy-cost-calculator.xml
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
style/rtl.css
style/style.css

10 December 2020, ver. 3.7

  • Minor code and styles improvements.
admin/style/style.css
shortcodes/cost_calculator_dropdown_box.php
style/style.css

03 September 2020, ver. 3.6

  • Option to display not number results in formula as 0 added.
  • Formula is no longer required parameter in Summary Box.
ql-cost-calculator.php
admin/summary_box.php
admin/js/cost-calculator-admin.js
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_summary_box.php

13 August 2020, ver. 3.5

  • Compatibility with WordPress 5.5 added.
ql-cost-calculator.php
js/cost_calculator.js
js/jquery.qtip.min.js
style/jquery.qtip.css
style/style.css

03 July 2020, ver. 3.4

  • 'Currency vertical align' option added for summary box.
  • Minor code improvements.
custom_colors.php
admin/summary_box.php
admin/js/cost-calculator-admin.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_summary_box.php
style/responsive.css
style/rtl.css
style/style.css

19 May 2020, ver. 3.3

  • Fixes for themes conflicts.
custom_colors.php
style/rtl.css
style/style.css

28 April 2020, ver. 3.2

  • New skin added - GymBase (dark style).
custom_colors.php
admin/admin-page.php
admin/admin-page-global-config.php
admin/js/cost-calculator-admin.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_input_box.php
style/style.css

13 March 2020, ver. 3.1

  • Code and conflicts fixes.
  • Minor css fixes.
custom_colors.php
ql-cost-calculator.php
js/cost_calculator.js
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_dropdown_box.php
shortcodes/cost_calculator_input_box.php
style/responsive.css
style/rtl.css
style/style.css

10 May 2019, ver. 3.0

  • Minor css fixes.
custom_colors.php
shortcodes/cost_calculator_summary_box.php
style/responsive.css
style/style.css

17 April 2019, ver. 2.9

  • Option to hide label for components added.
  • Fix for currency position in the calculation template.
admin/dropdown_box.php
admin/input_box.php
admin/slider_box.php
admin/switch_box.php
admin/js/cost-calculator-admin.js
fonts/template/demo.html
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_dropdown_box.php
shortcodes/cost_calculator_input_box.php
shortcodes/cost_calculator_slider_box.php
shortcodes/cost_calculator_summary_box.php
shortcodes/cost_calculator_switch_box.php
style/style.css

24 January 2019, ver. 2.8

  • Fix for Gutenberg editor javascript error when no shortcodes were available.
ql-cost-calculator.php

14 January 2019, ver. 2.7

  • Fix for demo content import issue under WP 5.0.
  • Minor code fixes.
ql-cost-calculator.php
shortcodes/cost_calculator_summary_box.php
style/style.css

20 December 2018, ver. 2.6

  • WordPress 5.0 Gutenberg editor integration added.
ql-cost-calculator.php
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
style/style.css
--- new files ---
admin/js/.babelrc
admin/js/block.build.js
admin/js/block.js
admin/js/package.json
admin/js/package-lock.json
admin/js/webpack.config.js
languages/cost-calculator-en.json

23 November 2018, ver. 2.5

  • Ability to set number of displayed decimal places for summary value.
admin/summary_box.php
admin/js/cost-calculator-admin.js
js/cost_calculator.js
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_summary_box.php

16 November 2018, ver. 2.4

  • Fix for js error in cost_calculator.js file.
js/cost_calculator.js

15 November 2018, ver. 2.3

  • Bug fix: SMTP settings not being applied in some cases.
ql-cost-calculator.php
admin/admin-page-email-config.php
admin/style/style.css
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php

10 November 2018, ver. 2.2

  • Ability to set calculator fields as required added.
  • Minor code fixes.
custom_colors.php
admin/dropdown_box.php
admin/input_box.php
admin/js/cost-calculator-admin.js
js/cost_calculator.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_dropdown_box.php
shortcodes/cost_calculator_input_box.php
style/style.css

10 October 2018, ver. 2.1

  • Ability to send via email and store in database multiple summary values from one calculation form.
ql-cost-calculator.php
admin/summary_box.php
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_summary_box.php

29 August 2018, ver. 2.0

  • Bug fix: power operator doesn't work in some cases when present multiple times in one formula.
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
style.css

04 August 2018, ver. 1.9

  • New demos: loan, bmi, hosting, web design.
  • Minor code fixes.
custom_colors.php
ql-cost-calculator.php
admin/js/cost-calculator-admin.js
dummy_content_files/dummy-cost-calculator.xml
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
style/style.css

18 July 2018, ver. 1.8

  • New styles for Car Service Sking Summary Box Component.
  • Minor code fixes.
custom_colors.php
shortcodes/cost_calculator_slider_box.php

21 June 2018, ver. 1.7

  • Fix for checkbox appearance under webkit browsers.
custom_colors.php
ql-cost-calculator.php
style/responsive.css
style/style.css

13 June 2018, ver. 1.6

  • Fix for Warning: array_flip() issue.
ql-cost-calculator.php

08 June 2018, ver. 1.5

  • Option to enable reCaptcha in the contact form added.
  • Option to enable terms and conditions checkbox in the contact form added.
  • Plugin directory name changed to 'ql-cost-calculator' because of the conflict with other calculator plugin.
  • Small code fixes.
custom_colors.php
admin/admin-page.php
admin/admin-page-email-config.php
admin/admin-page-global-config.php
admin/admin-page-import-dummy-data.php
admin/contact_box.php
admin/js/cost-calculator-admin.js
admin/style/style.css
js/cost_calculator.js
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_column.php
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_dropdown_box.php
shortcodes/cost_calculator_input_box.php
shortcodes/cost_calculator_row.php
shortcodes/cost_calculator_slider_box.php
shortcodes/cost_calculator_summary_box.php
shortcodes/cost_calculator_switch_box.php
style/responsive.css
style/rtl.css
style/style.css
---new files---
ql-cost-calculator.php
--- removed files ---
cost-calculator.php

11 May 2018, ver. 1.4

  • Option to send email with calculation to client added.
  • Option to hide text input for slider box component added.
  • New example with multiple summary boxes added.
  • Small fixes for styles conficts.
cost-calculator.php
admin/admin-page-global-config.php
admin/slider_box.php
admin/js/cost-calculator-admin.js
dummy_content_files/dummy-cost-calculator.xml
js/cost_calculator.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_slider_box.php
style/style.css

28 April 2018, ver. 1.3

  • Support for subtraction and power operations in calculation formula added.
  • Support for operations between 'Summary Boxes' total values added.
  • Small fixes for styles conficts.
custom_colors.php
admin/style/style.css
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_summary_box.php
style/rtl.css
style/style.css

16 April 2018, ver. 1.2

  • Support for brackets and division in calculation formula added.
  • Small fixes for styles conficts.
custom_colors.php
fonts/template/style.css
js/cost_calculator.js
js/jquery.costCalculator.js
js/jquery.costCalculator.min.js
style/responsive.css
style/rtl.css
style/style.css

12 April 2018, ver. 1.1

  • Update for calculation email template readability (now in a form of table).
  • Ability to send 'not checked' state of the checkbox and switch box added.
cost-calculator.php
admin/admin-page-email-config.php
admin/input_box.php
admin/js/cost-calculator-admin.js
js/cost_calculator.js
languages/cost-calculator-default.mo
languages/cost-calculator-default.po
shortcodes/cost_calculator_contact_box.php
shortcodes/cost_calculator_dropdown_box.php
shortcodes/cost_calculator_input_box.php
shortcodes/cost_calculator_switch_box.php

05 April 2018, ver. 1.0

  • First release

Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.