Calculations

Quform WordPress v2 DocumentationGuidesAdvancedCalculations

There isn’t anything built in to the Quform plugin to do calculations on the selected form values and show results, but it can be done with custom JavaScript code. This guide will show you how to show the results of a calculation to the user and set the value of a Hidden field so that the same total is submitted with the form data for the admin to see.

Note: if you do not understand the JavaScript code in Step 3 you may need a JavaScript developer to build this for you. We are not available for hire for custom work.

Step 1

Create the form if you haven’t done so already and add a Hidden field to the form to store the result of the calculation.

Step 2

Add an HTML element to the form at the point in the where you want the result of the calculation to appear, and enter the following code as the content.

1

<div id="form-total"></div>
<div id="form-total"></div>

Step 3

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field enter the following code.

1
2
3
4
5
67
8
9
10
11
12
13
14
15
1617
18
19
20
21
22
23
24
25
26
2728
29
30
31
3233
34
35
36
3738
39
40
41
42
43
44
45
46
4748
49
50
51
52
53
54
55
5657
58
59
60
61
62
6364
65
6667
68
6970

jQuery(function ($) {
    var calculate = function () {
        var total = 0;
 
        // Check the selected option of a select menu
        var val1 = $('.quform-field-1_3').val();        if (val1 == 'Option 1') {
            total += 15;
        } else if (val1 == 'Option 2') {
            total += 20;
        } else if (val1 == 'Option 3') {
            total += 25;
        }
 
        // Check the selected options of a multi select menu
        var val2 = $('.quform-field-1_4').val();        if (val2) {
            if ($.inArray('Option 1', val2) > -1) {
                total += 40;
            }
            if ($.inArray('Option 2', val2) > -1) {
                total += 80;
            }
        }
 
        // Check if a checkbox is ticked
        if ($('.quform-field-1_5_1').is(':checked')) {            total += 5;
        }
 
        // A second checkbox
        if ($('.quform-field-1_6_1').is(':checked')) {            total += 105;
        }
 
        // A radio button
        var val3 = $('.quform-field-1_7:checked').val();        if (val3 == 'Option 1') {
            total += 100;
        } else if (val3 == 'Option 2') {
            total += 200;
        } else if (val3 == 'Option 3') {
            total += 250;
        }
 
        // A text input field with numeric value
        var val4 = $('.quform-field-1_8').val();        if (val4 && val4.length && $.isNumeric(val4)) {
            total += parseFloat(val4);
        }
 
        // Display the result to the user (optional)
        $('#form-total').text('Total: $' + total);
 
        // Set the value of the hidden field (optional)
        $('.quform-field-1_9').val('$' + total).triggerHandler('change');    };
 
    // Calculate on page load
    calculate();
 
    // Recalculate when these select menus are changed
    $('.quform-field-1_3, .quform-field-1_4').on('change', calculate); 
    // Recalculate when these checkboxes/radio buttons are clicked
    $('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').on('click', calculate); 
    // Recalculate when these text input fields are changed
    $('.quform-field-1_8').on('keyup blur', calculate);});
jQuery(function ($) {
    var calculate = function () {
        var total = 0;

        // Check the selected option of a select menu
        var val1 = $('.quform-field-1_3').val();
        if (val1 == 'Option 1') {
            total += 15;
        } else if (val1 == 'Option 2') {
            total += 20;
        } else if (val1 == 'Option 3') {
            total += 25;
        }

        // Check the selected options of a multi select menu
        var val2 = $('.quform-field-1_4').val();
        if (val2) {
            if ($.inArray('Option 1', val2) > -1) {
                total += 40;
            }
            if ($.inArray('Option 2', val2) > -1) {
                total += 80;
            }
        }

        // Check if a checkbox is ticked
        if ($('.quform-field-1_5_1').is(':checked')) {
            total += 5;
        }

        // A second checkbox
        if ($('.quform-field-1_6_1').is(':checked')) {
            total += 105;
        }

        // A radio button
        var val3 = $('.quform-field-1_7:checked').val();
        if (val3 == 'Option 1') {
            total += 100;
        } else if (val3 == 'Option 2') {
            total += 200;
        } else if (val3 == 'Option 3') {
            total += 250;
        }

        // A text input field with numeric value
        var val4 = $('.quform-field-1_8').val();
        if (val4 && val4.length && $.isNumeric(val4)) {
            total += parseFloat(val4);
        }

        // Display the result to the user (optional)
        $('#form-total').text('Total: $' + total);

        // Set the value of the hidden field (optional)
        $('.quform-field-1_9').val('$' + total).triggerHandler('change');
    };

    // Calculate on page load
    calculate();

    // Recalculate when these select menus are changed
    $('.quform-field-1_3, .quform-field-1_4').on('change', calculate);

    // Recalculate when these checkboxes/radio buttons are clicked
    $('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').on('click', calculate);

    // Recalculate when these text input fields are changed
    $('.quform-field-1_8').on('keyup blur', calculate);
});

The code will need to be modified to suit your own calculation and element IDs. See below for a description of how to change the code.

  • On line 6, change 1_3 to a Select Menu element unique ID, and below that change the option values and prices to suit
  • On line 16, change 1_4 to a Multi Select element unique ID, and below that change the option values and prices to suit
  • On line 27, change 1_5_1 to a Checkbox option unique ID
  • On line 32, change 1_6_1 to a Checkbox option unique ID
  • On line 37, change 1_7 to a Radio Button element unique ID, and below that change the option values and prices to suit
  • On line 47, change 1_8 to a Text element unique ID
  • On line 56, change 1_9 the Hidden field unique ID from Step 1
  • On line 63, change 1_3 and 1_4 to the unique ID of any Select Menu and Multi Select element that will affect the calculation, add more selectors by separating them by a comma
  • On line 66, change 1_5, 1_6 and 1_7 to the unique ID of any Checkboxes and Radio Button elements which will affect the calculation, add more selectors by separating them by a comma
  • On line 69, change 1_8 to the unique ID of a Text element which will affect the calculation, add more selectors by separating them by a comma
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy